更改JavaScript地图中的图钉颜色？

Question

We're using an amcharts map, and so far, it all looks pretty good.

What I'm trying to do is change the color of the pins based on some value coming from our json stream.

javascript :

AmCharts.makeChart("mapdiv", {
"type": "map",
"theme": "light",
"imagesSettings": {
  "rollOverColor": "#089282",
  "rollOverScale": 1,
  "selectedScale": 0.5,
  "selectedColor": "#089282",
  "color": "#13564e",
  "selectable": false,
  "bringForwardOnHover": false
},
"areasSettings": {
  "color": "#D3D3D3",
"autoZoom": true
},  
"data": {
  "map": "puertoRicoHigh",
  "getAreasFromMap": true
},
"dataLoader": {
  "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/716619/30189.json",
  "format": "json",
  "showErrors": true,
  "postProcess": function(data, config, map) {
    // create a new dataProvider
    var mapData = map.data;

    // init images array
    if (mapData.images === undefined)
      mapData.images = [];

    // create images out of loaded data
    for(var i = 0; i < data.length; i++) {
      var image = data[i];
      image.type = "circle";
      mapData.images.push(image);
    }
    return mapData;
  }
}

});

That works well, but I would like to change the pins being displayed in the map. Ideally, I would like to use images (jpg, png, etc) that I've downloaded from the web.

So let's say that my json looks like this:

[{"title":"Site1","longitude":18.4262,"latitude":-67.1483,"inservice":true},
{"title":"Site2","longitude":18.3663,"latitude":-66.1887,"inservice":false}]

How can I change the pin color/size/font (or even image) so that if "inservice" is true, then use one pin. If it's false, then use another pin.

I tried using the SO snippet tool, but it's not rendering the map. So here it is, in jsfiddle: https://jsfiddle.net/wn61bfqb/

  AmCharts.makeChart("mapdiv", { "type": "map", "theme": "light", "imagesSettings": { "rollOverColor": "#089282", "rollOverScale": 1, "selectedScale": 0.5, "selectedColor": "#089282", "color": "#13564e", "selectable": false, "bringForwardOnHover": false }, "areasSettings": { "color": "#D3D3D3", "autoZoom": true }, "data": { "map": "puertoRicoHigh", "getAreasFromMap": true }, "dataLoader": { "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/716619/30189.json", "format": "json", "showErrors": true, "postProcess": function(data, config, map) { // create a new dataProvider var mapData = map.data; // init images array if (mapData.images === undefined) mapData.images = []; // create images out of loaded data for(var i = 0; i < data.length; i++) { var image = data[i]; image.type = "circle"; mapData.images.push(image); } return mapData; } } }); 

 #mapdiv { width: 100%; height: 300px; 

 <script src="https://www.amcharts.com/lib/3/ammap.js"></script> <script src="https://www.amcharts.com/lib/3/maps/js/puertoRicoHigh.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.js"></script> <div id="mapdiv"></div> 

Thanks.

Answer 1

inside the dataLoader function where your are looping through the datasets add a check if inservice is true. Based on this check add a color.

  for (var i = 0; i < data.length; i++) {
    var image = data[i];
    image.type = "circle";
  if(data[i].inservice){
     image.color = 'green'; // if inservice is true
  } else {
     image.color = 'red'; // if inservice is false or undefined 
  }
    mapData.images.push(image);
  }

I noticed that the end point you are calling to create this map is not returning inservice field yet. So till then we end up showing red pin all the time.

jsFiddle link