LoginSignup
0

More than 3 years have passed since last update.

leafletを鍛える。その10

Last updated at Posted at 2018-10-18

概要

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

写真

サンプルデータ

{
    "bikuya": [{
        "lat": "37.929687",
        "lon": "140.151111",
        "name": "オートショップユニット"
    },
    {
        "lat": "37.929220",
        "lon": "140.109344",
        "name": "(株)エイジュウプロ"
    },
    {
        "lat": "37.923453",
        "lon": "140.093108",
        "name": "(株)ホンダウイングロードショウ"
    },
    {
        "lat": "37.911333",
        "lon": "140.112004",
        "name": "(有)カーセンター葵商会"
    },
    {
        "lat": "37.907591",
        "lon": "140.108036",
        "name": "塚本サイクル"
    },
    {
        "lat": "37.928429",
        "lon": "140.114247",
        "name": "サイクルショップ川口"
    },
    {
        "lat": "37.916279",
        "lon": "140.099879",
        "name": "サイクルショップ中村"
    },
    {
        "lat": "37.917854",
        "lon": "140.101416",
        "name": "菅原商会"
    },
    {
        "lat": "37.912485",
        "lon": "140.108688",
        "name": "サイクルセンター卯月"
    },
    {
        "lat": "37.912049",
        "lon": "140.105914",
        "name": "ホンダ野村モータース"
    },
    {
        "lat": "37.869915",
        "lon": "140.103534",
        "name": "モーターハウスK"
    },
    {
        "lat": "37.918955",
        "lon": "140.109289",
        "name": "ライダースサロン・ヤマカ"
    },
    {
        "lat": "37.915746",
        "lon": "140.108313",
        "name": "中央ホンダ"
    },
    {
        "lat": "37.905011",
        "lon": "140.107225",
        "name": "香澄ホンダ"
    },
    {
        "lat": "37.912663",
        "lon": "140.123328",
        "name": "佐藤オート商会"
    },
    {
        "lat": "37.910789",
        "lon": "140.121636",
        "name": "香坂輪店"
    },
    {
        "lat": "37.958525",
        "lon": "140.125682",
        "name": "斎藤モータース"
    },
    {
        "lat": "37.956678",
        "lon": "140.117820",
        "name": "ニューホンダ石山"
    },
    {
        "lat": "37.903901",
        "lon": "140.131694",
        "name": "二輪屋たかはし"
    },
    {
        "lat": "37.886019",
        "lon": "140.104554",
        "name": "夢工場"
    },
    {
        "lat": "37.874814",
        "lon": "140.103239",
        "name": "あべ輪店"
    },
    {
        "lat": "37.905055",
        "lon": "140.137379",
        "name": "レッドバロン米沢"
    }]
}

サンプルコード

var map = L.map('map').setView([37.9, 140.1], 12);
mapLink = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var svgLayer = L.svg();
svgLayer.addTo(map);
var svg = d3.select("#map").select("svg");
var g = svg.select('g');
d3.json("http://jsrun.it/assets/O/z/T/r/OzTrh", function(pointsOfInterest) {
    pointsOfInterest = pointsOfInterest.bikuya;
    pointsOfInterest.forEach(function(d) {
        d.latLong = new L.LatLng(d.lat, d.lon);
    });
    var feature = g.selectAll("circle").data(pointsOfInterest).enter().append("circle").style("stroke", "black").style("opacity", .4).style("fill", "blue").attr("r", 20);
    function drawAndUpdateCircles() {
        feature.attr("transform", function(d) {
            var layerPoint = map.latLngToLayerPoint(d.latLong);
            return "translate("+ layerPoint.x +","+ layerPoint.y +")";
        })
    }
    drawAndUpdateCircles();
    map.on("moveend", drawAndUpdateCircles);
});

成果物

以上。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0