Interactive map JQVMap. How to highlight multiple regions?

S

shmdarya2018-03-03 18:20:31

JavaScript

shmdarya, 2018-03-03 18:20:31

Hello!
Please help to implement the functionality of highlighting several regions when hovering over a link located on the page.
Also, so that when hovering over a region, the desired region from the list is highlighted. Now it only works if you hover over a link in the list.
Please help, I'm already off my feet

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Stalker_RED, 2018-03-04
@Stalker_RED

I didn't look at JQVMap, but nothing complicated at all:
https://jsfiddle.net/Stalk/jarsv6o4/
Your library most likely provides methods for highlighting.

E

Evgeny Nikolaev, 2019-12-04
@nikolaevevge

My method does not pretend to be officially declared in the library that this is how it should be done, nevertheless, I did this:
setTimeout(function (){
$("#jqvmap1_iv").attr("fill","red");
}, 1000);
We create a delay of 1 second before painting the Ivanovo region on the map of Russia (not legitimate). Next, we select the element by Id = #jqvmap1_iv and set the fill attribute to red (red fill color). If without a delay, then it is not allocated due to the asynchronous operation of JavaScript, that is, by the time the allocation attempt is made, the map has not yet been generated by the browser. I think that the library has a standard method for selecting areas. I would also like to know exactly how it is proposed to do this in the official library.
So did on the map only in Russia.
That is, according to the code in the demo that is attached to the library, it looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>JQVMap - Russia Map</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
    <script type="text/javascript" src="../dist/maps/jquery.vmap.russia.js" charset="utf-8"></script>

      <script>
      jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap({
          map: 'russia_en',
          backgroundColor: 'blue',
          color: '#ffffff',
          hoverOpacity: 0.7,
          selectedColor: '#999999',
          enableZoom: true,
          showTooltip: true,
          scaleColors: ['#C8EEFF', '#006491'],
          normalizeFunction: 'polynomial'
        });
      });
    setTimeout(function (){$("#jqvmap1_iv").attr("fill","red");}, 1000);
    </script>
  </head>
  <body>
    <div id="vmap" style="width: 300px; height: 200px;"></div>
  </body>
</html>