javascriptマップのピンの色を変更しますか？

Question

私たちはamchartsマップを使用していますが、これまではすべてがかなり良いように見えます。

私がしようとしているのは、の値に基づくピンの色をjsonストリームから変更することです。

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; 
    } 
} 

}）。

これはうまくいきますが、地図に表示されているピンを変更したいと思います。理想的には、Webからダウンロードした画像（jpg、pngなど）を使用したいと考えています。 「現職」は真である場合、一つのピンを使用するように私はピンの色/サイズ/フォント（あるいは画像）を変更するにはどうすればよい

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

：

それでは、私のjsonはこのようになっていることを言わせて。それが偽であれば、別のピンを使用してください。

SOのスニペットツールを使用しようとしましたが、地図を描画していません。だからここではjsfiddleで、次のとおりです。https://jsfiddle.net/wn61bfqb/

\t 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", 
 
\t "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> \t

感謝。

Answer 1

dataLoader関数内で、データセットをループしている場合、inserviceがtrueの場合にチェックが追加されます。このチェックに基づいて色を追加します。

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); 
    } 

私はあなたがこのマップを作成するために呼び出しているエンドポイントはまだinserviceフィールドを返していないことに気づきました。だから私たちはいつも赤いピンを見せてしまう。

jsFiddle link