Intro
The App Connect Geo Search component adds geocoding support, allowing for address lookup or geosearching in your web application. It includes controls that can be easily embedded into your Leaflet map.
There are two ways in which the Geo Search component can be used. Direct usage, for example for address forms, or embedded in a leaflet map to search for points of interest.
Geo Search in Leaflet Maps
You can easily add the Geo Search component in your Leaflet Map. Right click the map in the App Structure:
Select Leaflet Search:
The Leaflet Search is now added on our map:
You can find its properties in the Properties inspector.
The default provider is Open Street Map, but you can also choose to use any of the other providers such as Bing, Esri, Geocode Earth, Google, LocationIQ, OpenCage and others. Most of those providers do however require API keys. See the documentation pages on the relevant providers on how to obtain these keys.
You can also set a language and limit the search results to specific countries:
Select the appearance of the search control. There are two visual styles of this control - show it under a button or show it permanently as a search bar:
There are a lot of customization options available:
Show Marker and Show Popup - whether or not to show a marker and/or open a popup with the location text.
Retain Zoom Level is a setting that fixes the zoom level. Default behavour is to zoom and pan to the search result. With Retain Zoom Level enabled, the map is only panned.
Animate Zoom - whether or not to animate the pan/zoom.
Auto complete can be enabled and a Delay in milliseconds can be set. A little delay is required so that a request is not sent on every keystroke.
Auto Close closes the result list if a result is selected by click/enter.
Keep Result is used to keep the selected result in the search field. This prevents markers to disappear while using the Auto Close option.
Update Map - whether or not the map should re-center on selection.
You can set custom texts for the Search Label, Clear Search and Not found message:
And you are done:
Geo Search in a Form
You can use the Geo Search component stand alone and not inside a map as well. We will show you how to use a form field to search for an address and fill the selected address into the form inputs.
We created a form on our page, it contains info about the name and address of the user:
First let's add the Geo Search component on our page:
Then setup its options - choose a provider, set language and limit the address search to specific countries if needed:
Enable the Address Details option, this will be required to get details about the address such as street, number, city, post code and others for our form:
We will use the Address field as a search field for the address. Select this input and add new dynamic event. Select Keyboard on Key Up:
And click the dynamic action picker button:
Select Geo Search > Search and add it:
Then click the dynamic data picker to select a value for the search:
This needs to be the address input value:
Click Select when you are done:
We also set a debounce of 500ms so that the search is not triggered on each key press, but after a little delay:
Now we have our address input sending the entered text to the Geo Search component. The next step is to show the results which the Geo Search component finds.
You can show these in a repeat region, just as you do for other data sources.
We will use a list component here. Add new element:
Select List Group:
Add new element inside the list group:
Add a list item:
Now select the list group and open the Convert To menu. Select Repeat Children:
And pick an expression for the repeat children:
Select Results under the Geo Search component:
Then double click the list item and add dynamic data:
Here, we want to show the address found, so we select Label:
The next step is to fill the address inputs, when an address is clicked in this list.
With the list item still selected, add new dynamic event:
Select Mouse > Click:
And click the dynamic action picker:
We start with the Street. Select Street input > Set Value:
And pick a dynamic value for the street:
Under the repeat region in the data picker, expand Raw > Address and select road:
Do the same for the rest of the address inputs - number, city, post code and country - select the appropriate address parts returned in the repeat region:
When you are done binding the values to the address inputs, select Geo Search > Clear Results. This will clear the list after you pick an address:
Click Select:
Save your page and you are done:
You can see that when searching for an address and selecting one automatically fills the address inputs:
