

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

Specifically, I&#x27;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&#x27;m thinking along the lines of something more graphic.<p>Does anyone have any thoughts along these lines?
======
mbostock
Here’s my introductory tutorial for creating a map with D3 & TopoJSON using
geometry from Natural Earth:

[http://bost.ocks.org/mike/map/](http://bost.ocks.org/mike/map/)

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

[http://bost.ocks.org/mike/bubble-map/](http://bost.ocks.org/mike/bubble-map/)

~~~
xfalcox
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!!!

------
azov
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...](https://www.mapbox.com/mapbox-gl-
styles/styles/bright-v4.json)

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/](https://www.mapbox.com/tilemill/)

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

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

~~~
jeroenvisser101
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.

------
thrwy10
You might be looking for Mapbox and/or Leaflet

[https://www.mapbox.com/developers/](https://www.mapbox.com/developers/)

[http://leafletjs.com/](http://leafletjs.com/)

~~~
petepete
Also, openlayers

[http://openlayers.org](http://openlayers.org)

------
chishaku
This can help you get up and running quickly:

[http://jvectormap.com/](http://jvectormap.com/)

------
mdhgriffiths
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/...](http://gmaps-
samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html)

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.

------
kaybe
Might not fit your criteria, but in the scientific community GMT is popular:

[http://gmt.soest.hawaii.edu/](http://gmt.soest.hawaii.edu/)

------
hackertoolbox
Great discussion. Tools are in the box now.

[http://www.hackertoolbox.com/tags/map](http://www.hackertoolbox.com/tags/map)

------
CoreSet
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](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
So, what did you use?

How did you do it?

Did we help?

------
cinjon
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](https://github.com/mathisonian/lightning)

------
onion2k
You can style maps using [https://www.mapbox.com/](https://www.mapbox.com/)
and embed them very easily using leaflet.js.

If you want to go a bit further, stamen mapstack does some cool stuff:
[http://mapstack.stamen.com/](http://mapstack.stamen.com/)

------
rkda
Can you post an example of what you want?

If you just want to produce choropleths, you can try Leaflet. Other options
include d3.js and kartograph.

[http://kartograph.org/](http://kartograph.org/)

[http://d3js.org/](http://d3js.org/)

------
dpeck
Can you clarify on "more graphic"?

I'm a fan of datamaps,
[https://datamaps.github.io/](https://datamaps.github.io/), for doing some
quick and getting decent output.

------
eloycoto
You can use cartodb. It's a service but it's faster than use libraries like
leafletjs

[http://cartodb.com/](http://cartodb.com/)

Regards.

------
adrice727
Another D3 tutorial that was helpful:

[http://www.tnoda.com/blog/2013-12-07](http://www.tnoda.com/blog/2013-12-07)

------
jaybo_nomad
Bleeding edge WebGL requirements, but great 3D object control:
[http://cesiumjs.org/](http://cesiumjs.org/)

------
bni
[http://geo5.org](http://geo5.org)

