@geoapify/leaflet-address-search-plugin
Version:
Address autocomplete plugin for Leaflet using Geoapify Geocoding API. Find an address and show its location!
183 lines (153 loc) • 5.46 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;
}
.leaflet-bar.custom-address-field {
border: 5px solid #ff5722;
border-radius: 10px;
}
.custom-address-field .geoapify-address-input {
line-height: 36px;
height: 36px;
font-size: 16px;
}
.custom-address-field .geoapify-clear-button {
height: 36px;
}
.custom-address-field .address {
font-size: 14px;
}
</style>
</head>
<body>
<div class="header">
<h1>Geoapify + Leaflet: Address Search Plugin Demo</h1>
<h3>Style the address autocomplete to fit your design</h3>
<p>More examples: <a href="../index.html">Add the address autocomplete plugin</a>, <a
href="localization.html">Localize results</a>,
<a href="user-location.html">Search nearby</a>, <a href="icons.html">Beautiful markers</a>
</p>
</div>
<div class="demo-container">
<div id="my-map"></div>
<div class="code-container">
<p>It's easy to style the search field for addresses added by the <a href="https://www.geoapify.com/"
target="_blank">Geoapify</a> plugin.
You can provide a custom class name when creating the control and then define the styling in your CSS file:</p>
<pre><code class="language-js">
const addressSearchControl = L.control.addressSearch(myAPIKey /* get an API Key on https://myprojects.geoapify.com */, {
position: 'topleft',
className: 'custom-address-field', // add a custom class name
resultCallback: (address) => {
...
},
suggestionsCallback: (suggestions) => {
console.log(suggestions);
}
});
map.addControl(addressSearchControl);
L.control.zoom({ position: 'bottomright' }).addTo(map);
</code></pre>
<p>Here is an example of styling:</p>
<pre><code class="language-css">
.leaflet-bar.custom-address-field {
border: 5px solid #ff5722;
border-radius: 10px;
}
.custom-address-field .geoapify-address-input {
line-height: 36px;
height: 36px;
font-size: 16px;
}
.custom-address-field .geoapify-clear-button {
height: 36px;
}
.custom-address-field .address {
font-size: 14px;
}
</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: "toner-grey", // More map styles on https://apidocs.geoapify.com/docs/maps/map-tiles/
maxZoom: 20
}).addTo(map);
var marker = null;
// Add Geoapify Address Search control
// Get your own API Key on https://myprojects.geoapify.com
const addressSearchControl = L.control.addressSearch(myAPIKey, {
position: 'topleft',
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>