jVectorMaps image markers

Question

I know this questions has been asked but the op didn't provide any code and I can't edit his answer obviously, so I'll start a new one. My objective is to replace the dot with a custom drop-pin marker that I will eventually have some other action for it. So as a kicker, such action must be identified somehow (perhaps and id) so that I can call it from jQuery, CSS, or javascript and give it some use.

Background:

I extracted the map of Pennsylvania from jVectorMaps and the code from the section that explains how to use marker images from this link marker-icons.

This is the original code:

$(function(){
   var plants = [
   {name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018'},
   {name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed'},
   {name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022'},
   {name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5]}
];

new jvm.Map({
   container: $('#map'),
   map: 'de_merc',
   markers: plants.map(function(h){ return {name: h.name, latLng: h.coords} }),
   labels: {
      markers: {
        render: function(index){
          return plants[index].name;
        },
        offsets: function(index){
          var offset = plants[index]['offsets'] || [0, 0];

          return [offset[0] - 7, offset[1] + 3];
        }
      }
   },
   series: {
     markers: [{
       attribute: 'image',
       scale: {
         'closed': '/img/icon-np-3.png',
         'activeUntil2018': '/img/icon-np-2.png',
         'activeUntil2022': '/img/icon-np-1.png'
       },
       values: plants.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
       legend: {
         horizontal: true,
         title: 'Nuclear power station status',
         labelRender: function(v){
           return {
           closed: 'Closed',
           activeUntil2018: 'Scheduled for shut down<br> before 2018',
           activeUntil2022: 'Scheduled for shut down<br> before 2022'
         }[v];
        }
      }
    }]
   }
  });
});

And this is my version which it does display the map, it does display the location, but only as a dot, not the marker. (See screenshot below) p.s. I don't care about the legend. I'm doing something else for that.

My code:

//------------- Vector maps -------------//
     var prison = [
       {name: 'Albion', coords: [41.890611, -80.366454], status: 'active', offsets: [0, 2]}
];


$('#pa-map').vectorMap({
    map: 'us-pa_lcc_en',
    scaleColors: ['#f7f9fe', '#29b6d8'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    backgroundColor: '#fff',
    regionStyle:{
        initial: {
            fill: '#dde1e7',
            "fill-opacity": 1,
            stroke: '#f7f9fe',
            "stroke-width": 0,
            "stroke-opacity": 0
        },
        hover: {
            "fill-opacity": 0.8
        },
        selected: {
            fill: 'yellow'
        }
    },
    markers: prison.map(function(h){ return {name: h.name, latLng: h.coords} }),
    labels: {
        markers: {
          render: function(index){
            return prison[index].name;
          },
          offsets: function(index){
            var offset = prison[index]['offsets'] || [0, 0];

            return [offset[0] - 7, offset[1] + 3];
          }
        }
    },
    series: {
      markers: [{
        attribute: 'image',
        scale: { 'active': '/img/map-marker-icon.png'},
        values: prison.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
      }]
    }
});

My HTML:

<div id="pa-map" style="width: 100%; height: 470px"></div>

My CSS:

Irrelevant. I'll design accordingly later.

Thank you in advance!

Hydrophilic

are your marker images in the right location? – Canner

I checked that as well, They are – Hydrophilic

Have you checked the console for any logs? – Canner

nothing. No 404s, missing references, dependencies, or anything like that. Just a missing avatar that I am using in the account page (user images) Nothing that would be related to this – Hydrophilic

hmm, the only thing I'm seeing is that there's not a lot of documentation on the difference between $.vectorMap() and new jvm.Map() – Canner

Agreed. Not much of a documentation period from the vendor. I'm hoping someone here can share some light. I know I can't be the only one that's ever attempted this. Let's see – Hydrophilic

Best thing is probably to just read the source – Canner

Answer 1

To change dot to custom marker   DEMO
If you read there source code they have option for initializing markerStyle in jvm.Map.defaultParam and for markerStyle you can define it as image or fill (switch case is used here) i think in jvm.Legend.prototype.render

They also has Some Event

jvm.Map.apiEvents = {
    onRegionTipShow: "regionTipShow",
    onRegionOver: "regionOver",
    onRegionOut: "regionOut",
    onRegionClick: "regionClick",
    onRegionSelected: "regionSelected",
    onMarkerTipShow: "markerTipShow",
    onMarkerOver: "markerOver",
    onMarkerOut: "markerOut",
    onMarkerClick: "markerClick",
    onMarkerSelected: "markerSelected",
    onViewportChange: "viewportChange"
}

So here the code UPDATE you can also attach your function to onMarkerClick option

function doWhatever(event, code, obj) {
  alert("Hello");
  console.log(event);
}

var prison = [{
  name: 'Albion',
  coords: [41.890611, -80.366454],
  status: 'active',
  offsets: [0, 2]
}];

var ab = $('#pa-map').vectorMap({
  map: 'us-pa_lcc_en',
  scaleColors: ['#f7f9fe', '#29b6d8'],
  normalizeFunction: 'polynomial',
  hoverOpacity: 0.7,
  hoverColor: false,
  backgroundColor: '#fff',
  regionStyle: {
    initial: {
      fill: '#dde1e7',
      "fill-opacity": 1,
      stroke: '#f7f9fe',
      "stroke-width": 0,
      "stroke-opacity": 0
    },
    hover: {
      "fill-opacity": 0.8
    },
    selected: {
      fill: 'yellow'
    }
  },
  markers: prison.map(function(h) {
    return {
      name: h.name,
      latLng: h.coords
    }
  }),
  labels: {
    markers: {
      render: function(index) {
        return prison[index].name;
      },
      offsets: function(index) {
        var offset = prison[index]['offsets'] || [0, 0];

        return [offset[0] - 7, offset[1] + 3];
      }
    }
  },
  markersSelectable: true,
  markerStyle: {
    initial: {
      image: "http://jvectormap.com/img/icon-np-2.png",

    },
  },
  onMarkerClick: function(event, code) {
    doWhatever(event, code, this);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="https://raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/us/jquery-jvectormap-data-us-pa-lcc-en.js"></script>



<div id="pa-map" style="width: 100%; height: 470px"></div>

Incisure

I'm testing this. It works with the world or US map but not with the PA map. – Hydrophilic

I'm loading World Map jquery-jvectormap-world-mill-en.js Can you provide PA Map JS – Incisure

Sure thing. I'll give you a github link. And thanks for this – Hydrophilic

Give me a couple of minutes – Hydrophilic

raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/… – Hydrophilic

Did you update the codepen? Because I copied and pasted it in the codepen and it didn't work. Neither by running the Code Snippet – Hydrophilic

Yes i have updated just now ,try running in firefox because chrome gives error as Refused to execute script from github..... because it s MIME type (text/plain) – Incisure

you need to download that JS File Locally and then try running in chrome – Incisure

how did you guys solved this. first i got circle markers, just tweaked it until it shows no markers at all. – Taster