13

Is there a open source JavaScript library like Leaflet or OpenLayers which can be used in a web or mobile application and loads vector-based maps instead of images? I only need the road information and some POIs.

The only library I found was polymaps - but still I would need a server or service which serves the vector SVG data (preferable from OpenStreetMap). Also there is the nice Android project called Mapsforge but I would need it for a web application or other mobile devices.

5 Answers 5

10

For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.

For vector tiled maps (i.e different resolutions/levels of detail at different zoom levels), TileStache is a simple and good server. I have been using with lots of experiments with Polymaps (AFAIK, the only general-purpose working js tiled vector viewer). Some people have used OpenLayers for adding tiled vector support, but AFAIK, it has not been integrated to trunk in a year, so it probably won't in the near future for lack of interest.

TileStache (the server) itself is working very well. Nevertheless, I have found several bugs with Polymaps and since it is not being updated anymore (abandoned project), I cannot convince myself to use it in production (I'd have to maintain it myself... I can't justify it to myself just yet.)

My solution for me has been to write a custom OpenGL native vector renderer which is used in AmigoCloud. In fact, that is how all maps are rendered in our service. For that purpose, TileStache has delivered quite well.

You want to look at the TileStache Vector Provider. For examples on how to use it, you can look at a very basic vector test suite I wrote.

Sadly, I don't think Leaflet has support for tiled vectors.

6
  • Thanks! Is there a simple tilestache demo out in the web?
    – Karussell
    Commented Mar 5, 2013 at 8:45
  • The polymaps population density uses a tiled vector provider cache (i.e not running the tilestache server, but just a copy of what the ouput would look like). Looking at the code should make it obvious that it is vector tiled polymaps.org/ex/population.html . Sadly, the tilestache demos that are available online don't use the vector provider. Nevertheless, if you run tilestache-server locally and replace the demo urls for your localhost with a vector datasource (shapefile, postgis, etc) configured, it will work. Msg here for help if need be. Commented Mar 5, 2013 at 14:58
  • I am not agree with this answer especially this For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there. This will work if the vectors are to be overlayed, but how about if the entire map(all the base layer) are organized as vectors?
    – giser
    Commented Sep 23, 2013 at 0:12
  • @giser That is why I make a distinction between "just drawing vectors" and "vector tiled maps". The second answer was the term I used "entire" maps made out of purely vectors. Here is an example of such a thing: bl.ocks.org/mbostock/5593150 Commented Sep 23, 2013 at 23:55
  • @RagiYaserBurhum: I am sorry, I misunderstand it.
    – giser
    Commented Sep 24, 2013 at 1:03
10
+50

Update: since posting this, Mapbox released Mapbox GL JS, which does WebGL-based vector basemap rendering in browser.

At this point, there's no established option. The only fully-vector in-production map out there is Google's MapsGL, and that's very limited due to browser support & performance.

The closest you'll get with open source at the moment is Kothic.js and rolling your own tiles with Kothic's script.

1
  • +1 hey, this is cool! don't get why you got downvoted!
    – Karussell
    Commented Feb 26, 2013 at 15:46
6

If I understand your question correctly then both OpenLayers and Leaflet will load/show vector data.

For example

http://leafletjs.com/examples/geojson/

this loads a GeoJSON file onto the leaflet map which uses OSM via CloudMade in the background.

OpenLayers probably supports more different types of vector formats, like KML

http://dev.openlayers.org/examples/dynamic-text-layer.html

If you mean you are after a server to serve vector data onto the map then look at MapServer, GeoServer and ESRI ArcGIS Server which all will server vector data onto your map as a Web Feature Server (WFS).

7
  • I more mean the map itself as vector data not some features which I load onto the map.
    – Karussell
    Commented Feb 26, 2013 at 15:45
  • serving a lot of data through vector type can hang or even kill browser, because of too many <svg> elements, you should keep this in mind
    – Krystian
    Commented Mar 3, 2013 at 18:00
  • @Krystian That is if you render the map with SVG. Clearly you could render it with OpenGL/WebGL (as Google Maps does on the Android/iOS and in the experimental WebGL javascript maps). Commented Mar 5, 2013 at 22:44
  • @RagiYaserBurhum yeah, I didn't think about that, but still, in this particular case you can not use webGL, because of limitation in APIs ect..
    – Krystian
    Commented Mar 5, 2013 at 23:15
  • 1
    The OP did not mention ArcGIS API so I wasn't assuming that (plenty of GIS can be done without ArcGIS). Yes, I agree that mixing ArcGIS JS with WebGL would be a pain. Tiled vectors are new - but they have a good chance of being the future. Maybe Commented Mar 7, 2013 at 2:07
4

We started a page to collect links and information about vector tiles in the OpenStreetMap Wiki (work in progress):

http://wiki.openstreetmap.org/wiki/Vector_tiles

0
2

I found another interesting project called GL-Solar which is based on webgl technology rather than SVG or canvas. Although it is in its early development this looks promising.

Also MapCSS, Cartagen and d3.js should be mentioned. d3.js is used in the online osm editor iD. There is also a blog post about leaflet and html5 rendering.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.