WingNews logo WingNews GitHub [2]
top | item 8607695

Ask HN: Are there any JavaScript libraries for generating maps?

49 points| CoreSet | 11 years ago

Specifically, I'd love to be able to pass in geocoded location boundaries and color styles to generate a map of the chosen color over the chosen area. Google maps is obviously great for showing navigational data or directions, but I'm thinking along the lines of something more graphic.

Does anyone have any thoughts along these lines?

22 comments

order
[+] mbostock|11 years ago|reply
Here’s my introductory tutorial for creating a map with D3 & TopoJSON using geometry from Natural Earth:

http://bost.ocks.org/mike/map/

And here’s a subsequent tutorial for visualizing geographic data:

http://bost.ocks.org/mike/bubble-map/

[+] xfalcox|11 years ago|reply
I'm currently using D3 & TopoJSON to plot many things (including where our visitors are, since we have the lat and long of our users, by parsing the nginx log) and it's really great!!

Thanks for your hard work Mike!!!

[+] _keg4|11 years ago|reply
Just thought I'd say, when I first ran into D3, I sneered a bit. "These guys are just copying protovis." Took me a bit longer to notice the connection.
[+] azov|11 years ago|reply
If you want to create your own map tiles in advance and show them using JavaScript library - use TileMill [1] and Leaflet [2]. Both are excellent and very well documented.

To create the whole map on the fly using JavaScript - try mapbox-gl.js [3]. You should be able to pass your location boundaries via mapboxgl.GeoJSONSource (and then you probably don't even need MapBox API key - haven't tried it, though) and style it like this: https://www.mapbox.com/mapbox-gl-styles/styles/bright-v4.jso...

PS. If you decide to host your own tiles - remember that browsers limit the number of connections to each domain. Your map will load much faster if you serve tiles from several different domains, e.g. tiles1.example.com, tiles2.example.com, etc.

[1] TileMill - https://www.mapbox.com/tilemill/

[2] Leaflet - http://leafletjs.com/

[3] MapboxGL - https://www.mapbox.com/mapbox-gl/

[+] jeroenvisser101|11 years ago|reply
If someone is going to use different domains for their tiles, they might want to do something with hashes of the tile id/name to get a subdomain, in order to preserve caching.
[+] mdhgriffiths|11 years ago|reply
Google Maps API does have [some limited] style options, however then you're stuck using Google Maps API. There is even a "wizard" to make things easier: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/...

Mapbox is a great alternative for stylish maps. Their JS library is built off of Leaflet which allows you to change the tileset at a later date.

[+] cinjon|11 years ago|reply
Lightning by mathisonian is a solid library for generating these in python/js. It's an http-based data viz server with additional functionality similar to iPython notebooks. Check out the map demo on the github here:

https://github.com/mathisonian/lightning

[+] CoreSet|11 years ago|reply
Thanks all for the responses! I have a lot of new tech to try out.

For those wanting an example:

http://kut.org/term/google-fiber

Basically just a grey/white map showing important navigational details like roads and rivers, with different color sections overlaying it.

[+] chippy|11 years ago|reply
So, what did you use?

How did you do it?

Did we help?