Markers And Clusters

The markers are actually managed by the Map Render component:

Render Markers and Clusters

Use the geoJsonModeSelection as Pointers to render Markers or Clusters:

import { MapRender } from "@matchplat/crono";

<MapRender geoJsonModeSelection={"Pointers"} />;

Pointers will render markers or clusters based on the count property of the geoJson file.
(a count with a value higher than 1 is a cluster)

{
    type: 'Feature',
    properties: {
      id: 'companyId',
      Tooltip: { tooltip: <TooltipComponent />, html: '<a href="https://matchplat.com" hreflang="en">Website</a>' },
      //will render a Marker
      count: 1,
      icons: { people: true, like: false }
        },
        geometry: {
          type: 'Point',
          coordinates: {lat:-50.324462890625, lng:-10.024695711685304}
        }
},
{
    type: 'Feature',
    properties: {
      id: 'companyId',
      //will render a Cluster
      count: 50,
      icons: { people: true, like: false }
        },
        geometry: {
          type: 'Point',
          coordinates: {lat:-40.324462890625, lng:-9.024695711685304}
        }
},

Tooltip

To generate a tooltip that will render when a marker or cluster is clicked, you must use the Tooltip property of the geoJson file passed to the Map Render component:

{
    type: 'Feature',
    properties: {
      ...
       Tooltip: { tooltip: <TooltipComponent />, html: '<a href="https://matchplat.com" hreflang="en">Website</a>' },
      ...
},

the Tooltip can be HTML data or a JSX file.

Them html prop is used to pass an HTML string to add actions, since the library is not using React and It's just rendering HTML.

Fly to a clicked marker or cluster

Passing true to the centerClickedMarker prop in Map Render, like this:

<MapRender centerClickedMarker={true} />

The Map will fly to the clicked marker location, with a default animation.

Cached Pointers

Use the geoJsonModeSelection as PointersCache to render Markers or Clusters that will be cached:

import { MapRender } from "@matchplat/crono";

<MapRender geoJsonModeSelection={"PointersCache"} />;

Pointers will render markers or clusters based on the count property of the geoJson file.
(a count with a value higher than 1 is a cluster).
With the cached version of Pointers the previous markers and clusters will be cached on the map (overlaps may occur).