How to find an address or place in OpenStreetMap
Searching for a place or address is one of the most common uses of maps. In this article, I want to show you how to search for an address or place on OpenStreetMap.
I use leaflet.js to create the map and OSM as the service provider. To add an autocomplete search box I use Leaflet Geoapify Address Search, which is powered by Geoapify powers.
The video tutorial is also available. You can watch it or continue reading.
Follow the next 4 steps to create a map with an address search box.
Step 1: Create a basic map
The following image shows how to load a simple Open Street Map.
If this is unclear to you, I recommend you read this article before proceeding. In this article, I explained how you can create a map.
Step 2: Add address autocomplete plugin
You can do this in different ways, depending on the programming framework and project structure you use.
You can use NPM install:
npm i @geoapify/leaflet-address-search-pluginOr you can link to the library in HTML:
<link rel=”stylesheet” href=”https://unpkg.com/@geoapify/leaflet-address-search-plugin@^1/dist/L.Control.GeoapifyAddressSearch.min.css" />
<script src=”https://unpkg.com/@geoapify/leaflet-address-search-plugin@^1/dist/L.Control.GeoapifyAddressSearch.min.js"></script>In this tutorial, I use the second way
Step 3: Get an API key
To use Geoapify, you need an API key. You can simply sign up at myprojects.geoapify.com and get an API key. Free accounts allow up to 3000 requests per day.
Step 4: Add an Address Search field to the map
we use the addressSearch control to add the Address Search Control. It’s a leaflet control, so you can add it like any other Leaflet control.
API key and options are passed here.
const addressSearchControl = L.control.addressSearch(apiKey, { /* options */ });//addControl Adds the given control to the map
map.addControl(addressSearchControl);
Here are the search options supported by the Address Search plugin:
I added a position option (which is a leaflet control option) and some plugin options:
You can play around with the code in the following demo:
As you’ve seen in this tutorial, Address Search Plugin allows you can easily create an address search box for the map.
Not only that, but you can also use this library to get the coordinates of the address. You can also read the documentation to learn more.
If you’ve any questions, feel free to ask me to know in the comments.
Good luck and have fun learning!
