leafletを鍛える。その11

1593 ワード
d3 leaflet Plunker d3 テキストリンク

概要

leafletを鍛えてみた。
d3のv4でjsonよんでみた。

写真

参考にしたページ

サンプルコード

var map = L.map('map').setView([35.7, 139.7], 3);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);


d3.json("http://jsrun.it/assets/Q/w/7/T/Qw7TW", function(error, json) {
    var data = json.results.bindings;
    data.forEach(function(d, i) {
        if (d.lat.value != null && d.long.value != null) 
        {
            var title = d.name.value;
            var mark = L.marker(([d.lat.value, d.long.value]), {
                title: title
            }).addTo(map);
        } 
    });
});

成果物

以上。