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.

Main settings tab

RVM comes with just Main settings tab before creating the map

After selected and published the map , you’ll be able to see three settings’ tab sections.

RVM tabs sections

RVM shows three tabs sections after maps has been selected and published

“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
  • Get rid of Subdivisions names
  • Links target, activate/deactivate option to open link ina  new window
RVM dashboard main settings

Main settings for RVM dashboard

“Subdivisions” section

In this area you can set links and background colour for each section.

RVM dashboard subdivisions settings

RVM sections for subdivisions’ customisation

It’s possible to add a label copy ( including html tags ) and a checkbox to activate the mouse over background colour.

RVM dashboard subdivisions settings

RVM dashboard for subdivisions’ settings

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.

RVM dashboard markers settings

RVM section for markers settings

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.

RVM marker dimensions setting

RVM marker dimensions setting

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.

RVM markers setting

RVM markers setting

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!