Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Is there a open source JavaScript library like leaflet or openlayer 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.

share|improve this question

5 Answers 5

up vote 3 down vote accepted

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

share|improve this answer
    
Nice effort, thanks! –  Karussell Mar 7 '13 at 9:27

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.

share|improve this answer

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.

share|improve this answer
    
Thanks! Is there a simple tilestache demo out in the web? –  Karussell Mar 5 '13 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. –  Ragi Yaser Burhum Mar 5 '13 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 Sep 23 '13 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 –  Ragi Yaser Burhum Sep 23 '13 at 23:55
    
@RagiYaserBurhum: I am sorry, I misunderstand it. –  giser Sep 24 '13 at 1:03

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.

share|improve this answer
    
+1 hey, this is cool! don't get why you got downvoted! –  Karussell Feb 26 '13 at 15:46

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

For example

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

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://openlayers.org/dev/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).

share|improve this answer
    
I more mean the map itself as vector data not some features which I load onto the map. –  Karussell Feb 26 '13 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 Mar 3 '13 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). –  Ragi Yaser Burhum Mar 5 '13 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 Mar 5 '13 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 –  Ragi Yaser Burhum Mar 7 '13 at 2:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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