All geek questions in one place

Geolocation: mapping and POI with OpenStreetMap

I make a site where the visitor gets his position shown on the map and within the selected radius (for example, 10 km), the visitor can see some POIs (for example, restaurants, bars).

I have this code:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false"> </script> <script type="text/javascript"> function init() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition (processPosition, handleError); } else { alert("Geolocation not supported in this browser"); } } function processPosition(pos) { var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); var myOptions = { center: latlng, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)" }); } function handleError(err) { alert('An error occurred: ' + err.code); } </script> </head> <body onload="init()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

This shows me my position on a map with a marker using Google Maps.
The fact is that I would like to use maps from OpenStreetMap (they are updated regularly, but there are no restrictions), but, unfortunately, I have not yet been able to implement it.

Here are the cards I need: Maps

1. Is there an example (tutorial) that shows how to use their APIs, for example Google ?
2. Is there something like a POI in OpenStreetMap, such as Google Places ? Or is it even possible to use Google Places with OpenStreetMap maps?

+4
source share
2 answers

If you want to use OpenStreetMap data, you should study OpenLayers . This works a little differently than the Google Maps API or Bing Maps: you need to install the OpenLayers JavaScript library on your server and take care of displaying map data ("map tiles"), which can come from different sources: OpenStreetMap (OSM), Google Maps, your own card details etc. The OpenStreetMap website itself uses OpenLayers to display maps.

1: There is documentation (although I'm not as afraid as it is for the Google Maps API), and many examples , including some for using OpenStreetMap data, separately or together with Google data (enter "osm" in the "filter" box at the top) .

2: As for the POI, you can put the “Marker Layer” on the map, as in this example , including the custom marker icons and bubbles that appear when you click on the icons, but you have to take care of the data for your POIs and search functions. So, if you want, you can use the Google Places API and display the results as markers on OpenStreetMap - while you display the "Powered by Google" logo.

+2
source

A list of all OSM frameworks available from openstreetmap.org, with special notice in the list of so-called "web maps" as it relates to your question: http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps

NJoy!

+1
source

Source: https://habr.com/ru/post/1399046/

More articles:


All Articles