Leaflet ã£ã¦ä½ï¼ç½å°å³ãæ¸ããã£ã¦ã»ãã¨ï¼ç½å°å³ã®ãã¼ã¿ã¯ã©ãããæã«å ¥ããã®ï¼ã©ã¤ã»ã³ã¹ã¯ï¼èª¿ã¹ã¦ã¿ã¾ããï¼
Leaflet ã£ã¦ä½ï¼
Leaflet ã¯ã¢ãã¤ã«ãã¬ã³ããªã¼ãªã¤ã³ã¿ã©ã¯ãã£ããããã®ããã® JavaScript ã©ã¤ãã©ãªã§ãã
ç½å°å³ãæ¸ããã£ã¦ã»ãã¨ï¼
Leaflet ã§ã¯ GeoJSON å½¢å¼ã®ãã¼ã¿ãæç»ã§ãã¾ããã¤ã¾ã GeoJSON å½¢å¼ã®ç½å°å³ããå ¥æã§ããã°ç½å°å³ãæ¸ããã¨ãã§ãã¾ãã
ITããã·ã¥ãã¼ãã§è¡¨ç¤ºããã¦ããå°å³ã¯ Leaflet ã§æç»ããã¦ãã¦ãé常ã®å°å³ç»åã®ã¬ã¤ã¤ã¼ã«ç½å°å³ã®ã¬ã¤ã¤ã¼ãéãªã£ã¦ãã¾ãã
ç½å°å³ã®ãã¼ã¿ã¯ã©ãããæã«å ¥ããã®ï¼
ITããã·ã¥ãã¼ãã®ç½å°å³ããã®ã¾ã¾ä½¿ããã¨ããã§ããã
å
ã»ã©ã®ãã¼ã¸ã§ Chrome ã® Developer Tools ãéãã¦æ§åãè¦ã¦ã¿ãã¨ãè²ã
ãããããéä¿¡ããã¦ãããã¨ãè¦ã¦åãã¾ããã©ãããé½éåºçã® GeoJSON 㯠https://www.itdashboard.go.jp/js/data/prefectures.geojson
ããåå¾ãã¦ããããã§ãã
ããã使ã£ã¦ç½å°å³ãæç»ããã³ã¼ãã§ãã
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Learning Leaflet</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <style> #mapid { height: 360px; } </style> </head> <body> <div id="mapid"></div> <div>åºå ¸ï¼<a href="https://www.itdashboard.go.jp">ITããã·ã¥ãã¼ã</a></div> <!-- Make sure you put this AFTER Leaflet's CSS --> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script> <script> let mymap = L.map('mapid').setView([36.29667, 137.61629], 5); fetch('https://www.itdashboard.go.jp/js/data/prefectures.geojson') .then(resp => resp.json()) .then(json => { L.geoJSON(json).addTo(mymap); }) </script> </body> </html>
ã©ã¤ã»ã³ã¹ã¯ï¼
ãããªä¾¿å©ãªç½å°å³ãã¼ã¿ã使ããªãæã¯ããã¾ããããæ°ã«ãªãã©ã¤ã»ã³ã¹ã¯ã©ããªã£ã¦ããã®ã§ããããï¼
ITããã·ã¥ãã¼ãã®å©ç¨è¦ç´ã«ããã°ãåºå ¸ã®è¨è¼ãªã©ã®ã«ã¼ã«ã«å¾ããã¨ã§èªç±ã«ä½¿ããã¨ãã§ãã¾ããCC BY ã§ã®å©ç¨ãã§ãã¾ãã
ãªãã¯ï¼
å ã»ã©ã¾ã§è¦ãã¦ããITããã·ã¥ãã¼ãã§ããã2019-05-21 01:20:00 ç¾å¨ã503 Service Unavailable ã¨ãªã£ã¦ãã¾ãã¾ããã
調åã«ä¹ããããã®ã§ããããããã¾ãã¾ã§ããããããã¾ãã¾ã§ãããã¨ãç¥ãã¾ãã
ï¼10åå¾ï¼
ã¢ã¯ã»ã¹ã§ããããã«ãªãã¾ããããã¾ãã¾è½ã¡ã¦ããã®ã§ããããããã£ãããã£ãã