国土地理院の地図上に国土数値情報の駅情報を加工して、JR西の駅約1300をマッピングしました。 数が多すぎて表示が重い場合の定番対応として、MarkerClusterプラグインを使ってます。
Last active
October 28, 2018 02:42
-
-
Save TetsuyaKimotsuki/83fd28ce1e5d29c397031d4ef2d3fdb8 to your computer and use it in GitHub Desktop.
JR西日本の駅
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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( | |
| 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', | |
| { | |
| attribution: "<a href='http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment