1. https://nominatim.org/release-docs/3.4/api/Search/
2. https://nominatim.openstreetmap.org/?addressdetails=1&q=bakery+in+berlin+wedding&format=json&limit=1
3. https://nominatim.openstreetmap.org/search?q=ragamukti&format=geojson
4. https://nominatim.org/release-docs/latest/api/Lookup/#examples
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<style>
#map {
height: 350px
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
const map = L.map('map');
// Initializes map
map.setView([51.505, -0.09], 13);
// Sets initial coordinates and zoom level
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
// Sets map data source and associates with map
let marker, circle, zoomed;
navigator.geolocation.watchPosition(success, error);
function success(pos) {
const lat = pos.coords.latitude;
const lng = pos.coords.longitude;
const accuracy = pos.coords.accuracy;
if (marker) {
map.removeLayer(marker);
map.removeLayer(circle);
}
// Removes any existing marker and circule (new ones about to be set)
marker = L.marker([lat, lng]).addTo(map);
circle = L.circle([lat, lng], { radius: accuracy }).addTo(map);
// Adds marker to the map and a circle for accuracy
if (!zoomed) {
zoomed = map.fitBounds(circle.getBounds());
}
// Set zoom to boundaries of accuracy circle
map.setView([lat, lng]);
// Set map focus to current user position
}
function error(error) {
console.log(error)
}
</script>
</html>
No comments:
Post a Comment