i am using OpenSeaDragon, there is Customtiles to showup the images, i can not see the the image exactly for the navigation... please check the issue for the screenshot : http://screencast.com/t/BeP6nyA6M
The code is here :
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "example-custom-tilesource",
//debugMode: true,
navigatorSizeRatio: 0.25,
wrapHorizontal: true,
showNavigator: true,
tileSources: {
height: 512 * 256,
width: 512 * 256,
tileSize: 256,
minLevel: 8,
getTileUrl: function (level, x, y) {
console.log("URL::->" + "http://s3.amazonaws.com/com.modestmaps.bluemarble/" + (level - 8) + "-r" + y + "-c" + x + ".jpg")
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
(level - 8) + "-r" + y + "-c" + x + ".jpg";
}
}
});
</script>
This issue is discussed in https://github.com/openseadragon/openseadragon/issues/325. It's a bug in OpenSeadragon, but you can fix it by removing the minLevel and adjusting getTileUrl so it works for all levels.
Related
how to specify the position of next note to be added
i tried with following code but it is generating randomly even over the previous note .but the next note should not be on the position of previous note.
randomBetween: function (min, max) {
return min + Math.ceil(Math.random() * max);
},
componentWillMount: function () {
this.style = {
right: this.randomBetween(0, window.innerWidth - 150) + 'px',
top: this.randomBetween(0, window.innerHeight - 150) + 'px',
transform: 'rotate(' + this.randomBetween(-15, 15) + 'deg)' };
},
I'm trying to have multiple map layers of maps on top of each other using react, d3, and openstreetmaps. I originally got started with React and the react-simple-maps library a few months ago, and so far I've been able to replicate this setup of getting a topojson file into d3 to generate the map, which is much more customize-able. The shapefiles you can download give you lines around the countries, or the states or counties or even US zip codes...pretty cool!
An open source (hint: free!) way to get a more granular, street-level view, along with other features like rivers, lakes etc would be a nice add-on to the maps I am building for my data visualizations. So far, I have the d3 map in place, but really confused on the openstreetmap, which for some reason insists on being positioned at the bottom right corner of the page, and not direclty overtop of the d3 map? I know there are lot of other libraries, including the not-so-free resources offered by google and mapbox and the other big players in the map game, but I'm close to getting this working...any ideas where I'm going wrong? I think it has something to do with grouping the svg maps properly but I'm not sure? Here's some code...any ideas are appreciated! A quick note is that these topojson files are large and can be slow to load, so I use axios to fetch them from a container component higher up in the tree to pass them down as props. Here's an example of that, where you have a nicely positioned map and a stubborn openstreetmap that lives below it. Some of it is removed for brevity, my apologies if it doesn't run?
EDIT: sorry for my WALL of code, after two weeks of no replies, here's a codepen that shows just the openstreetmap as it's own component:
https://stackblitz.com/edit/react-ktjlxk?embed=1&file=index.js
import React, { Component } from "react";
import "./worldMapOSM.css";
import * as d3 from "d3";
import * as d3Tile from "d3-tile";
import { geoMercator, geoPath } from "d3-geo";
//styles for map projection
const width = 960;
const height = 500;
class WorldMapOSM extends Component {
projection() {
return geoMercator() //geoConicConformal
.scale(120)
.center([6.8682168, 52.3401469])
.translate([width / 2, height / 2])
.clipExtent([[0, 0], [width, height]]) //????
.precision(0.5);
}
componentDidMount() {
const width = Math.max(960, window.innerWidth),
height = Math.max(500, window.innerHeight),
prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
const svg = d3.select(this.refs.anchor);
const map = d3
.select("body")
.append("div")
.attr("class", "map")
.style("width", width + "px")
.style("height", height + "px")
const layer = map.append("div").attr("class", "layer");
const tile = d3Tile
.tile()
.size([width, height])
.scale(this.projection().scale() * 2 * Math.PI)
.translate(this.projection([0, 0]))
.zoomDelta((window.devicePixelRatio || 1) - 0.5);
const tiles = d3Tile.tile();
const image = layer
.style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
.selectAll(".tile")
.data(tiles, function(d) {
return d;
})
image.exit().remove();
image
.enter()
.append("img")
.attr("class", "tile")
.attr("src", function(d) {
return (
"http://" +
"abc"[d.y % 3] +
".tile.openstreetmap.org/" +
d.z +
"/" +
d.x +
"/" +
d.y +
".png"
);
})
.style("left", function(d) {
return (d[0] << 8) + "px";
})
.style("top", function(d) {
return (d[1] << 8) + "px";
});
svg
.append("use")
.attr("xlink:href", "#land")
.attr("class", "stroke");
formatLocation(this.projection.invert(d3.mouse(this)), zoom.scale())
function matrix3d(scale, translate) {
var k = scale / 256,
r = scale % 1 ? Number : Math.round;
return (
"matrix3d(" +
[
k,0,0,0,0,k,0,0,0,0,k,0,
r(translate[0] * scale),
r(translate[1] * scale),
0,
1
] +
")"
);
}
function prefixMatch(p) {
var i = -1,
n = p.length,
s = document.body.style;
while (++i < n)
if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
return "";
}
function formatLocation(p, k) {
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
return (
(p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") +
" " +
(p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E")
);
}
}
}
render() {
return (
<div className="worldMap dropShadow">
<svg width={960} height={600} viewBox="0 0 960 600">
<g id="map">
{/* D3 map */}
<g className="eurCountries">
{this.props.Countries.map((d, i) => (
<path
key={`path-${i}`}
d={geoPath().projection(this.projection())(d)}
className="state"
fill={`rgba(187,218,247,${(1 / 1000) * i})`}
stroke="#afafaf"
strokeWidth={0.5}
/>
))}
</g>
<g ref="anchor" />{/* openstreetmap */}
</g>
</svg>
</div>
);
}
}
export default WorldMapOSM;
I'm working on a react component I would like to be able to pass any image along with its dimensions, a clip-path calculated from an x, y width, and height for a rectangular region. This part I have working well. Then I would like to scale this clipped region back to fill a div, at the moment I have this div just the original image dimensions to keep it simple. I have the scaling part calculating properly but cannot work out the math to translate the scaled clip-path region. Here is my component (in Typescript):
interface RootProps {
links: Link[];
}
interface RootState {
}
class Root extends React.Component<RootProps, RootState> {
constructor(props) {
super(props);
this.state = {
}
}
pp = (x: number, y: number): string => {
return x + "% " + y + "%"
}
renderClippedImage = (name: string, x: number, y: number, width: number, height: number) => {
let iWidth = 600;
let iHeight = 360;
let p1 = {
x: (x / iWidth) * 100,
y: (y / iHeight) * 100
}
let p2 = {
x: (x / iWidth) * 100,
y: ((y + height) / iHeight) * 100
}
let p3 = {
x: ((x + width) / iWidth) * 100,
y: ((y + height) / iHeight) * 100
}
let p4 = {
x: ((x + width) / iWidth) * 100,
y: (y / iHeight) * 100
}
let clipPathString = 'polygon(' +
this.pp(p1.x, p1.y) + ', ' +
this.pp(p2.x, p2.y) + ', ' +
this.pp(p3.x, p3.y) + ', ' +
this.pp(p4.x, p4.y) + ')';
let pX = (x) / iWidth;
let pY = (y) / iHeight;
let portionCoverageX = (width) / iWidth;
let portionCoverageY = (height) / iHeight;
let scaleX = 1;
let scaleY = 1;
if (portionCoverageX > 0) {
scaleX = 1 / portionCoverageX;
}
if (portionCoverageY > 0) {
scaleY = 1 / portionCoverageY;
}
let translateX = -(((pX * scaleX) / 2) * 100); //this doesn't work
let translateY = 0; //similar issues getting this to work
let pathClipping = {
WebkitClipPath: clipPathString,
clipPath: clipPathString,
transform: 'translateX(' + translateX + '%) translateY(' + translateY + '%) scaleX(' + scaleX + ') scaleY(' + scaleY + ')'
}
console.log({
name: name,
pX: pX,
pY: pY,
portionCoverageX: portionCoverageX,
portionCoverageY: portionCoverageY,
scaleX: scaleX,
scaleY: scaleY,
translateX: translateX,
translateY: translateY
})
return (
<div style={{ textAlign: 'center', width: '100%', backgroundColor: 'lightseagreen' }}>
<b>{name}</b><br />
<div style={{ display: 'inline-block', width: 640, height: 360, backgroundColor: 'darkslateblue' }}>
<img width="640" height="360" src="https://placekitten.com/640/360" style={pathClipping} />
</div>
</div>
)
}
render() {
return (
<div style={{textAlign: 'center'}}>
<b>Original</b><br />
<img width="640" height="360" src="https://placekitten.com/640/360" />
<br />
{this.renderClippedImage("one", 80, 100, 200, 100)}
<br />
{this.renderClippedImage("two", 50, 50, 150, 100)}
<br />
{this.renderClippedImage("three", 300, 10, 300, 340)}
</div>
)
}
}
ReactDOM.render(<Root />, document.getElementById('mount-node'));
And here is a codepen, where you can see, my current math actually works for scenario 3, but it needs to work for 1, 2 and any other legitimate region combo as well.
https://codepen.io/anon/pen/xMWGRO
The specific line I think I am strugling with is this:
let translateX = (((pX * iWidth) / 2)); //this doesn't work for all examples
translateY is a similar issue, any help would be most appreciated.
I think you can set transform-origin as top left, so you can have simpler calculation for transform positions & scale.
let scaleX = iWidth / width;
let scaleY = iHeight / height;
let pX = x / iWidth;
let pY = y / iHeight;
let translateX = -pX * 100 * scaleX;
let translateY = -pY * 100 * scaleY;
let pathClipping = {
WebkitClipPath: clipPathString,
clipPath: clipPathString,
transformOrigin: `top left`,
transform: `
translate(${translateX}%, ${translateY}%)
scale(${scaleX}, ${scaleY})
`
};
See codesandbox here
I am working on dashboard chart. I am using chartjs for my charts and angularjs http.get method to get data from the server to my charts. I checked the console and the data is loaded and working properly, but the charts won't render unless I reroute to another page and then go back to my charts route page.
This is the code:
$scope.tripTotalts = "";
$scope.tripdstatus = "";
$scope.tripddstatus = "";
$scope.tripcstatus = "";
$scope.totalshow = "";
$scope.tripStatus = function() {
$http.get("/api/statusDispatched").success(function(response) {
dispatched = response;
$scope.tripdstatus = response[0];
});
$http.get("/api/statusDelivered").success(function(response) {
delivered = response;
$scope.tripddstatus = response[0];
});
$http.get("/api/totalTripsintheSystem").success(function(response) {
$scope.tripTotalts = response[0];
totalFleetTrips = response[0];
});
$http.get("/api/statusCompleted").success(function(response) {
completed = response;
$scope.tripcstatus = response[0];
});
$scope.totalshow = Math.round(((dispatched+delivered+completed) / totalFleetTrips) * 100)
console.log("CHECKOUT HERE");
console.log(dispatched);
console.log(delivered);
console.log(completed);
var tstatid = $("#tstatusChart");
tstatid.attr('height', 100);
var tripsatusChartInitiate = new Chart(tstatid, {
type: 'pie',
data: {
datasets: [{
data: [dispatched, delivered, completed],
backgroundColor: [
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
],
borderColor: [
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
], borderWidth: 1
}],
labels: ["Dispatched", "Delivered", "Completed"]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipLabel = data.labels[tooltipItem.index];
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return '[Day: ' +tooltipLabel + '] Data: ' + tooltipData + ' [Percentage: ' + tooltipPercentage + '%]';
}
}
},
animation: {
duration: 0
}
}
});
}
drag n drop utility: need to develop a tree structures with nodes and connectors. Nodes and connectors are to be manually drawn using the tool bar(manually created). On the nodes and connectors need to generate events.Using angular js. Please provide sample code.
Once clicked on the nodes the node gets created in one division and the connector can be used graphically to connect between nodes.
I have achieved this with d3 library which seems to be very useful.
Below is answer:
<div id="drawArea" class="division" ></div>
<script type="text/javascript">
// Create a svg canvas
var svg = d3.select("#drawArea")
.append("svg")
.attr("width", 700)
.attr("height", 500);
//Drag nodes
var drag = d3.behavior.drag()
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation()
})
.on("drag", dragmove);
//First circle
var g1 = svg.append("g")
.attr("transform", "translate(" + 150 + "," + 100 + ")")
.attr("class", "first")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#FFFF00")
//Second circle
var g2 = svg.append("g")
.attr("transform", "translate(" + 250 + "," + 300 + ")")
.attr("class", "second")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#00FF00")
svg.on('dblclick', function() {
var coords = d3.mouse(this);
console.log(coords);
drawCircle(coords[0], coords[1]);
});
function drawCircle(x, y) {
var g2 = svg.append("g")
.attr("transform", "translate(" + x + "," + y + ")")
.attr("class", "third")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#00F");
}
//Drag handler
function dragmove(d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
if(d3.select(this).attr("class") == "first") {
// line.attr("x1", x);
// line.attr("y1", y);
d3.select(this).attr("cx", x);
d3.select(this).attr("cy", y);
} else {
d3.select(this).attr("cx", x);
d3.select(this).attr("cy", y);
//line.attr("x2", x);
//line.attr("y2", y);
}
}
</script>