How to display data on a map

We provide a list of all locations matching search parameters at /events-api/v2/places. Within the item:item array in the response are objects such as the following:

"type": "Place",
"geo": {
"type": "GeoCoordinates",
"latitude": 51.497063,
"longitude": -0.221201,
"imin:distanceFromGeoQueryCenter": {
"type": "QuantitativeValue",
"value": 19.002,
"unitCode": "KMT"
"name": "Brook Green Tennis Club",
"address": {
"type": "PostalAddress",
"postalCode": "W6 7BD",
"addressRegion": "Middlesex",
"streetAddress": "Brook Green",
"addressCountry": "GB",
"addressLocality": "LONDON"
"imin:event": {
"type": "imin:RestrictedCollection",
"id": "[radial]=51.497063,-0.221201,0&startDate[lte]=2018-09-17T10:45:59Z&mode=discovery-geo",
"imin:totalItems": 3

Breakdown of fields

  • geo: this object contains the coordinates for placing a pin on the map

  • imin:event: this Collection identifies all sessions available at the location

    • id: a URL returning all available EventSeries items at the location

    • imin:totalItems: the number of available EventSeries items at the location

  • imin:distanceFromGeoQueryCenter: provides information on the distance in kilometres from the search coordinates to the location

Ways to attach a URL to a pin

The URL for returning all sessions at a location is accessible at JSONPath:$['imin:event'].id and can be used in different ways according to your UI preferences. Two suggestions are:

  • Use the URL as a link so that clicking the pin opens a new window displaying your search page with the relevant results.

  • Send an AJAX request to the URL when the user hovers over/clicks on the pin in order to populate a popover with results.

Similarly the number of total sessions could be displayed in a popover by drawing the number from $['imin:event']['imin:totalItems'].