How to generate a new, custom map for the JVectorMap jquery plugin?
Useful Links
- JVectorMap: http://jvectormap.com/
- Shopping Complex Example: http://jvectormap.com/examples/mall/
- Note; Please view the above link for the converter link as due to having less than 10 reputation being a new member, I cannot add more than two links.
About the Shopping Complex
In the 'Useful Links' section of this question, I have added a link to a shopping complex example which can be found on the JVectorMap website. On this page, it explains the following; Example of custom map created from SVG using converter available here(see note). Please note that if you use map generated from SVG you need to position markers by pixel coordinates, not by latitude and longitude as in case of map generated from GIS.
What I need help with
I need to make similar maps for my local shopping complexes, whom the complex manager(s) ave provided a digital map. I need to know how to take this every-day image format of a building complex and turn it into a shape file and then how to use the file with the converter to create my own custom map.
Answer
I hope you are familiar with gimp or photoshop. I'm a gimp guy so the way I do it is I would take the digital map that you get from your employer and build paths around the selected regions you want included. Go to your paths option, right click and export path as SVG. Once you have the svg file go to http://svgto.jvectormap.com/ and copy/paste the SVG code inside your file into the converter. This will help you build a map.
Note you can also import the svg code directly into your html file without jvectormap.