01.md

MySQLから取得した緯度経度に円を描いてみよう

http://play.mylab.jp/webgis-hands-on-mysql/mysql/sample-1-1/index.html

index.htmlとmain.cssは変更なし

main.js

'strict'

var map = null;

function initMap() {
  map = new google.maps.Map($('#map').get(0), {
    center: {lat: 35.172899, lng: 136.887531},
    zoom: 15
    });

  $.ajax({
-    url: 'data.json',
+    url: 'api.php',
    type: 'GET',
    dataType: 'json'
  })
  .done(function(data){
    console.log(data);
    render(data);
  })
  .fail(function(){
    console.log('error');
  });
}

function render(data){
-  data.circle_coordinates.forEach(function(coordinate){
+  data.forEach(function(geom){
    var circle = new google.maps.Circle({
      map: map,
-      center: coordinate,
+      center: {lat: geom.coordinates[1], lng: geom.coordinates[0]},
      radius: 100
    });
  });
}

api.php

<?php

$db = mysqli_connect('localhost', <ユーザー名>, <パスワード>, 'opendata');

if(!$db){
        return;
}

$sql = <<<EOS
SELECT ST_AsGeoJson((geom)) AS geojson
FROM mcdnald
EOS;

$stmt = $db->prepare($sql);

$stmt->execute();
$stmt->bind_result($geojson);

$json = [];
while(($row = $stmt->fetch()) != NULL){
        $json[] = json_decode($geojson);
}

echo json_encode($json);

exit;