I am using d3/topojson and I'd like to color (or present) only two countries where two users are located.(The location of a user is represented by latitude and longitude.)
I am modifying code from this website to overlay two different countries, but I am having trouble to only visualize the two countries. The image in the link is comparing U.S and Australia and I want the map visualizes only U.S and Australia with no other country such as Canada or Mexico in the map.
The code that I am using for is,
// define canvas object and context for large canvasvar largeCanvasObj = d3.select("#large").append("canvas") .attr("width", largeWidth) .attr("height", largeHeight)var largeCanvasContext = largeCanvasObj.node().getContext("2d")largeCanvasContext.globalAlpha = .9var graticule = d3.geo.graticule()()var mapObjects = []var largeMapObjects = []// set up ranges/scalesvar zoomToBoxScale = d3.scale.log().domain([17098242, 50]).range([100,600]);// set up initial visable statefor (var i = 0; i < 2; i++) { largeMapObjects = setUpLargeMaps(state.latLon.lat, state.latLon.lon, i)}function setUpLargeMaps(lat, lon, name) { var projectionLarge = d3.geo.azimuthalEqualArea() .translate([largeWidth / 2, largeHeight / 2]) // .scale(state.scale) .scale(state.scale) .center([0, 0]) .clipAngle(180 - 1e-3) .clipExtent([ [2 * padding, 2 * padding], [largeWidth - 2 * padding, largeHeight - 2 * padding] ]) .rotate([-lon, -lat]) .precision(.7); var path = d3.geo.path() .projection(projectionLarge) .context(largeCanvasContext); largeCanvasObj.call(dragSetupLarge()) return { "projection": projectionLarge, "path": path, }}// what to draw on the canvas for large/smallvar drawCanvasLarge = function() { largeCanvasContext.clearRect(0, 0, largeWidth, largeHeight); largeCanvasContext.strokeStyle = "#333", largeCanvasContext.lineWidth = 1, largeCanvasContext.strokeRect(2 * padding, 2 * padding, largeWidth - 4 * padding, largeHeight - 4 * padding); largeCanvasContext.fillStyle = "#b2d0d0", largeCanvasContext.fillRect(2 * padding, 2 * padding, largeWidth - 4 * padding, largeHeight - 4 * padding); largeCanvasContext.fillStyle = colors[0], largeCanvasContext.beginPath(), largeMapObjects[0].path(land), largeCanvasContext.fill(); largeCanvasContext.strokeStyle = "black", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[0].path(borders), largeCanvasContext.stroke(); largeCanvasContext.fillStyle = colors[1], largeCanvasContext.beginPath(), largeMapObjects[1].path(land), largeCanvasContext.fill(); largeCanvasContext.strokeStyle = "black", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[1].path(borders), largeCanvasContext.stroke(); largeCanvasContext.strokeStyle = "gray", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[0].path(stateborder), largeCanvasContext.stroke();}d3.json("us.json", function(error, world) { stateborder = topojson.feature(world, world.objects.states);})d3.json("world-110m.json", function(error, world) { land = topojson.feature(world, world.objects.land); borders = topojson.mesh(world, world.objects.countries); // use data to draw paths on small maps drawCanvasLarge()})function drawfromarticle(matchObject, center_lat,center_lon, userarea, this_country_lat, this_country_lon, this_country_area, scale) { console.log(matchObject, center_lat,center_lon, userarea, this_country_lat, this_country_lon, this_country_area, scale); state.latLon[0] = { lat: center_lat, lon: center_lon } state.latLon[1] = { lat: this_country_lat, lon: this_country_lon } state.scale = this_country_area; rotateAndScale() updateHash()}drawfromarticle functions gets two locations (two latitudes and longitudes) from the other function. If it helps, it can get 'country name' as well.
أكثر...
I am modifying code from this website to overlay two different countries, but I am having trouble to only visualize the two countries. The image in the link is comparing U.S and Australia and I want the map visualizes only U.S and Australia with no other country such as Canada or Mexico in the map.
The code that I am using for is,
// define canvas object and context for large canvasvar largeCanvasObj = d3.select("#large").append("canvas") .attr("width", largeWidth) .attr("height", largeHeight)var largeCanvasContext = largeCanvasObj.node().getContext("2d")largeCanvasContext.globalAlpha = .9var graticule = d3.geo.graticule()()var mapObjects = []var largeMapObjects = []// set up ranges/scalesvar zoomToBoxScale = d3.scale.log().domain([17098242, 50]).range([100,600]);// set up initial visable statefor (var i = 0; i < 2; i++) { largeMapObjects = setUpLargeMaps(state.latLon.lat, state.latLon.lon, i)}function setUpLargeMaps(lat, lon, name) { var projectionLarge = d3.geo.azimuthalEqualArea() .translate([largeWidth / 2, largeHeight / 2]) // .scale(state.scale) .scale(state.scale) .center([0, 0]) .clipAngle(180 - 1e-3) .clipExtent([ [2 * padding, 2 * padding], [largeWidth - 2 * padding, largeHeight - 2 * padding] ]) .rotate([-lon, -lat]) .precision(.7); var path = d3.geo.path() .projection(projectionLarge) .context(largeCanvasContext); largeCanvasObj.call(dragSetupLarge()) return { "projection": projectionLarge, "path": path, }}// what to draw on the canvas for large/smallvar drawCanvasLarge = function() { largeCanvasContext.clearRect(0, 0, largeWidth, largeHeight); largeCanvasContext.strokeStyle = "#333", largeCanvasContext.lineWidth = 1, largeCanvasContext.strokeRect(2 * padding, 2 * padding, largeWidth - 4 * padding, largeHeight - 4 * padding); largeCanvasContext.fillStyle = "#b2d0d0", largeCanvasContext.fillRect(2 * padding, 2 * padding, largeWidth - 4 * padding, largeHeight - 4 * padding); largeCanvasContext.fillStyle = colors[0], largeCanvasContext.beginPath(), largeMapObjects[0].path(land), largeCanvasContext.fill(); largeCanvasContext.strokeStyle = "black", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[0].path(borders), largeCanvasContext.stroke(); largeCanvasContext.fillStyle = colors[1], largeCanvasContext.beginPath(), largeMapObjects[1].path(land), largeCanvasContext.fill(); largeCanvasContext.strokeStyle = "black", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[1].path(borders), largeCanvasContext.stroke(); largeCanvasContext.strokeStyle = "gray", largeCanvasContext.lineWidth = .5, largeCanvasContext.beginPath(), largeMapObjects[0].path(stateborder), largeCanvasContext.stroke();}d3.json("us.json", function(error, world) { stateborder = topojson.feature(world, world.objects.states);})d3.json("world-110m.json", function(error, world) { land = topojson.feature(world, world.objects.land); borders = topojson.mesh(world, world.objects.countries); // use data to draw paths on small maps drawCanvasLarge()})function drawfromarticle(matchObject, center_lat,center_lon, userarea, this_country_lat, this_country_lon, this_country_area, scale) { console.log(matchObject, center_lat,center_lon, userarea, this_country_lat, this_country_lon, this_country_area, scale); state.latLon[0] = { lat: center_lat, lon: center_lon } state.latLon[1] = { lat: this_country_lat, lon: this_country_lon } state.scale = this_country_area; rotateAndScale() updateHash()}drawfromarticle functions gets two locations (two latitudes and longitudes) from the other function. If it helps, it can get 'country name' as well.
أكثر...