Home Life Trends MapSVG Plugin Review: Create Interactive Maps in WordPress

MapSVG Plugin Review: Create Interactive Maps in WordPress

MapSVG is a nifty WordPress plugin that helps you to create interactive and responsive maps in your WordPress web site. Thanks to a set of good options, you'll be able to convert any SVG file into an interactive map. That’s not all, you'll be able to create detailed flooring plans, infographics, Google maps, Chloropleth maps, picture maps and a lot extra.

In this evaluate, we take a look at the options that make MapSVG one of many best mapping plugins for WordPress on the net. We additionally check drive the plugin, so stick round and skim all the way in which to the top. This is unquestionably deal, so get your self a mug of espresso and let’s roll.

MapSVG Interactive Maps for WordPress

Brought to you by developer extraordinaire Roman Stepanov, MapSVG makes creating interactive maps straightforward and enjoyable. I had a good time taking part in round with the assorted choices regardless that I had to learn the documentation first. That being mentioned, let’s take a look at the options out there in MapSVG.

100+ Ready Maps

To allow you to hit the bottom operating, MapSVG comes with over 100 geo-calibrated maps. There is a world map, and it’s already subdivided into clickable areas (nations). Then you have got nation maps with the respective states/provinces. You additionally get a number of particular maps.

And since many of the maps are calibrated, you'll be able to add markers to the maps utilizing an deal with or coordinates. On prime of that, you'll be able to create your individual SVG maps and add them to MapSVG.

All you have got to do is create an SVG picture utilizing any vector modifying software program similar to Inkscape or Adobe Illustrator, add the rattling factor and customise away.

Do you realize what this implies? It means you'll be able to design interactive diagrams and visualize statistics (and usually enhance consumer expertise) with out bending over backwards.

Database Objects

MapSVG permits you to create objects and add them to particular areas of your map. This permits you to enrich your maps with info providing your net guests an immersive expertise.

For functions of illustration, allow us to assume for a minute you're a actual property agent with properties to promote everywhere in the nation. You’re doing rather well and would love to present out there properties on a map. You’d like to show info similar to measurement, deal with, value, pictures and stuff like that.

MapSVG permits you to add these particulars to a database, after which connect the data to one or a number of areas of your map. Whenever a consumer clicks on the world you outline, say a state, the main points are displayed in a pleasant popover, element view or tooltip.

Filterable and Searchable Directory

As if including database objects isn’t sufficient, MapSVG permits you to create a listing and show it subsequent to your map. Going with our actual property analogy, you might have considered trying to present all properties (or brokers) out there in a sure state. MapSVG makes this very a lot attainable.

Users can filter objects in the listing utilizing drop-down filters or a search field. Further, customers can filter objects by clicking a selected space on the map. This listing function makes even essentially the most advanced diagrams and maps straightforward to comprehend. Additionally, customers can discover info simply which is a plus to your UX.

Enhance Google Maps

Did I point out you'll be able to combine MapSVG with Google Maps? Yes, you'll be able to and also you simply want a Google API key. Typically, you can not customise Google Maps extensively, which is or may be limiting in some eventualities. MapSVG permits you to overcome this challenge.

How? You can layer vector maps on prime of any sort of Google Map (terrain, satellite tv for pc, street or hybrid). And since vector photos are interactive, you'll be able to then modify your Google Map till you drop. The apparent finish consequence right here is you’re in a position to present extra usability.

Remember Google maps include a set of controls. Couple these controls with MapSVG options and also you’ll literary drive your customers loopy with pleasure. They will likely be like, “How the heck did they do that?” This function permits you to improve your Google map by highlighting landmarks and making something clickable.

CSS, JavaScript, and Templates Editors

What is using a map you'll be able to’t customise or lengthen? Roman appears to have this grounded what with nifty CSS and JavaScript editors. As lengthy as you realize your approach round code, you'll be able to push your interactive illustrations to the restrict.

For starters, you'll be able to model your maps and diagrams with CSS as you want, and with out breaking a sweat. You can model many components from tooltips, popovers, and different data containers. On prime of that, you'll be able to leverage the ability of JavaScript to lengthen default map performance.

Additionally, you get a templates editor that helps you to create customized templates for popovers, markers and tooltips. The template editor is straightforward to use we don’t count on you to run into any Challenges.

Intuitive Control Panel With Live Preview

Working with MapSVG is just about simple thanks to an intuitive admin dashboard that makes creating maps a breeze. Creating maps and different interactive illustrations with MapSVG is coupled with ease from begin to end.

On prime of that, the plugin comes with a reside preview function that permits you to see your adjustments in actual time. Now you don’t have to surprise how your maps will look upon completion. Further, you don’t have to go to and fro (or refresh a web page) to see how your maps look. How candy?

Image Maps

We talked about picture maps a couple of minutes in the past, however I had to cowl this function by itself as a result of I feel it’s spectacular. We already know that MapSVG converts SVG recordsdata to interactive maps robotically. Just draw an SVG file, add it and customise.

But do you know you may also create maps from PNG and JPEG photos? Sounds fascinating now, proper? MapSVG comes with sensible drawing instruments that enable you to create interactive (clickable) maps from raster photos. How is this handy? You can draw interactive home plans, blueprints, routes, metropolis plans, seating charts and a lot extra.

Thanks to these options and superb assist, nothing ought to maintain you again from creating maps and interactive illustrations out of this galaxy. The sky is the restrict right here guys since MapSVG is a no-nonsense (and doubtless one of the best) map plugin for WordPress.

How To Setup MapSVG and Create A Map

Setting up MapSVG is as straightforward as putting in every other typical WordPress plugin. You’re prepared to begin creating interactive maps as quickly as you put in and activate the plugin. You don’t want to configure something since MapSVG works proper out of the field.

Get MapSVG

Let’s get some hands-on expertise. Grab a replica of MapSVG, and comply with the next directions. Login to your WordPress admin dashboard and navigate to Plugins > Add New.

mapsvg wordpress plugin review

mapsvg wordpress plugin review

Next, hit the Upload button (1)Choose File (2), and hit the Install Now (3) button as proven beneath.

mapsvg reviews

mapsvg reviews

Wait out the set up course of to full after which click on the Activate Plugin button.

mapsvg review

mapsvg review

And that’s it; the plugin is prepared to use after activating. Click on the MapSVG merchandise on the WordPress admin to launch the management panel.



So far so good, I feel you'll agree the method is easy. On the management panel, you'll be able to select one of many pre-made maps, create a Google map (wants integration first, which is as straightforward as copy-pasting an API key), construct a picture map, add an SVG file or Download an SVG file with Google map.

If you need assistance making a map, you may get fast assist by clicking Tutorials or Support hyperlinks on the prime of the management panel. Let’s select one of many pre-existing maps. I'll go together with China as a result of all the things is made there these days anyway 🙂

N/B: The developer recommends utilizing geo-calibrated maps as an alternative of not-calibrated maps as a result of…

…geo-calibrated maps are newer, have Region titles and you'll add Markers by geo-coordinates (latitude/longitude) or simply by getting into an deal with which is being transformed into coordinates robotically. – MapSVG Tutorials

Choose China (or every other map you want) from the New SVG map drop-down menu. If you hate the scroll bar, be at liberty to use the search field.

creating new map in mapsvg

creating new map in mapsvg

On the subsequent display, fill out the Title and alter the Preloader Text in the event you’re so inclined. On the identical display, you'll be able to set your map measurement, toggle off responsive design (it’s on by default, so don’t contact the dial), activate tooltips and popovers amongst others issues.

You will even notice the map is already break up into areas (China provinces in our case) and they're already clickable! Also, familiarize your self with the opposite controls together with the Menu drop-down menu.

Let us change some colours, and get a really feel of the plugin. Navigate to Menu > Colors as proven beneath.

editing map colors in mapsvg wordpress plugin

editing map colors in mapsvg wordpress plugin

The Colors display helps you to select the colours of your desires. What I imply is there isn't any restrict to the colours you’d like to use. Just work the colour picker till you have got one thing you want. I'll go together with shades of blue as a result of WordPress is bae 🙂

Choose your colours and don’t neglect to hit the Save Ctrl+S button as we illustrate beneath.

See? I advised you MapSVG is straightforward to use. With a few clicks, I modified my map colours and it feels good – similar to that one time, a few years in the past, once I ranked first in Google. Editing every other a part of the map is equally straightforward, and to show my level, I'll add tooltips as a result of that will be enjoyable.

Adding Tooltips in MapSVG

So, how do you add tooltips that seem if you mouse over a area in your map? It’s straightforward, and I’ll present you ways in a second.

By the way in which, if something isn’t clear for one motive or one other, don’t hesitate to try the official MapSVG tutorials and documentation. Better nonetheless, hit up the remark part on the finish of this submit and I'll summon Thor only for you. That hammer solves all the things 🙂

That apart, including tooltips entails including a template (bear in mind the templates editor we talked about earlier?). For that, navigate to Menu > Templates after which select Region Tooltip. 

adding tooltips in mapsvg wordpress plugin

adding tooltips in mapsvg wordpress plugin

Next, add the next code in the templates editor and hit the Save Ctrl+S button as proven above.

Province: <robust>{{title}}</robust>

The above code is easy HTML with Handlebars tags. If you’d like to present simply the title of your area, you utilize the {{title}} tag. You can outline your individual customized fields too as you'll study in a second. But first, allow us to activate the tooltips function.

Navigate to Menu > Settings and activate the Tooltips function as we illustrate beneath.

mapsvg reviews

mapsvg reviews

As you'll be able to see in the screenshot above, our tooltips are energetic. Still, I discussed I'll present you ways to add customized fields as a way to enrich your tooltips in methods unimaginable. Let’s say you prefer to to add pictures and extra info to your tooltips. How would you go about it? For that, we name upon the database objects we talked about earlier.

Adding Custom Fields through Database Objects

MapSVG permits you to add customized fields to your maps. We have already got the {{title}} subject, however let’s see how we will add extra customized fields. You have a selection of customized fields together with text, textarea, checkbox, photos, and so forth. Let us add some photos to the Nei Mongol province.

Go to Menu > Regions and click on the Edit fields button as we spotlight in the picture beneath.

adding custom fields in MapSVG

adding custom fields in MapSVG

On the subsequent display, hit the Image button after which the Save fields button as proven beneath.

Save your adjustments by clicking the Save Ctrl+S button. Always bear in mind to save your adjustments.

Next hit the List button as proven in the picture beneath.

Switch your map to Edit Regions and click on on a area (we picked Nei Mongol). You ought to see your new customized subject (Images) to the precise. Hit the Browse button. See picture beneath.

On the subsequent display, add your photos and hit the Choose Images button.

You will likely be redirected again to the Edit Regions display the place it's essential to click on the OK (1) button. Next, click on the Save Ctrl+S (2) button after which return to Preview (3) mode as proven beneath.

If you strive to mouse over Nei Mongol at this level, the pictures received’t seem in the tooltip. Why? Well, we haven’t created a template for the pictures. Let’s try this proper this minute.

Navigate to Menu > Templates > Region Tooltip and alter the code to this:

Province: <robust>{{title}}</robust><br />

First picture:<br />
<img src="https://www.wpexplorer.com/{{images.0.thumbnail}}" width="40px" /><br /><br />

All photos:<br />
{{#every photos}}
    <img src="{{thumbnail}}" width="40px" />

Here is a picture for additional illustration. Remember to hit the Save button.

Now, strive mousing over your chosen area (Nei Mongol in our case). Tell me what you see. This is what's on my display.

Pretty neat, proper? You simply realized how to add customized fields to your MapSVG maps. Adding popovers and markers can be as straightforward as pie. Additionally, so long as you realize these fundamentals, you're good to create any interactive map/diagram underneath the solar.

Working with MapSVG is the stuff of fourth graders, particularly since Roman Stepanov provides nice assist and superb steerage through tutorials. To show your map in your WordPress web site, save your adjustments and navigate to Pages > Add New.

Next, hit the MapSVG button as proven above and select your map. This provides the shortcode [mapsvg id=”17″ title=”China”] to your WordPress web page. By any means, be at liberty to add the map wherever in your web site utilizing the shortcode. Don’t fear, maps you create with MapSVG are 100% responsive which means they are going to look nice across a number of units.

Next, hit publish and see the outcomes on the frontend.


We can be right here all day if we went by way of every function there may be, however I encourage you to get your individual copy of the MapSVG WordPress map plugin and provides it a check drive. Between you and me, it's the solely WordPress map plugin you'll ever want.

Do you have got a query or suggestion? Please don’t hesitate to attain out through the remark part beneath. Cheers!