Skip to main content

Show a POI on the Map

In this guide we will

  • listen to the CLICK event on the map
  • reverse geocode the click event in order to display the address under the POI
  • setup a POI with the address to be displayed on the maps
  • send and show the POI on the Map

Follow common setup steps​

If not done already, follow common Introduction page.

Listen to the CLICK event​

Click on the map on the desired location.

You will received a CLICK event message

Payload example of a CLICK event message
{
    "pos": {
        "lonLat": [
            -0.56168682235152,
            47.4624835894391
        ]
    },
    "hitEntities": [],
    "hitFeatures": []
}

Reverse geocode the coordinates​

Build a SitePoint​

Build a SitePoint with the position received.

SitePoint example
{
    "id": "0DD2BD59-B7FF-46DA-AA21-0F38CAE07C89",
    "longitude": -0.56168682235152,
    "latitude": 47.4624835894391
}

Send a ReverseGeocode message​

Build a Reverse geocode message and send it with the SDK SendEvent function.

Payload example of a reverse geocode message
[
    {
        "id": "0DD2BD59-B7FF-46DA-AA21-0F38CAE07C89",
        "longitude": -0.56168682235152,
        "latitude": 47.4624835894391
    }
]

Listen to the Job progress message​

The SDK will send a Job progress event message.

Payload example of a reverse geocode job progress message
{
    "api": "CARTO",
    "jobId": "6E8F86EC-9367-4B3E-A1F2-DC52678BF04A",
    "action": "REVERSE_GEOCODE",
    "progress": "COMPLETE",
    "lastMessage": true,
    "statusCode": 200,
    "message": "Reverse geocode : 1\/1",
    "jobData": [
        {
            "id": "0DD2BD59-B7FF-46DA-AA21-0F38CAE07C89",
            "longitude": -0.56168682235152,
            "latitude": 47.4624835894391,
            "road": {
                "id": "14734175",
                "arcab": 0,
                "arcba": 27540190,
                "roadtype": 0,
                "name": "Rue Fulton",
                "distance": 90,
                "speedcat": 1,
                "roadlevel": 5,
                "geometries": [
                    [
                        -0.562081,
                        47.462442
                    ],
                    [
                        -0.560987,
                        47.462767
                    ]
                ]
            },
            "position": {
                "arc_index": 25995277,
                "percentage": 34,
                "nodeid": 12343460,
                "longitude": -0.561707,
                "latitude": 47.462553,
                "distfromroad": 8,
                "sideofroad": 1
            },
            "address": {
                "number": 10,
                "streetname": "Rue Fulton",
                "suburb": "",
                "zipcode": "49000",
                "cityname": "Angers",
                "region": "Maine-et-Loire",
                "subcountry": "Pays de la Loire",
                "country": "FRA"
            }
        }
    ]
}

Display a POI on the map​

Build a WebviewPOI​

Build a WebviewPOI with a label coming from the reverse geocode.

Example of a POI with a label coming from Reverse geocode
{
    "id": "0DD2BD59-B7FF-46DA-AA21-0F38CAE07C89",
    "pos": {
        "lonLat": [
            -0.56168682235152,
            47.4624835894391
        ]
    },
    "icon": "pin_yellow_syd.png",
    "displayOptions": {
        "width": 18,
        "height": 24,
        "anchor": [
            0,
            1
        ]
    },
    "label": "10 Rue Fulton 49000 Angers"
}

Send a Entitie message​

Build a Entities message and send it with the SDK SendEvent function.

Payload example of a Entites message with a POI
{
    "pois": [
        {
            "id": "0DD2BD59-B7FF-46DA-AA21-0F38CAE07C89",
            "pos": {
                "lonLat": [
                    -0.56168682235152,
                    47.4624835894391
                ]
            },
            "icon": "pin_yellow_syd.png",
            "displayOptions": {
                "width": 18,
                "height": 24,
                "anchor": [
                    0,
                    1
                ]
            },
            "label": "10 Rue Fulton 49000 Angers"
        }
    ]
}

Map display​

w_show-poi