javascript - jVectorMaps image markers - Stack Overflow

admin管理员组

文章数量:1323012

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!

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!

• javascript
• jvectormap

Share Improve this question Follow edited Dec 19, 2015 at 18:28 LOTUSMS asked Dec 19, 2015 at 17:09 LOTUSMSLOTUSMS 10.3k1818 gold badges7777 silver badges153153 bronze badges 7

• are your marker images in the right location? – jcuenod Commented Dec 22, 2015 at 18:44
• I checked that as well, They are – LOTUSMS Commented Dec 22, 2015 at 18:47
• Have you checked the console for any logs? – jcuenod Commented Dec 23, 2015 at 3:27
• 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 – LOTUSMS Commented Dec 23, 2015 at 3:31
• 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() – jcuenod Commented Dec 24, 2015 at 5:27

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7 +50

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./img/icon-np-2.png",

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://jvectormap./css/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
<script src="http://jvectormap./js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="https://raw.githubusercontent./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>

本文标签： javascriptjVectorMaps image markersStack Overflow