How to connect to openstreetmap via API? I really can not find the normal information. I need to connect and put geo points

<? function get_saved_locations(){ $con=mysqli_connect ("localhost", 'root', '','locations'); if (!$con) { die('Not connected : ' . mysqli_connect_error()); } $sqldata = mysqli_query($con,"select lng,lat from locations "); $rows = array(); while($r = mysqli_fetch_assoc($sqldata)) { $rows[] = $r; } $indexed = array_map('array_values', $rows); // $array = array_filter($indexed); echo json_encode($indexed); if (!$rows) { return null; } } ?> <script> var map = L.map( 'map', { center: [57.08231,25.24116], minZoom: 1.5, zoom: 7 }) L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', subdomains: ['a', 'b', 'c'] }).addTo( map ) var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' ) var myIcon = L.icon({ iconUrl: myURL + 'images/pin24.png', iconRetinaUrl: myURL + 'images/pin48.png', iconSize: [29, 24], iconAnchor: [9, 21], popupAnchor: [0, -14] }) for ( var i=0; i < markers.length; ++i ){ L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} ) .addTo( map ); </script> 

It all works, but this is output for JSON, and I need from the MYSQL database, there are only 2 lat lng columns

 <? $con=mysqli_connect ("localhost", 'root', '','locations'); if (!$con) { die('Not connected : ' . mysqli_connect_error()); } // update location with location_status if admin location_status. $sqldata = mysqli_query($con,"select lng,lat from locations "); $rows = array(); while($r = mysqli_fetch_assoc($sqldata)) { $rows[] = $r; } ?> var tempArray = JSON.parse("[<?echo $r?>]"); 
  • You asked a similar question today and I gave you a link where I superficially compared several map engines, an example for almost everyone taking openstreetmap tiles. Osm itself is not an engine, it is information (tiles) - Stranger in the Q

1 answer 1

OSM is not an engine, it is data (tiles).

Use for example a leaflet , these are 2D maps, with a fairly simple API, here is an example of OSM:

 var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmLayer = new L.TileLayer(osmUrl, { maxZoom: 18 }); var pt = new L.LatLng(60, 30.3); var map = new L.Map('map', { center: pt, zoom: 12, layers: [osmLayer] }); L.marker(pt).addTo(map) .bindPopup('Кто тут ??') .openPopup(); 
 body { margin: 0; overflow: hidden; } #map { position: fixed; width: 100%; height: 100%; } 
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <div id="map"></div> 

My other post with a superficial comparison of different Web maps and globes

  • changed the description of the question at the top ... can you help with this? - Sasuke Uchiha
  • very sorry (((( - Sasuke Uchiha
  • Yes, I would like that, but I don’t know how to get this array from php in javascrip for the first time, as I am new to this business. - Sasuke Uchiha
  • This cycle of the odds in js is responsible for the output and I don’t know how to deliver the result of that query there ... or I misunderstand something. I do not know ( - Sasuke Uchiha
  • put php.net/manual/ru/debugger.php into the log like this - Stranger in the Q