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:

• Activate/deactivate zoom buttons
• Map width: in case you need a specific width ( px, em, rem and % can be used)
• Map paddig: padding between map itself and the canvas boundaries
• Activate/deactivate transparent canvas ( useful when map overlaps any background image )
• Canvas colour
• Map colour
• Borders colour
• Borders width expressed in pixels ( even decimals allowed )
• Activate/deactivate Subdivision Selected Status for all subdivision
• Subdivisions Selected Colour to choose colour for selected status
• Subdivisions Hover Colour to choose colour when mouse over ( can be enabled for each subdivisions in “Subdivisions’ tab” )
• Subdivisions Hover Colour Opacity
• Links target, activate/deactivate option to open link ina  new window

“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:

• Show label onto default card ( inside map )
• Show custom selector ( toggling any elements in the page outside the map )

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!