次の例では、ヒートマップを表示します。
ヒートマップを表示するには、ZDC.Heatmapを利用します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,heatmap.js&enc=UTF8" type="text/javascript"></script> <script type="text/javascript"> var map, heatmap; function loadMap() { map = new ZDC.Map(document.getElementById('ZMap'), { zoom: 7, zoomRange: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], mapType: ZDC.MAPTYPE_HIGHRES_LV18 }); map.addWidget(new ZDC.ScaleBar()); map.addWidget(new ZDC.Control()); chgScaleRadius(); } function chgScaleRadius() { var chk = document.getElementById("scaleRadius").checked; var dataset = {}; if (!!heatmap) { map.removeWidget(heatmap); } dataset.min = 0; dataset.max = 8; dataset.data = [{ latlon: new ZDC.LatLon(35.681236, 139.767125), value: 3 }, { latlon: new ZDC.LatLon(35.677861388, 139.7703166), value: 8 }, { latlon: new ZDC.LatLon(35.694545278, 139.850532222), value: 6 }]; var options = {}; options.scaleRadius = chk; options.maxOpacity = 0.8; if (chk === true) { options.radius = 0.1; } else { options.radius = 100; } heatmap = new ZDC.Heatmap(dataset, options); map.addWidget(heatmap); } </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div> <div style="top:10px; right:30px; position:absolute; background-color:white;"> <label><input id="scaleRadius" type="checkbox" onchange="chgScaleRadius()">scaleRadius</label> </div> </body> </html>