Create a javascript map for any city

... using svg, jvectormap and inkscape

This stackoverflow post was my original question. This page outlines the effort I went through in creating a usable javascript map of a city. The city I am interested is Delhi, India and I am specifically interested in its constituent assemblies. After a bit of research I found that in order to have usable image which can be manipulated via javascript the format to be targetted should be SVG. The final output is here.

1. Get the Official Map

The official constituent assembly map is in pdf format and is available from http://ceodelhi.gov.in/. The direct link is this. The below is the png version of the same.

2. Convert PDF to SVG

For conversion from PDF to SVG, I used Inkscape. On the command prompt :
inkscape.exe -l delhi.svg delhi.pdf

3. Process SVG

A couple steps involved here.

    In Inkscape
  1. Get the map outline. Open the SVG in inkscape and select the 'Edit paths by node' button. Click on any one of the district lines. This will select the nodes in the picture.
  2. Copy and Paste (ctrl+c/ctrl+v) to Save into a new file.
  3. In the new file again select the 'Edit paths by by node' button and then Path->Break Apart
  4. Now save this as SVG. (it will have created paths out of the text nodes).
    5. A video which outlines the process :
    In SVG-edit
  1. Browse to the latest demo.
  2. Open the SVG file from the last step.
  3. Select the SVG button to edit source.
  4. Copy the source and save this as the final SVG file.
    5. A video which outlines the process :

4. Create JVector Map

We will use the excellent jvectormap library to create our map. The handy tool svgto.jvectormap will convert the svg from our last step to a jvectormap that we can finally use.

  1. Browse to the svgto.jvectormap tool.
  2. Copy the text of the SVG from the previous file and click convert to map. The default name of the map will be 'map'. You can change it.
  3. This will generate the vector map. You can now edit the ids and name of the paths as per your liking.
  4. Finally Save. This will give the output as a jvectormap. Save this file as js.
  5. Note to finally use it, you may have to change the json field "paths" to "pathes".
    6. A video which outlines the process :

5. Use the JVector Map

Now that the map is ready you can finally use it in any html page. Include the js file from the last step in a html page.

  • If you had supplied a name for the map in the last step use that for 'nameOfMap' below. You may need to change the json field "paths" to "pathes".
    jQuery.fn.vectorMap('addMap', 'nameOfMap',{...,"pathes":{ ...
  • Then load the map
    jQuery(document).ready(function() { jQuery('#vmap').vectorMap( { map: 'nameOfMap', ... }

    • You can refer as example to the html code from here

    6. References

    Note that the jvector map for delhi has ids which correspond to the official numbering for assembly constituents.

  • The pattern for the ids is a number followed by an encoding based on its region in Delhi.
  • The numbers are from the National Informatics Center website.
  • The regions are as described at Official Website, Chief Electoral Officer, Delhi.

    • The encodings are as follows :
    EncodingRegion
    cCentral Delhi
    eEast Delhi
    ndNew Delhi
    nNort Delhi
    neNorth East Delhi
    nwNort West Delhi
    sSouth Delhi
    swSouth West Delhi