// Create a Leaflet map const map = L.map('my-map').setView([48.1500327, 11.5753989], 15); // Marker to save the position of found address let marker; // The API Key provided is restricted to JSFiddle website // Get your own API Key on https://myprojects.geoapify.com const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a"; // Retina displays require different mat tiles quality const isRetina = L.Browser.retina; const baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}"; const retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}"; // add Geoapify attribution map.attributionControl.setPrefix('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a>') // Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution. L.tileLayer(isRetina ? retinaUrl : baseUrl, { attribution: '<a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors', apiKey: myAPIKey, maxZoom: 20, id: 'osm-bright', }).addTo(map); // move zoom controls to bottom right map.zoomControl.remove(); L.control.zoom({ position: 'bottomright' }).addTo(map); function onMapClick(e) { if (marker) { marker.remove(); } const reverseGeocodingUrl = `https://api.geoapify.com/v1/geocode/reverse?lat=${e.latlng.lat}&lon=${e.latlng.lng}&apiKey=${myAPIKey}`; // call Reverse Geocoding API - https://www.geoapify.com/reverse-geocoding-api/ fetch(reverseGeocodingUrl).then(result => result.json()) .then(featureCollection => { if (featureCollection.features.length === 0) { document.getElementById("status").textContent = "The address is not found"; return; } const foundAddress = featureCollection.features[0]; document.getElementById("name").value = foundAddress.properties.name || ''; document.getElementById("house-number").value = foundAddress.properties.housenumber || ''; document.getElementById("street").value = foundAddress.properties.street || ''; document.getElementById("postcode").value = foundAddress.properties.postcode || ''; document.getElementById("city").value = foundAddress.properties.city || ''; document.getElementById("state").value = foundAddress.properties.state || ''; document.getElementById("country").value = foundAddress.properties.country || ''; document.getElementById("status").textContent = `Found address: ${foundAddress.properties.formatted}`; marker = L.marker(new L.LatLng(foundAddress.properties.lat, foundAddress.properties.lon)).addTo(map); }); } map.on('click', onMapClick);
<div class="main"> <div class="controls"> <div class="results"> <label for="name">Name:</label> <input id="name" type="text" readonly /> <label for="house-number">House number:</label> <input id="house-number" type="text" readonly /> <label for="street">Street:</label> <input id="street" type="text" readonly /> <label for="postcode">Postcode:</label> <input id="postcode" type="text" readonly /> <label for="city">City:</label> <input id="city" type="text" readonly /> <label for="state">State:</label> <input id="state" type="text" readonly /> <label for="country">Country:</label> <input id="country" type="text" readonly /> </div> <div class="status"> <span id="status">Click on the map to query an address by coordinates</span> </div> </div> <div id="my-map"></div> </div>
html, body, .main { width: 100%; height: 100%; margin: 0; } .main { display: flex; flex-direction: row; } .results { padding: 10px; display: flex; flex-direction: column; min-width: 400px; max-width: 400px; } .status { padding: 10px; max-width: 400px; } #my-map { flex: 1; }