In this section we will show you how easily is to customize a map using RVM settings
Have a look at what you can easily achieve with RVM!
Below an example of our map of Rome divided into quarters, suburbs and boroughs
We customized our Rome map with different backgrounds for macro-areas (North, East, South and West). The city center is the most ancient and is in brown, plus a red are indicating Vatican City, the independent State within Italy Country. Each subdivision can get a specific colour and all have an hover colour change. Furthermore each subdivision has a specific link to its page on Wikipedia. We can also see the zoom button in the top left side which give chance to zoomin in and out the map.
Interested in the interactive svg map of Rome? Please have a look at this page.
So, let’s start the tour with RVM settings.
When you create a new map ( default or custom ) you have just main settings tab section.
After selected and published the map , you’ll be able to see three settings’ tab sections.
“Main settings” section and main features
In this section you can basically change map layout:
“Subdivisions” section
In this area you can set links and background colour for each section.
It’s possible to add a label copy ( including html tags ) and a checkbox to activate the mouse over background colour.
Since version 5.6.4, you have two new actions for each subdivisions:
Using the new “show label onto default card” feature
Thanks to the “show label onto default card” feature, you’ll be able to display html content into an opaque layer over the map.
If content overflow the map width, a scrollbar will be displayed onto map card.
Please, see this short clip to see how simple and effective it is.
Using the new “Show custom selector” feature
This feature will allow you to toggle any element on your page. Just use a unique selector ( id ) and add “rvm-hide-card-container” to your html element, and RVM will be able to show/hide your custom element wherever in the page.
It works on Internet Explorer < ver 9 too !
I.e.: imagine you have a div element on your page, and you would like to toggle it clicking on specific subdivisions as follows:
<div id="my-custom-div">My custom tag to show/hide</div>
just add class=”rvm-hide-card-container” and turn it into
<div id="my-custom-div" class="rvm-hide-card-container">My custom tag to show/hide</div>
Now choose the “show custom selector” option for your desired subdivision and fill the field “Show following tag (use ID selector without ‘#’)” with your element selector attribute. With a bit of html and css knowledge you could even use it to create a lightbox effect…or waiting for me to add to next version 🙂
Please, see this short clip to see how it works.
“Markers” section
Add as many markers as you like!
Markers are pinpoints over the map that can be created using latitude and longitude coordinates.
You can also add a link and a description ( html tags included ).
Default pinpoints background and borders colours can be changed too.
Dimensions will affect radius of the marker in combination with min and max value and only in presence of > 1 marker.
Without dimension field set, all pinpoints will have same dimension.
Consider instead following example.
We have 3 markers of 3 cities in China.
Setting the first dimension filed to 300 for Beijing, 150 for Xisancun and 100 Shanghai, you can see Xisancun marker will be half of Beijing’s one, while Shanghai will be 1/3.
Now, if we play with “Minimum” and “Maximum” field, giving respectively 4 and 5 , so very close ( but cannot be the same ), we can see that markers’ dimensions will be quite similar.
If you would like to change the default circle marker icon and use a custom image, please have a look at our Marker icon Module!
Have a look at what you can achieve with RVM!