Search for content

Interactive Address Search - [PREVIEW]

You will learn how an address search control is implemented and how to display the results on a map. The tutorial illustrates the use of the PTV Developer Geocoding API and the PTV Developer Vector Maps API. 

Try it! Download from GitHub

Prerequisites

Getting started

About the tutorial

This tutorial is a simple react app that shows how to implement an address search control and show the results on a map. It is an example implementation, that shows how to implement a search control using the PTV Developer Geocoding API. Styling, dependencies and functionality are kept as simple as possible. Feel free to adapt the code to integrate a search control into your application.

 

You can download, install and run the tutorial with:

git clone https://github.com/PTV-Group/interactive-address-search.git
npm install
npm start

How the address search control works

The search control component is a react component named SearchInput using a simple HTML <input> element to process the address user input:

 const [input, setInput] = useState("");
 const [suggestions, setSuggestions] = useState();
 
 return (
  <>
    <input
          value={input}
          type="text"
          placeholder="Enter an address"
          autoFocus={true}
          onKeyDown={(event) => handleKeyboardNavigation(event)}
          onChange={(event) => handleSearchInput(event)}
        />
    ...
   </>
 );

The onChange event handler triggers a suggestion api call and shows the results in a drop down list box:

const suggestRequest = (input, apiKey) => `https://api.myptv.com/geocoding/v1/suggestions/by-text?searchText=${input}&apiKey=${apiKey}`;

const handleSearchInput = (event) => {

  ...
  
  suggest(event.target.value);
}

const suggest = (input) => {
  fetch(
    suggestRequest(input, apiKey)
  ).then(
    response => response.json()
  ).then(({ suggestions }) => {
    setSuggestions(suggestions);
  });
}

To improve the suggestion results it is also possible to filter for countries or to add a location context using the current map center coordinate.

The onKeyDown event handler triggers the geocoding of the input and handles the navigation within the drop down list:

const geocodeRequest = (input, apiKey) => `https://api.myptv.com/geocoding/v1/locations/by-text?searchText=${input}&apiKey=${apiKey}`;

const handleKeyboardNavigation = (event) => {
  switch (event.nativeEvent.code) {
    case "Enter":
      geocode(address);
      
      ...
  }
}

const geocode = (input) => {
  fetch(
    geocodeRequest(input, apiKey)
  ).then(
    response => response.json()
  ).then(({ locations }) => {
    props.onSearch(locations);
  });
}

How to integrate the search control

To integrate an example search control into your app, you need to migrate the files SearchInput.js, SearchInput.css, Dropdown.js and Dropdown.css into your project.

import { SearchInput } from "./SearchInput";
import { VectorMap } from "./VectorMap";

return(
  <>
    <SearchInput
      apiKey={apiKey}
      maximumNumberOfSuggestions={5}
      onSearch={(locations) => { setLocations(locations) }}
    />
    <VectorMap
      apiKey={apiKey}
      locations={locations}
    />
  <>
);

Using the onSearch callback function you can exchange a list of geocoded locations with the map or result list component.