Old school D3 from simpler times

All examples By author By category About

TetsuyaKimotsuki

Full window Github gist

JR西日本の駅

国土地理院の地図上に国土数値情報の駅情報を加工して、JR西の駅約1300をマッピングしました。数が多すぎて表示が重い場合の定番対応として、MarkerClusterプラグインを使ってます。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JR西日本の駅</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
    <script src="https://leaflet.github.io/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <style type="text/css">
        #mapid {
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="mapid"></div>
    <script type="text/javascript">
        var mymap = L.map('mapid').setView([34.7024854, 135.4959506], 10);
        L.tileLayer(
            'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
            {
                attribution: "<a href='https://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
            }
        ).addTo(mymap);
        var stations = new L.markerClusterGroup().addTo(mymap);
        $.getJSON("N02-16_Station.geojson", function (data) {
            L.geoJson(data, {
                onEachFeature: function (feature, layer) {
                    var out = [];
                    if (feature.properties) {
                        for (key in feature.properties) {
                            if (feature.properties[key]) {
                                out.push(key + ": " + feature.properties[key]);
                            }
                        }
                        layer.bindPopup(out.join("<br />"));
                    }
                }
            }).addTo(stations);
        });
    </script>
</body>

</html>

xxxxxxxxxx
 
<!doctype html>
<html>
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JR西日本の駅</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
    <script src="https://leaflet.github.io/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <style type="text/css">
        #mapid {
            height: 500px;
        }
    </style>
</head>
​
<body>
    <div id="mapid"></div>
    <script type="text/javascript">
        var mymap = L.map('mapid').setView([34.7024854, 135.4959506], 10);
        L.tileLayer(
            'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
            {
                attribution: "<a href='https://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
            }
        ).addTo(mymap);
        var stations = new L.markerClusterGroup().addTo(mymap);
        $.getJSON("N02-16_Station.geojson", function (data) {
            L.geoJson(data, {
                onEachFeature: function (feature, layer) {
                    var out = [];
                    if (feature.properties) {
                        for (key in feature.properties) {
                            if (feature.properties[key]) {
                                out.push(key + ": " + feature.properties[key]);
                            }
                        }
                        layer.bindPopup(out.join("<br />"));
                    }
                }
            }).addTo(stations);
        });
    </script>
</body>
​
</html>
    

Updated missing url https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js to https://leaflet.github.io/leaflet.markercluster/dist/leaflet.markercluster-src.js

https://code.jquery.com/jquery-2.1.1.min.js

https://unpkg.com/leaflet@1.1.0/dist/leaflet.js

https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js