I'd like to use D3 + Leaflet with the Albers USA projection.
I used Mike Bostock's D3 + Leaflet demonstration as a starting point (found here: http://bost.ocks.org/mike/leaflet/). I'm not sure how to properly use the Albers USA projection. I've encountered a couple problems while trying to figure out how to do this:
I'm not sure how to make Leaflet use the Albers USA projection. I think I might be able to do it using the Proj4Leaflet plugin, but I've been unable to find the parameters that I need to pass to it when creating the CRS that specify Albers USA. I've found some potential configuration strings on spatialreference.org, but I don't know what to specify for origin or resolutions and haven't found anything out there that explains it.
D3's Albers USA projection is returning null for some points in the collection and for the bounds. I'm using the us-states.json file that Mike Bostock used. I found the explanation for that here: https://github.com/mbostock/d3/issues/1287. "[...]it will now return null for points outside the composite projection’s clip extent, since such points would not be displayed when using the projection stream". I'm not sure how to proceed from here. Should I be using a different data set?
If anyone has any advice on how to proceed, I'd greatly appreciate it!
You may have two separate questions, so here are brief answers to both -
1.) Your source data doesn't need to be in Albers-US (which isn't strictly speaking a projection anyway - AK and HI aren't in Mexico) in order to bring it into Leaflet. Here's the US States dataset as GeoJSON, in geographic coordinates: https://gist.github.com/wboykinm/6979292
2.) Whatever the projection of the source data, Leaflet only renders in the Google Mercator projection (The projection you see in the example you started from). If you absolutely must have Albers US, it shouldn't really be a pan-able/zoomable map for reasons of context distortion. Just use Mike's D3 example for a static map: http://bl.ocks.org/mbostock/6320825
If you're determined to make a slippy map for Leaflet using Albers US, who am I to stop you? But that process would require a.) moving of feature geometry in a GIS program, and b.) fooling Tilemill into using the wrong projection as it creates tiles for you to use in Leaflet. Not a recommended course of action.
I would also be remiss if I didn't mention that you can always make your D3 graphic zoomable with d3.behavior.zoom()
Related
I have longitude and latitude coordinates which represent different types of geometry shapes (point, multi-point, polygon, multi-polygon and line string etc) that are stored in MongoDB. I'd like plot them (say each shape as a layer) using JavaScript. Map is not needed as a background although these coordinates represent building etc in the real world. I understand there are calculations as such are involved to convert coordinates to x and y on graph/canvas but not sure where to begin tbh. I'm very new to GIS and JavaScript so go easy on me please. I know this question sounds a bit vague but bottom line is I have coordinates that represent real world elements and want to plot them without a map background. I'd appreciate advises and suggestions. Many thanks.
The easiest way to do it is to use a Javascript mapping library such as OpenLayers or Leaflet. You could also do it with D3, although should you want to make your map more full-featured later, it will be much easier with a library that was designed for that type of thing.
If you are storing your data in Mongo as GeoJSON (GeoJSON website), you can add it to OpenLayers as a GeoJSON layer.
Disclaimer- My opinions might be slightly biased because I used to work for Boundless
I need to reproduce behavior of leaflet's worldCopyJump(), but for vertical scrolling: for world map it's when user scrolls up from North Pole, the South Pole is shown. Is there a way to do so?
Not in the default map projection.
By default, Leaflet uses EPSG:3857 AKA "Web Mercator", a type of cylindrical map projection. In cylindrical map projections, two points (in this case, the geographical north and south poles) can not be represented in the map at all.
What you see is a cropped version of this map projection: The map is cut out as approximately ~85°N and ~85°S in order to look square. In reality, the map projection is infinite in the vertical axis.
This said:
Read the leaflet tutorial on CRS.Simple. You can use projections other that the default.
Read the documentation for L.CRS. It's important in order for you to...
Read Leaflet's source code for CRSs. Pay extra attention to those wrapLat and wrapLng properties.
Research on map projections. Is there any wrapping projection that serves your purposes? Can you achieve that with Proj4Leaflet? If not...
Write your own custom L.CRS with the desired wrapping.
I'm trying to create a map using Highmaps.
Data come from two data source in GeoJson format, one for the boundaries of the country and another one to display some cities.
The boundaries is perfectly displayed, but the problem comes when I add the points (cities) using their latitude and longitude.
Due to the fact that Highmaps uses a custom projection all the points are placed in the wrong position or not displayed at all.
Following the docs here: http://www.highcharts.com/docs/maps/latlon I'm trying to add the hc-transform in the geojson of the boundaries but I have no luck.
Anyone knows exactly how to write the proj4 string format in the crs in order to work on highmaps?
As I'm displaying, one by one, all the countries, I wonder if I have to configure a customized crs for each country (I mean is it different country by country, or the same for the entire world projection?)
I'm using WGS84 as coord system
I have not developed anything using highchart. From their website i think it is using proj4 to handle the projection. So here comes some examples:
var wgs84= "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
Not sure why you want to costomize crs for each country. So I assume you are going to some spatial analysis. In that case, UTM would be better for your even you just want to calculate area or distance.
var utm = "+proj=utm +ellps=GRS80 +datum=nad83 +units=m +zone="+ getUTMZone(lon).toString();
My example is in NAD83, modify it based on your needs for countries you are interested in.
Make sure your basemap and your data point are in the same projection coordinate system to avoid incorrect positioning.
I'm looking for some guidance or an example how to do a geochart in d3.js.
I need something like this one in google charts, and turning to d3.js since I need some customization. So far the closest d3.js sample I found is this but the code is very long there and I am hoping to find something simpler.
Are you looking for a choropleth map? Here's a recent example in 28 lines of code.
This example uses the default projection, d3.geo.albersUsa, which is a composite projection for the United States including Alaska, Hawaii and Puerto Rico. If you want to change the visible region, you probably also want to change the projection; d3.geo.albers is good for choropleth maps because it is equal-area. The albers projection lets you set the origin so that you can focus on a specific part of the global, and all projections allow you to specify scale and translate to position the map on-screen.
If you want to display a world map, I'd also take a look at the ongoing development of the extended projections plugin. This adds a number of useful map projections, particularly for world maps, such as the Winkel Tripel. The next release of D3 will also include some exciting new features such as three-dimensional rotation for any projection (including antemeridian cutting; try dragging this example), adaptive resampling and improved clipping.
As for coloring the choropleth, you can of course color geographic features however you like by redefining the "fill" style as a function of data.
With all due respect to #mbostock and his answer, I thought I would add some additional resources for anyone coming across this question.
The example in the link provided by #Yaron Naveh appears to be a Mercator projection. You can find out more about d3.js' Mercator projection facilities in the d3.js API. #mbostock has also been kind enough to create blocks/gists for each of the projections in the API (click on the projection thumbnail image for the example). Here are the links to a simple Mercator projection block/gist.
Regarding the "The Art of Asking - How are you feeling?" link, here is a little code to go with what #mbostock said about coloring using the fill style as a function of data. In this example, I am simply picking the unicode value for the first character of the country's name in the JSON file and making a CSS color from that value using "steelblue" (#4682B4 = 4620980) as a sort of seed (you will probably want to calculate shades/tints).
d3.json("readme.json", function(collection) {
d3.select("svg").selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(d3.geo.mercator()))
.style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); });
});
You can check out the full example here as a block/gist.
(#mbostock - Thank you for such a great tool!)
I wanted to ask you about the way to make spatial interpolation in google maps API. This means- I have values for some points inside an area and want to recalculate values for every point in this area (and create an raster overlay).
In "offline" GIS softwares, there are more methods to do this. For example Kriging (http://en.wikipedia.org/wiki/Kriging).
Thanks for answer
There is no real practical way to do such a thing. Spatial Interpolation is something you really need a full-blown GIS to accomplish. It requires storing, analyzing, and presenting data in way that ArcGis or QGis is best suited for. There is some new feature in ArcGis Online that works with Google Maps API but I don't know much about it and am unsure if it would be any help for you but a link is here.
I know, its not something geostatiscically correct, but I have made this:
- I have created a net of rectangle polygons.
- I have connected all my points to polygon they lie and have made mean value for polygons with at least one point
- I have checked every polygon without points and at least 2 neighbourly polygons with points, and have made mean from this neighbourly values
- I have checked again all my polygons with values and at least 2 neighbourly polygons with values and smoothed origin values according to the neighbours´ values.