Geo-calibrating an SVG map for use in mapsvg.com wordpress plugin

 Scalable Vector Graphic (SVG) file isn't the best for creating geospatial referenced maps. However, it is possible to maintain map data that have geo-like coordinates that are close to the geolocation they represent. SVGs are not commonly used for geo-enable maps on the web, instead they are commonly used for drawing maps just for visual purpose on web pages.

If you really want to work with geo-enabled map on a website page where spatial reference system is of paramount importance, then you should use file format such as GeoJSON. Or store your map in a spatial database.

There are many reasons why you would want to make your SVG file have spatial capability. A common reason is when you want to overlay your SVG drawing on a geographical base map as used in MapSVG wordpress plugin. The mapsvg plugin allows you to add custom maps in svg format to wordpress web pages. If you want the map overlay the svg map on Google maps background, then you must geo-calibrate the map as we will see in a moment.

The plugin isn't free, at the time of writing it is about $49. However, there is a demo admin panel (with the following login details: demo / demo123) where you can try it out for free. We will use this to upload a custom map that is geo-enable.

Geo-Calibrating regional SVG map

Lets take the regional map of Nigeria as an example. If you use QGIS plugin (simpleSVG) to convert the shapefile to SVG or use the MapShaper online tool for the conversion, you will have an svg map the isn't geo-enabled.

To verify if our converted SVG map is geo-enable, lets upload it to MapSVG via the demo admin panel.

Upload the SVG map and create a new map with.

Then try to enable the Google maps background map and you will see the error message "You can't use Google Maps with a not calibrated SVG file.".

To enable the geography, we need the define a custom from 'viewBox' to 'geoViewBox'. If you open the svg file in a text editor the viewBox has coordinates definitely not in the geographical coordinates of the country as seen below.

The easiest way to calibrate this map to have geo coordinates is to download geo-calibrated map of that region from MapSVG admin panel and open it inkscape software then import the exported svg map and adjust its shape to fit the new calibrated map.

This should now give you a geo-calibrated svg map that you can add Google maps backgroud to as seen below.

Also if you check, the svg in a text editor you should see the 'geoViewBox' attribute added.

Numbers in the "mapsvg:geoViewBox" attribute are lat/lng coordinates of map borders in the following order: left-lng top-lat right-lng bottom-lat

mapsvg:geoViewBox="-6.298968956897211 15.736863854554855 23.715679480602788 3.4559729003290687"

1. left-lng: -6.298968956897211
2. top-lat: 15.736863854554855
3. right-lng: 23.715679480602788
4. bottom-lat: 3.4559729003290687

Note that MapSVG already has the country maps that you can use directly without following the above process. The process above is when you want to add a custom map that isn't available on MapSVG database.

Thank you for following.