Search code examples
javascriptjvectormap

jVectorMap removing stroke and hover around regions


I'm trying to remove the stroke and hovers around regions on the jVector map - http://jvectormap.com/

This is the code I'm calling in the js:

$(function(){

    var markers = [
        { latLng: [-34.916564, 175.567275], name: "Northern", weburl : "https://northern.ps.org.nz/", image: 'northern.png', style: {image: 'themes/startertoplight/img/northern.png'} },
        { latLng: [-38.599254, 179.020342], name: "East Coast", weburl : "https://eastcoast.ps.org.nz/", image: 'eastcoast.png', style: {image: 'themes/startertoplight/img/eastcoast.png'} },
        { latLng: [-39.808098, 177.789873], name: 'Central', weburl : "http://www.psc.org.nz/", image: 'central.png', style: {image: 'themes/startertoplight/img/central.png'} },
        { latLng: [-40.979467, 177.196612], name: 'Upper South Island', weburl : "https://uppersouthisland.ps.org.nz/", image: 'uppersouthisland.png', style: {image: 'themes/startertoplight/img/uppersouthisland.png'} },
        { latLng: [-42.996672, 174.719443], name: 'South Canterbury', weburl : "https://southcanterbury.ps.org.nz/", image: 'southcanterbury.png', style: {image: 'themes/startertoplight/img/southcanterbury.png'} },
        { latLng: [-44.370306, 171.764670], name: 'Otago', weburl : "https://otago.ps.org.nz/", image: 'otago.png', style: {image: 'themes/startertoplight/img/otago.png'} },
        { latLng: [-45.573030, 171.696664], name: 'Southland', weburl : "https://southland.ps.org.nz/", image: 'southland.png', style: {image: 'themes/startertoplight/img/southland.png'} },
    ];

    /* map parameters */
    var wrld = {
            map: 'nz_mill_en',
            backgroundColor: '#fff',
            regionStyle: {
      initial: {
        fill: '#326497'
      },
      hover: {
          fill: "#326497"
      }},
            onMarkerClick: function(events, index) {
            $(location).attr('href', markers[index].weburl);
            },
            onRegionLabelShow: function(e, el, code){
                e.preventDefault();
            },
            colors:{
        "Northern": '#316498',
                "East Coast": '#316498',
                "Central": '#316498',
                "Upper South Island": '#316498',
                "South Canterbury": '#316498',
                "Otago": '#316498',
                "Southland": '#316498'
            },
            series: {
      regions:
      [{
        attribute: 'fill'
      }]
    },
            zoomButtons: false,
            zoomOnScroll: false,
            focusOn: {
                x: 0.3,
                y: 0.7,
                scale: 3
            },
            markerStyle: {
                initial: {
                    fill: '#F8E23B',
                    stroke: '#383f47'
                }
            },
            markers: markers,
    };

    $('#nz-map').vectorMap(wrld);

});

Other than that, I'm using every other styling/js from the plugin. Does any one know how to change the stroke and the hover colour/remove hover? I've tried to remove the hover in my js as you can see but it's not working


Solution

  • hover: {
              "fill-opacity" : 1
          }},
    

    and

    .jvectormap-region {
        stroke: #316498;
        stroke-width: 2;
    }