// Create a Leaflet map const map = L.map('my-map').setView([48.1500327, 11.5753989], 10); // 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 geocodeAddress() { const address = document.getElementById("address").value; if (!address || address.length < 3) { document.getElementById("status").textContent = "The address string is too short. Enter at least three symbols"; return; } if (marker) { marker.remove(); } const geocodingUrl = `https://api.geoapify.com/v1/geocode/search?text=${encodeURIComponent(address)}&apiKey=${myAPIKey}`; // call Geocoding API - https://www.geoapify.com/geocoding-api fetch(geocodingUrl).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.panTo(new L.LatLng(foundAddress.properties.lat, foundAddress.properties.lon)); }); }
<div class="main"> <div class="controls"> <div class="address-line"> <input id="address" type="text" placeholder="Enter address to search"><button onclick="geocodeAddress()">Geocode</button> </div> <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">Enter address and press "Geocode" button</span> </div> </div> <div id="my-map"></div> </div>
html, body, .main { width: 100%; height: 100%; margin: 0; } .main { display: flex; flex-direction: row; } .address-line { padding: 10px; display: flex; flex-direction: row; min-width: 400px; } #address { padding: 5px 10px; flex: 1; margin-right: 5px; } .results { padding: 10px; display: flex; flex-direction: column; min-width: 400px; } .status { padding: 10px; } #my-map { flex: 1; }