RVM – Responsive Vector Maps

New version 5.1 released !

What’s new

  • Fix : when clicking on publish an error message appeared if switched from custom map to default one
  • New feature : Internationalization ready. Plugin can now be translated

Download RVM from WordPress repository now!

Live Example Of World Map

What does it do ?

RVM ( Responsive Vector Maps ) allows you to create customisable and clickable responsive vector maps for your WordPress sites. It’s extremely easy to configure. The plugin is completely free and comes by default with 15 maps: check them in action.

Still thinking better using Google Maps ?

Even if you do not want to consider the advantage to use a local javascript resource without disturbing Google servers , you cannot achieve following with any other plugin !

Potentially everything can be turned into an svg can become a linkable map for RVM

SX-70 camera is not provided together with the code :-)

Get the Polaroid SX-70 svg map for free and credit me all around the globe !

Thanks mr. Land.

If you are looking for other maps just have a look at download page !

What does it mean  “responsive” ?

Basically RVM map will always adapt automatically to any kind of device: mobile, tablet, desktop, wide screen tv etc…

If you are an history fan or just you want to know more about responsiveness, please check this article on List Apart.

Ok, but why vector ?

Vector maps have the advantage to not loose quality when reducing or increasing their sizes. Then maps created with this plugin are capable to  maintain their aspect ratio adapting perfectly to their container.

Using RVM you will not need to create static images for area map tags. Based on great work of Kirill Lebedev jvectormap, this plugin uses a combination of css, html and javascript to create as many svg maps as you like for your site.

You can use maps in sidebars as widgets or just in the post content using shortcodes.

Features

  • Responsive: maps will adapt width to any device
  • Cross-browser compatibility ( yes, works even on IE7 – use SVG/RVML )
  • High quality image: vector maps never loose quality
  • Many default maps available: France ( regions ), Germany, Italy, Netherlands, Norway, Poland, Portugal, Spain, Sweden, Switzerland, United Kingdom, Europe, USA, Belgium and whole World ( with clickable countries )!
  • Expandable: since RVM ver. 3.0 you have chance to install many more maps then defaults. Have a look to this repository. Not enough? Have you a svg or a design to integrate into your WordPress site as a RVM map? Shoot me an email !
  • Linkable region
  • Customisable look and feel
  • Preview functionality: WYSAWYG while creting/editing your map
  • Shortcodes: use generated shortcodes in your posts
  • Widget: maps can be used in widget area too
  • Zoom capabilities
  • Width: a specific width can be set while creating/editing your map or adding width parameter to the shortcode

Installation

  1. Download the zip file from WordPress repository
  2. Login to your WordPress dashboard
  3. Go to Plugins > Add New, under Install Plugins title click on Upload and use the browse button to search the .zip file you have downloaded at point 1
  4. Once activated you have a RVM tab on the left hand side
  5. Start creating your favourite maps

Download Maps

Have a look to the inventory of downloadable maps

Frequently Asked Questions

Can I customize map and canvas colours ?

Yes, these are possible layout customisations:

  1. Canvas colour
  2. Map colour
  3. Map border colour
  4. Add zoom-in/zoom-out buttons
  5. Map width ( can use em, %, px etc.. )

Can I customize map region links ?

Yes, it’s possible to customise links for each region/area displayed in the map. When creating a new map or editing an existing one, you will have chance to assign url to each area/region of the map. Default areas/regions have just a tooltip mouseover effect displaying area/region name. It’s possible to add html or plain text into regions/areas tooltip in complete security.

Which WP version is the plugin compatible with ?

The plugin will work at its best from WP ver 3.6 onwards.

I created a new map, but I would like to give specific width just for a specific post, is it possible ?

Yes, you can create a new map which will adapt to your box container automatically and will be responsive, but you can even use an additional width parameter to the shortcode within a specific post. Your map will have specific width just for that post.

Notice

ATTENTION: bare in mind that using same identical shortcode ( same post ID ) in more then one position on the same page will result into a layout issue: in other words if you create a new map you should not use it in more then one position ( post/sidebar ) per page. That’s because the javascript managing map creation fires same ID selector.

Have a look here to see how it works!

Create instead a new one and use it for your purposes.

 

58 thoughts on “RVM – Responsive Vector Maps”

    1. Grazie Angelo per il tuo suggerimento. E’ qualcosa a cui lavorero’ senz’ altro. Per ora la priorita’ sono la possibilita’ di aggiungere markers e ulteriori mappe.
      A presto

  1. According to your world map version, France is located in both South America also. If not for this mistake, I would love to use this plugin, but accuracy is a huge deal to me!

    1. Hi Sommer,

      thanks for your notification! It sounded weird to me too and is funny to know new things everyday.
      I was quite surprised seeing France in South America too… but, devil is in details, so I’ve checked and… that state between Brazil and Suriname is really a region of France …wow!

      Check here for more info: http://en.wikipedia.org/wiki/French_Guiana

      Maybe is not 100% correct not giving its specific name and maybe is a limit of jvectormap. I’m just using jvectormaps jquery plugin which is based on public work of Naturalearthdata ( http://www.naturalearthdata.com ).

      Anyway, there is room for improvements !

      Thansk again

  2. Thanks so much for your plugin! It does just what I was looking for, and almost works perfectly, but for some reason I can’t change the colour of Indonesia? All the other countries that I have tried work fine, but Indonesia stubbornly stays default colour. Can you see any reason for that?

    1. Hi Rebecca,

      thanks for spotting it.

      This is a bug and it comes basically because of specific code of Indonesia ( ID ) which conflicts with WordPress use of ID.

      I’ll fix it and I’ll release a new version today/tomorrow.

      Thanks again for appreciating my work.

  3. Hi there,

    I sent an e-mail… we have found a bug with the country of Niger on the map. I wonder if it is like the error Rebecca posted here? Can you look into this?

    Thank you for your amazing plugin!

  4. Hello,

    we try to use your Map Plugin on one WP Website but we don´t can see any map. The preview is white. We add 3 Maps. All the same problem.

    What can we do for get it working?

    Second questions. Has the plugin the possibility to add links zu special areas? That would be nice, because that client want link different areas to different websites.

    If not, maybe its a good feature for the next version.

    Cheers tuWWW

    1. Hi,
      if you could provide a link I would be more then happy to help !
      When you say preview you mean the blue preview button at the bottom ? Or the view page on top of the post ?
      The second one will give you a blank page because RVM needs shortcodes or to be inserted into a widget area in order to work.

      If the blue preview button does not work can be a javascript issue: can you check console and sens me some info regarding browser, SO used ?

      Then when you ask “Second questions. Has the plugin the possibility to add links zu special areas?” what do you mean exactly ?

      Region are clickable and you have the chance to create markers using lat and long.

      Thanks for contacting me and for using RVM

  5. The Map don’t show up in Chrome or Safari and in a widget. When resizing the Window, the map shows up. After refresh the map is gone. Only works when resizing the Window. Can you confirm this? Newst RVM Version and newst Safari & Chrome – on Windows.

    Mobile Safari, FireFox and IE works fine.

    1. Hi Masi,

      Can you provide me with a link to check please ?
      Are you getting any errors in console ?

      Thanks

  6. Great plugin! We use jVectorMap on sites other than WordPress. We have several custom maps that read json files. Is it possible to read json files with this plugin?

    1. Hi Mike, thanks for contacting me.
      No, this plugin is not designed to read jSon file, I’m sorry.
      If you need some custom map I can work on it if you like.

      Cheers

  7. When I choose the US map and add markers to it, they don’t show up in the published version. Changing regions to a different color works fine though. I’ve double checked my latitude and longitude and made multiple markers, but none of them show up. I am using 34.354401, 89.496902 with all other options the default settings.

  8. Ciao, come faccio ad editar il css di tutto il div…Ho visto che la classe e’ map-container rvm-map-container ma non lo trovo nel css del plugin.

    1. Ciao Vlad,

      non credo di aver capito bene la tua domanda, comunque puoi usare quelle classi e l’id selector di ogni singola mappa generata nel tuo style.css invece che nel css del plugin.

      Eviti così di sovrascriverlo negli aggiornamenti futuri.
      Fammi sapere se ti sono stato utile,
      nel frattempo auguri e buone feste!

  9. ciao, avrei due domande
    1) si puo creare una mappa con due nazioni e basta ? esempio francia e spagna nella sessa mappa ? se si come vengono gestite poi per quanto rigurda le regioni ?

    2) ho notato che le varie regioni esempoio dell’italia non hanno un identificativo ID , non è possibile creare quindi funzioni con css o javascript per una singola regione come un click e possibile che ogni regione abbia un ID, se si come ?

    1. Ciao,
      1) Se ti occorre una mappa personalizzata ti contatto via email
      2) Interagire con i path svg non e’ semplice. Comunque e’ possibile che includa un id per ogni area nelle prox versioni.

      Grazie per avermi contattato

  10. Ciao,

    bellissimo plugin complimenti!
    Devo solo far presente che c’è un bug su Google Chrome e Safari.
    La mappa non viene visualizzata correttamente ma molto piccola in un angolo.
    E’ possibile risolvere il bug?
    Grazie
    S.

    1. Grazie Sara,

      hai installato l’ultima versione del plugin? Su tutte le mappe hai questo problema?
      Io non riesco a riprodurlo. Avviene poi con un tema in particolare ?
      Se hai un link da mostrarmi magari riesco a capire il possibile bug.

      Fammi sapere e grazie ancora!

    1. Ok Sara,

      sai dirmi se il tema “onetone pro” usa ajax per caricare il contenuto delle pagine ? Mi sembra un problema di questo genere anche se pensavo di averlo risolto con l’ultimo aggiornamento.
      Puoi provare a cambiare un valore e farmi sapere se funziona ? Altrimenti, se puoi e seil mio suggerimento non funziona, mandami cortesemente lo .zip del tema, così posso controllare in locale.

      Allora cerca questo valore:

      5000 ( significa un ritardo nel caricamento della mappa di 5 sec ) in rvm_shortcode.php

      e dagli un valore elevato, per esempio 20000. Se funziona diminuisci progressivamente e ti attesti all’ultimo valore in cui funziona.

      Fammi sapere

  11. Grazie nuovamente della risposta,

    si usa Ajax, ho modificato il valore. Ora il problema si presenta meno volte ma si presenta comunque. Ho notato che il bug si risolve non appena ridimensiono la finestra del browser.
    C’è una mail a cui posso scrivere per condividere lo screenshot e lo zip eventualmente?

    Grazie mille!!
    Sara

  12. I am looking for a way to only display a region of a country instead of the country itself. Is this possible?
    Thanks for the great plugin!

    1. Hi Tobias,

      you should remove the unwanted paths from the javascript holding all the map’s paths.
      Let me know.

      All the best,
      Enrico

      1. Hi Enrico,

        Thank you very much, it worked!

        Is there a way to make this one region appear bigger? Right now it is the same size like before with all the other regions.

        Would be great if I could make it appear bigger but I did not find the source to change this.

        Thanks and all the best for you too,
        Tobias

  13. A superb plugin, does exactly what my client wanted. ie. to show links to various state approvals.

    Thank you.

    1. Hi Kyriakos,

      thanks for using RVM. Please visit this page and search for Translate subdivisions’ names on subdivisions settings tab. Let me know if it solves.

      Have a nice day

  14. Terrific plugin. Thanks so much. I had a need to highlight a number of countries from the UK in the North, UAE in East, South Africa in South and Mexico to West (see http://cayley.co.uk). I wondered if it was technically possible to be able to select a rectangle so that only the area within the rectangle is displayed. I think google have a tool for creating a rectangle (see example at: http://www.birdtheme.org/useful/v3largemap.html) and appreciate this is different to vector maps but it would be terrific if the same idea could be used to select an area to display. Thanks again for your awesome work.

    1. Hi Nick, unfortunately there is not this option available on RVM.
      And thanks for your inputs and your ideas .

      Have a nice day,
      Enrico

  15. Sorry – another thought that maybe would achieve a similar result within the existing code:
    1) Option to set the starting zoom level by % (so a bit more precise than the Plus/Minus buttons
    2) Option to set the Long/Lat of the top left corner

    Cheers, Nick

  16. Hi Enrico

    I’ve implemented your tips and tricks ‘How get rid of subdivisions’ name on mouse hover’ but it doesn’t appear to make any difference in V5. Here is a copy of the code within responsive-vector-maps/includes/rvm_shortcode.php:

    // Region label popup
    if ( isset( $output_is_regions_popup ) && $output_is_regions_popup ) {
    $output .= ‘, onRegionTipShow : function(event, label, code){‘;
    $output .= ‘if(!region_popup.hasOwnProperty(code)) {‘;
    // no text found, return standard state name
    $output .= ‘return true ;’;
    $output .= ‘}’;
    // else construct label for state with extra text
    $output .= ‘label.html(label.html() + “” + region_popup[code]); ‘;
    $output .= ‘ }’;
    } //isset($output_is_regions_popup) && $output_is_regions_popup
    else {
    $output .= ‘, onRegionTipShow : function(event, label, code){‘;
    $output .= ‘event.preventDefault();’;
    $output .= ‘ }’;
    }

    Could you let me know what I’ve done wrong please? What I want is to NOT show country names in any popups but I do want to show label popups IF text is entered into the Subdivisions tab of Settings

    Thanks

    Nick

    1. Hi Nick, sorry for long waiting!
      I just understood correctly what you were looking for and my advice on Tips&Tricks does not cover your request cause it will COMPLETELY get rid of default names of subdivisions.

      If you want to display subdivisions’ names ONLY when you fill the label popup field in “subdivisions” tab, what you can do is :
      – go to the javascript file managing the map generation (for example, in the default Belgium map you can find the data into js–>regions-data–>jquery-jvectormap-be_merc_en.js)
      – get rid of all names of any single path : search for example Namur, you should find “name”: “Namur” change into “name”: “”
      – once you’ve finished for all the other names, you’ll see names shown only when popup label field is filled out.

      Downside is you’ll have a little circle displaying on mouse over on empty subdivisions’ popup. Maybe playing with css…
      All the best!

  17. >>> New feature : Internationalization ready.
    >>> Plugin can now be translated
    Hi Enrico,
    how to do so? Will it work with cyrillic symbols?

      1. Hi Enrico,
        I’ve made a translation to Russian. There’s only one line I doubt, “Parent maps colon” . What is “colon” here?
        Also, it would be just great if I could translate all the subdivisions to Russian. I tried to do so as described on this site, but it seems that your plugin doesn’t support cyrillic symbols (я, ф, ы etc) and I get question marks instead of letters. Maybe I had been doing something wrong? Is there any chance to make it work?

        1. First of all thanks Anton!
          Parent maps colon is a typo basically.
          This should be : “Parent maps :” … it’s the copy for “parent_item_colon” item for Custom maps that I guess is used anywhere :-)
          So you could translate thinking as it would be : “Parent maps :”

          https://codex.wordpress.org/Function_Reference/register_taxonomy
          ‘parent_item_colon’ – The same as parent_item, but with colon : in the end null, __( ‘Parent Category:’ )

          Regarding the translations of the subdivisions: I guess you’re modifying the javascript file. So please trying encoding those symbols and let me know.
          Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

Stop using area tag!