Map component

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component description

The Map component allows you to use map data from various map services, (for example, OpenStreetMap) and add your own layers and geospatial objects.

Use the Map component from the list of Latest components.

You can configure the Map component in the Administrative portal web-interface > UI forms section.

  1. Sign in to the Administrative portal.

  2. Open the Model UI forms section.

  3. Create a new form.

  4. Open the Builder tab.

  5. Go to Components > Updated.

  6. Find the Map component and drag it onto the modeling canvas.

    map 01

  7. In the component’s settings, open the Display tab.

  8. In the Label field, specify your map field’s business name—​for example, Map.

    map 1

  9. Open the Data tab and configure the following parameters:

    • In the Base Layers section, specify the map service to use:

      • Url: Specify the map service URL. For example, to download map tiles from the OpenStreetMap server, use https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png.

      • Name: Specify the name of the layer.

      • Attribution: Specify the attribution text for the layer if required.

      • Max Zoom: Specify the maximum zoom level to display.

    • The Overlay Search Field and Search Zoom parameters are used to search geodata on the map. You can specify the name of the field to search when a user enters a query and the zoom level at which the search results will be displayed.

    • In the Overlay Layers section, you can specify custom layers to overlay the base layer. For example, you can use data from your database to show the locations of certain objects on the map. In this case, you need to specify the URL of the GeoServer where your geodata is stored and the table and view names in the DB to display the geodata on the map.

      You can specify the GeoServer’s URL as either a relative or full address:

      If you specify the full address of the GeoServer, you can view points and search objects on the map directly in the UI form builder.

      map 2

      The Details Title Path field is used to display details about the geospatial objects shown on the map. You can specify the path to a field in your database that contains the name of the object (Name) to display this information in the details window when someone clicks the object on the map. The Address parameter is used to display the address of the geospatial object.

      map 2 1

  10. Configure geocoding on the Data tab:

    What is geocoding?

    Geocoding is the process of converting addresses or other descriptions of places into geographic coordinates (latitude and longitude). In our case, the geocoding functionality uses the Nominatim service, which is based on OpenStreetMap data.

    • Enable Geocode: Activate geocoding and connect to Nominatim. Use this option to enable or disable the geocoding feature in the app.

    • Geocode Search Placeholder: The text displayed in the geocode search field by default. Use this option to ask users to enter an address or location to search for.

    • Geocode Search Url: The URL used to send requests to the Nominatim server for geocoding:

      https://nominatim.openstreetmap.org/search?format=json&q={s}

      The {s} variable contains the user query from the search field.

      You can use other services as well.

    • Geocode Search Zoom: The map’s zoom level after successful geocoding. For example, 12 means that the map will be displayed with a medium level of detail, providing users with an overview of the area.

    • Geocode Marker Radius: The radius of the marker that displays geocoding results on the map. For example, 10 indicates an average marker size, which helps users easily see it on the map.

      map 4

  11. Open the API tab and specify the name of the property to use in API requests in the Property Name field—​for example, entityLocation.

    map 3

  12. Click Save to save your changes and close the component’s settings.

  13. Check if the map is working properly. You can find a specific object on the map manually or use the search and geocoding options.

    map 5

    map 6

    map 7

2. Related pages