How To: Create Responsive, Interactive Maps, Floor Plans & Other Graphics in WordPress
MapSVG is a WordPress plugin which allows you to create interactive and customizable maps, floorplans, infographics, diagrams and any other type of interactive graphic using SVG files. You can choose from the large number of included country maps and world maps or you can upload any SVG file to create a graphic to use. You can then customize the graphic with regions, colors, markers, tooltips, popovers and more.
In this review we will be looking at how to use the plugin, creating a map and customizing it and also creating an interactive graphic from a custom uploaded SVG.
The plugin is available from Codecanyon for $35, check out the full details or view a demo:
- Running a map from SVG file means that you have no limitations and you can always edit SVG file in Adobe Illustrator or InkScape. Remove regions or add new, change everything as you need
- MapSVG includes more than 100 geo-calibrated maps which work similar to Google Maps – you can add markers with latitude/longitude coordinates or just enter an address and MapSVG will get coordinates for you. At the same time you get much more flexibility because you can edit SVG files;
- You can use MapSVG to create floor plans;
- You can use MapSVG to create any interactive vector image (for example, interactive anatomic map of human body);
- MapSVG has awesome control panel with Live Preview which turns map building process into a pleasure;
Using the Plugin
After you have uploaded and activated the plugin, you will see a new menu item named “MapSVG”, if you visit this you can begin creating your first map. Use the dropdown menu and you will see a list of all the maps included by the plugin, there are maps for each country and World Maps to choose from.
Once you have selected your chosen map, the plugin will change to a new page with your map shown on the left hand side and on the right are the settings for your map. You can use these settings to give your map a name and set the width and height of it. Further down are more options for locking the aspect ratio, setting a start position, turning responsive on or off, allowing scroll and zoom and setting popovers and mouse cursors.
You can use the “Colors” tab to customize the map colors, you can change the background and base color, strokes, hover colors and brightness.
The “Regions” tab allows you to setup individual options for each defined region on the map, each region has it’s own section where you can define a custom color for it, add a tooltip text, popover text and you can add a link.
The “Markers” section allows you to add custom marker pins to the map, you can enter a postcode and the plugin will display the address for you to click or you can enter lattitude / longitude coordinates directly. You then have a choice of pin image to use and you can again enter a tool tip text or popover text and HTML which will display in a box when the marker is clicked.
Once you are happy with your map, grab the shortcode displayed at the top of it :
Then paste this into a page or post and publish and you can view your map on your live site.
Using a Custom SVG File
You do not have to just use this plugin for creating interactive maps, one of its most important features is the ability to upload your own SVG file so you can use it to add a custom file. Most vector programs can export in .SVG format – Adobe Illustrator, InkScape, Corel Draw, etc. So you can create a custom graphic such as a floorplan or other illustration to use with the plugin and use the same region / markers and tooltips.
To test this, I grabbed a free vector illustration and opened it in illustrator, I deleted the text from it and saved as a SVG and uploaded it within the plugin. The plugin automatically grabbed all the regions from the vector file which you can then add tooltips etc as you would a map.
This can then be embedded in a page like before :
Pricing & Support
Map SVG is available from Codecanyon for $35 which includes 6 months of support and updates, you can upgrade this to 12 months for a total of $45.50.
Support for the plugin is provided via Codecanyon where you can message the plugin author directly.
This is a really good plugin – very easy to use and features all the tools you need to create interactive maps, these could be useful for business sites to display their locations / offices etc.
Where I think the plugin really shines though is the custom SVG upload tool, simply uploading a vector file allows you to create some more interesting graphics for your site – for example, you could create interactive infographics which would show information or stats when hovered over.
Because the files are all SVG, they are fast loading in the browser and scale to any size so will look good on retina screens, larger desktop displays and mobile devices.
Check it out, if you are looking for a plugin to manage vector graphics on your website.