I'm very new to GIS, so hope this is the correct place to ask. Not sure if this will even be possible.

This is what I want to achieve:

In short, I want to display a set of polygons, lines etc. in a browser, and then display an overlay which marks specific polygons and lines etc.

This is the way I think it should be approached:

  • Take a SVG which represents a set of lines and polygons.
  • Display this SVG using something like Leaflet in a browser, but without displaying a world map which seems to be the basis of Leaflet, OpenLayers etc.
  • Overlay a GeoJSON layer on top of the SVG.
  • If possible, I want the coordinates in the GeoJSON file to be relative to a reference point in the SVG.

Is this possible at all?

Also, is the last point possible, that is: specifying what the coordinates in the GeoJSON file should be relative to, or are they always interpreted as GIS coordinates?

  • If you can get the SVG in Leaflet in the right spot, you don't need to load a basemap. Leaflet doesn't have a basemap by default, so just load the SVG and then also your geojson. IN fact, if your two files use the same coordinates, you can ignore the coordinate system and it should 'just work'.
    – Alex Leith
    Feb 26, 2014 at 21:49

4 Answers 4


I use Leaflet with SVGs as the maps. I do this because I want the map functionality on top of a floor plan. In my experience, it works much better than Raphael.js (maybe just because it's newer?), which my company used for the same purpose on a previous project. I have also made map tiles out of floor plans, but the SVGs are faster and smoother when zooming in or out. SVGs are smaller than a folder of tiled images as well. To do this, I'm using Angular.js and the angular-leaflet-directive. Here is the example I used to get started. If you don't use the directive, you can have trouble with the "map" instance. This directive makes Angular play nicely with Leaflet. I use GeoJSONs on top of the image layer to show zones and points, too. Points are relative to your defined 'center', just like they would be on a tiled map using Leaflet. I've also set this up on a regular HTML page. You can basically cut and paste this Leaflet example. I had some frustration trying to figure out how to get this going, so hopefully this gets somebody pointed in the right direction.


If you just want to display SVG's, don't use a mapping library such as Leaflet. Instead, use an SVG library such as RapahelJS, or many others. None of those are specifically mapping libraries though.

You could experiment with Kartograph - which is a SVG mapping library - but I've never gotten it to work right (I'm on Windows and it was originally designed for Mac).

Probably the best solution is to use D3. It's a little complicated, but once you get the hang of it, it is very powerful. Here's a list of tutorials for d3, including some mapping ones. I highly recommend the "Let's Make a Map" tutorial.


There are two ways you can achieve this:

  1. You can use openlayers/leaflet with geoserver to directly server svg. It's easy but needs geoserver to do stuff for you.

  2. You can use openlayers/leaflet and geojson only. Represent geojson as both base layer(polygons,line etc) and overlayers(points,lines etc). Here is an example.

  3. You can create a path file for svg and then load it with Raphael/D3 to plot them. Steps: a.Create a path file b.Covert path to SVG using Raphael c.Draw Json d.Add interactivity example:http://raphaeljs.com/world/

If you application is all gis the go with geoserver and openlayers. If you want to make a single page then go with svg-path file.


I saw this discussion when I was working on similar thing. Many times you dont want all functionalists of the maps library. Only overlay of geojson in svg is required.

Here is the basic tool geojson2svg (cant say library) to convert geojson to svg, you will find it very handy if you do many things yourself.

d3 is also a standard solution for such requirement.

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.