PHP と OpenStreetMap を使用して位置情報アプリケーションを作成する

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  // TODO: send location data to server
}

<div id="map"></div>

var map = L.map('map').setView([latitude, longitude], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  minZoom: 1,
  maxZoom: 19
}).addTo(map);
var marker = L.marker([latitude, longitude]).addTo(map);

function getOSMData($minlon, $minlat, $maxlon, $maxlat) {
  $url = "http://api.openstreetmap.org/api/0.6/map?bbox=$minlon,$minlat,$maxlon,$maxlat";
  $xml = file_get_contents($url);
  return $xml;
}

function displayNearbyPoints($xml) {
  $osm = new SimpleXMLElement($xml);
  $nodes = $osm->xpath('//node');
  foreach ($nodes as $node) {
    $lat = (float) $node['lat'];
    $lon = (float) $node['lon'];
    $marker = L.marker([$lat, $lon])->addTo($map);
  }
}

<div id="map"></div>

  
  Search

function searchNearby() {
  var query = document.getElementsByName('q')[0].value;
  var url = "http://nominatim.openstreetmap.org/search?q=" + query + "&format=json";
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      var data = JSON.parse(request.responseText);
      if (data.length > 0) {
        var lat = data[0].lat;
        var lon = data[0].lon;
        map.setView([lat, lon], 15);
        L.marker([lat, lon]).addTo(map);
      } else {
        alert("No results found.");
      }
    } else {
      alert("Error fetching data.");
    }
  };
  request.onerror = function() {
    alert("Error fetching data.");
  };
  request.send();
}