Geoapify + Leaflet: Address Search Plugin Demo

Style the address autocomplete to fit your design

More examples: Add the address autocomplete plugin, Localize results, Search nearby, Beautiful markers

It's easy to style the search field for addresses added by the Geoapify plugin. You can provide a custom class name when creating the control and then define the styling in your CSS file:


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);

Here is an example of styling:


.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;
}