@geoapify/leaflet-address-search-plugin
Version:
Address autocomplete plugin for Leaflet using Geoapify Geocoding API. Find an address and show its location!
156 lines (133 loc) • 5.23 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Geoapify + Leaflet: Address Search Plugin - styling</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="../src/L.Control.GeoapifyAddressSearch.css" />
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/styles/a11y-light.min.css">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.header {
height: 155px;
padding: 0 20px;
}
.demo-container {
flex: 1;
max-height: calc(100% - 155px);
display: flex;
flex-direction: row;
}
#my-map {
flex: 1;
}
.code-container {
padding: 10px;
min-width: 600px;
max-width: 600px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="header">
<h1>Geoapify + Leaflet: Address Search Plugin Demo</h1>
<h3>Set bias to the map view to search addresses nearby</h3>
<p>More examples: <a href="../index.html">Add the address autocomplete plugin</a>,
<a href="styling.html">Custom style</a>,
<a href="localization.html">Localize results</a>,
<a href="icons.html">Beautiful markers</a>
</p>
</div>
<div class="demo-container">
<div id="my-map"></div>
<div class="code-container">
<p>To force <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> Address Autocomplete to use the
visible map area
as a preferable search area, set the "mapViewBias" flag to true:</p>
<pre><code class="language-js">
const addressSearchControl = L.control.addressSearch(myAPIKey /* get an API Key on https://myprojects.geoapify.com */, {
position: 'topleft',
mapViewBias: true,
resultCallback: (address) => {
...
},
suggestionsCallback: (suggestions) => {
console.log(suggestions);
}
});
map.addControl(addressSearchControl);
L.control.zoom({ position: 'bottomright' }).addTo(map);
</code></pre>
<p>You can also get the rough user location with <a href="https://www.geoapify.com/ip-geolocation-api/"
target="_blank">the IP Geolocation API</a>:</p>
<pre><code class="language-js">
fetch(`https://api.geoapify.com/v1/ipinfo?apiKey=${myAPIKey}`).then(result => result.json()).then(result => {
map.setView([result.location.latitude, result.location.longitude], 8);
});
</code></pre>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="../src/L.Control.GeoapifyAddressSearch.js"></script>
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script>
// The Leaflet map Object
var map = L.map('my-map', { zoomControl: false }).setView([48.1500327, 11.5753989], 5);
// The API Key provided is restricted to the plugin demo
// Get your own API Key on https://myprojects.geoapify.com
var myAPIKey = "d797ff206eda4d1a804ab31d002f0f41";
var mapURL = L.Browser.retina
? `https://maps.geoapify.com/v1/tile/{mapStyle}/{z}/{x}/{y}.png?apiKey={apiKey}`
: `https://maps.geoapify.com/v1/tile/{mapStyle}/{z}/{x}/{y}@2x.png?apiKey={apiKey}`;
// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(mapURL, {
attribution: 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="https://openmaptiles.org/" rel="nofollow" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" rel="nofollow" target="_blank">© OpenStreetMap</a> contributors',
apiKey: myAPIKey,
mapStyle: "osm-liberty", // More map styles on https://apidocs.geoapify.com/docs/maps/map-tiles/
maxZoom: 20
}).addTo(map);
var marker = null;
// Get a user location roughly
fetch(`https://api.geoapify.com/v1/ipinfo?apiKey=${myAPIKey}`).then(result => result.json()).then(result => {
map.setView([result.location.latitude, result.location.longitude], 8);
});
// Add Geoapify Address Search control
// Get your own API Key on https://myprojects.geoapify.com
const addressSearchControl = L.control.addressSearch(myAPIKey, {
position: 'topleft',
mapViewBias: true,
className: 'custom-address-field',
resultCallback: (address) => {
if (marker) {
marker.remove();
}
if (!address) {
return;
}
marker = L.marker([address.lat, address.lon]).addTo(map);
if (address.bbox && address.bbox.lat1 !== address.bbox.lat2 && address.bbox.lon1 !== address.bbox.lon2) {
map.fitBounds([[address.bbox.lat1, address.bbox.lon1], [address.bbox.lat2, address.bbox.lon2]], { padding: [100, 100] })
} else {
map.setView([address.lat, address.lon], 15);
}
},
suggestionsCallback: (suggestions) => {
console.log(suggestions);
}
});
map.addControl(addressSearchControl);
L.control.zoom({ position: 'bottomright' }).addTo(map);
</script>
</body>
</html>