);
}
export default App;
```
After that, we return JSX with the child and components nested with in the parent component.
### Autocomplete search bar
The search bar, located in the top left corner, allows users to search for and select administrative boundaries from the Nominatim database. It is built on top of the `` component from the Ant Design UI library ([API reference](https://4x.ant.design/components/select/?ref=blog.afi.io)) and includes an autocomplete feature which provides boundary name suggestions as the user types. For instance, typing "vancouver" will display several matching results.
Search bar with autocomplete built using the Ant Design component
To enhance performance and reduce excessive API calls, the search bar features a [debouncing](https://medium.com/@dalibor.nerber/react-essentials-debouncing-requests-to-increase-performance-1413715a00b?ref=blog.afi.io) mechanism that introduces a brief delay after typing, ensuring that the API call to Nominatim is only made once the user has completed entering their search query. This is especially important because our app uses the rate-limited free version ([https://nominatim.openstreetmap.org/search.php](https://nominatim.openstreetmap.org/search.php?ref=blog.afi.io)) of the Nominatim API. If too many API calls are made in a short period, our app could be blocked.
### CitySelect.jsx
Here's a deep dive into what goes on in `CitySelect.jsx`
```
/* components/CitySelect.jsx */
: null}
onChange={setSelectedCity}
options={options}
style={{ width: "100%" }}
/>;
```
The code above outlines the main functionality of the component. Let's explore what happens behind the scenes when a user types in a city name, selects one from the list of matching terms, and clicks to confirm their choice.
`**onSearch={debounceFetchListCity}**` gets called when the user starts typing in the search input text box. The associated `debounceFetchListCity()` method then retrieves a list of cities (areas) that match the search text input.
```
/* components/CitySelect.jsx */
const debounceFetchListCity = debounce(async (searchValue) => {
setListCity([]);
setOptions([]);
if (searchValue?.length > 5) {
try {
setFetching(true);
const response = await fetch(
`https://nominatim.openstreetmap.org/search.php?q=${searchValue}&polygon_geojson=1&format=json`,
);
const body = await response.json();
if (Array.isArray(body)) {
setListCity(body);
const options = body
.filter((result) => result.geojson?.type === "Polygon")
.map((result) => ({
label: result.display_name,
value: result.place_id,
}));
setOptions(options);
}
} catch (error) {
console.error("Error fetching city list:", error);
} finally {
setFetching(false);
}
}
}, 800);
```
In this method, we first wait for a 800 millisecond (0.8 second) pause in typing before calling the [/search endpoint](https://afi.io/blog/building-a-free-geocoding-and-reverse-geocoding-service-with-openstreetmap/?ref=blog.afi.io) of the Nominatim API. If there's a match, the endpoint returns an array of matching `place` objects. For example, the text string "vancouver" returns an array of three objects:
Response from the Nominatim API search endpoint for the text string "vancouver"
`**options={options}**` provides the list of options that will be displayed in the dropdown of the search bar. `options` is mapped from the array returned by the Nominatim API. Each `option` object has a `label` and `value` that corresponds to `result.display_name` and `result.place_id` respectively.
The filtered label - value pair used in the dropdown menu of the autocomplete search bar
`**onChange={setSelectedCity}**` gets called when the user selects a city. If the `selectedCity` variable changes, the `useEffect()` hook is called and this in turn updates the global `coordinates` variable with the latitude and longitude pairs that make up the boundary of newly chosen city.
```
/* components/CitySelect.jsx */
useEffect(() => {
if (selectedCity) {
const newCoordinates = listCities.find((el) => el.place_id === selectedCity)
?.geojson?.coordinates;
setCoordinates(newCoordinates || []);
}
// console.log("new coords:" + newCoordinates);
}, [selectedCity]);
```
### MapBox.jsx
`MapBox.jsx` handles the map and boundary (polygon) rendering. As with my previous tutorials, I've decided to go with [Mapbox](https://www.mapbox.com/?ref=blog.afi.io) for the map layer used in this project but rather than go with its standard Javascript API, [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/?ref=blog.afi.io), I've chosen to use the third party [react-map-gl](https://visgl.github.io/react-map-gl/?ref=blog.afi.io) wrapper so that I can easily inject data and style our map using [Source](https://visgl.github.io/react-map-gl/docs/api-reference/source?ref=blog.afi.io) and [Layer](https://visgl.github.io/react-map-gl/docs/api-reference/layer?ref=blog.afi.io) components like so:
```JSX
```
When the `coordinates` array is updated (e.g. when the user selects a new city from the search bar `CitySelect.jsx`), the `MapBox.jsx` component is redrawn with new boundary data injected into the component as a [GeoJSON](https://datatracker.ietf.org/doc/html/rfc7946?ref=blog.afi.io) polygon, centered at its mid point.
```
;
```
The borders of the polygon are thick ("line-width": 3) black ("line-color": #000) with a light pink ("fill-color": "#E14C48", "fill-opacity": 0.15) fill.
Borders of the polygon returned by the OSM Nominatim API boundary data
To run this demo locally on your machine, clone this [project's repository](https://github.com/afilabs/openstreetmap-boundaries?ref=blog.afi.io) and in your terminal, run `npm install` to install dependencies followed by `npm start` to run the app. Don't forget to add your Mapbox API key to the .env file.
Spin up localhost:3000 on your favorite browser and if everything worked correctly, you should be able to see a map of Singapore. Type in "vancouver" and select the option "Vancouver, Metro Vancouver Regional District, British Columbia, Canada" and the map should show an outline of metro Vancouver in light pink. Type in the name of another city or area e.g. "University of British Columbia" to switch to a different boundary.
Switching between different city boundaries in our OSM boundary data viewer
If you can't find the city or area that you are looking for, this means that it probably does not exist in the Nominatim database. Nominatim, like all OpenStreetMap projects, relies on volunteer contributions. Missing or incomplete data is quite common.
### Wrap up and next steps
This concludes our tutorial on the [OSM Nominatim API](https://afi.io/blog/openstreetmap-osm-nominatim-api-tutorial/?ref=blog.afi.io). We covered the basics of [setting Nominatim up as a web service](https://afi.io/blog/run-a-free-geocoder-with-nominatim-docker?ref=blog.afi.io), making [geocoding and reverse geocoding requests](https://www.afi.io/blog/building-a-free-geocoding-and-reverse-geocoding-service-with-openstreetmap?ref=blog.afi.io), and in this post, using Nominatim to draw and view boundary data.
There are many mapping services on the market - Google Maps, Mapbox and HERE Maps, just to name a few. The OSM Nominatim API could be a worthwhile, low cost alternative for your project if you are willing to put in the work to run and host it on your own servers, and understand the strengths and limitations of using open source OSM data.
Part 1: [OpenStreetMap OSM Nominatim API tutorial ](https://afi.io/blog/openstreetmap-osm-nominatim-api-tutorial/?ref=blog.afi.io)
Part 2: [Run a free geocoder with Nominatim Docker](https://afi.io/blog/run-a-free-geocoder-with-nominatim-docker/?ref=blog.afi.io)
Part 3: [Building a free geocoding and reverse geocoding service with OpenStreetMap](https://www.afi.io/blog/building-a-free-geocoding-and-reverse-geocoding-service-with-openstreetmap/?ref=blog.afi.io)
Part 4: [How to draw and view boundary data with OpenStreetMap OSM](https://afi.io/blog/how-to-draw-and-view-boundary-data-with-openstreetmap-osm/?ref=blog.afi.io)
👋 **As always, if you have any questions or suggestions for me, please** [**reach out**](https://yourls.afi.io/newcontact?ref=blog.afi.io) **or** [**say hello on LinkedIn**](https://www.linkedin.com/in/afian-anwar-a023b143/?ref=the-afi-labs-blog)**.**