Skip to main content

Markers And Clusters

The markers are actually managed by the Map Render component:

Render Markers and Clusters

Crono Spinner
Crono Spinner

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

Crono Spinner

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).