読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 Google Map上に阿倍野区域のポリゴンを表示する

この記事では以下の画面を作成する。

f:id:kosumoro:20161009122003j:plain

https://cosmology233.github.io/sandbox/hatena/2016/10/09/

Google Maps APIを利用してページに阿倍野区域のポリゴンを表示する。

座標データは大阪市のオープンデータを利用する。

大阪市市政 マップナビおおさかオープンデータ一覧

KMZファイルは7zipを使用してKMLファイルに変換しておく。今回は変換後、 osaka.kml にリネームした。

圧縮・解凍ソフト 7-Zip

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Practice JavaScript</title>
  <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
  <div id="gmap" class="gmap"></div>

  <script src="./scripts/script.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBAVKOgsqfbsINYt2qjoLMziacVp6N8zBY&callback=initMap"></script>
</body>
</html>

data/osaka.kml

省略。

https://github.com/cosmology233/sandbox/blob/gh-pages/hatena/2016/10/09/data/osaka.kml

styles/style.css

body {
  padding: 0; margin: 0;
}

.gmap {
  width: 100%; height: 100vh;
}

scripts/script.js

alert("座標データは大阪市(http://www.city.osaka.lg.jp/toshikeikaku/page/0000250227.html#kuiki)のものです。");

function initMap() {
  var container = document.getElementById("gmap");
  var map = new google.maps.Map(container);
  
  map.setOptions({
    "zoom": 14,
    "center": {
      "lat": 34.634827,
      "lng": 135.514045
    }
  });
  
  getGeometryData("./data/osaka.kml", function(data) {
    data.forEach(function(datum) {
      var polygon = new google.maps.Polygon({
        "paths": datum.coords,
        "strokeColor": "#F33",
        "strokeOpacity": "0.6",
        "strokeWeight": 1,
        "fillColor": "#F33",
        "fillOpacity": "0.3"
      });
      
      polygon.setMap(map);
    });
  });
  
  function getGeometryData(path, callback) {
    var xhr = new XMLHttpRequest();
    var result = [];
    
    xhr.open("GET", path);
    xhr.addEventListener("load", function(ev) {
      var places = ev.target.responseXML.getElementsByTagName("Placemark");
      
      [].forEach.call(places, function(place) {
        var placeName = place.getElementsByTagName("name")[0].textContent;
        var coordsStr = place.querySelector("outerBoundaryIs coordinates").textContent.trim();
        var coords = [];
        
        if(placeName != "阿倍野区") {
          return false;
        }
        
        coords = coordsStr.split(" ").map(function(coordStr) {
          return {
            "lat": Number(coordStr.split(",")[1]),
            "lng": Number(coordStr.split(",")[0])
          };
        });
        
        result.push({
          "name": placeName,
          "coords": coords
        });
      });
        
      callback(result);
    });
    xhr.send();
  }
}