[GIS] react-leaflet and clustering

Question

I am able to successfully map my data points using 'and` on a map:

import React, { Component } from 'react';
import { Map, CircleMarker, TileLayer, Tooltip, AttributionControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";

...

        <Map
          style={{ height: "480px", width: "100%", opacity: "0.9" }}
          zoom={4.25}
          center={[37.7687477, -99.6820275]}
          attributionControl={false}>
          <TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png"
            attribution="Map by <a href='http://stamen.com' target='_blank'>Stamen Design</a> | &copy; <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
          />

          <AttributionControl position="bottomright" prefix={false} />

          {this.state.dataMaps.map((dataItem, k) => {
            let { coordinates, company, url, loc } = dataItem;
            return (
              <CircleMarker
                key={k}
                center={[coordinates[0], coordinates[1]]}
                fillOpacity={0.5}
                stroke={true}>

                <Tooltip direction="right" offset={[-8, -2]} opacity={1}>
                  <span><a href={url}>{company}</a></span>
                  <span>{loc}</span>
                </Tooltip>
              </CircleMarker>);
          })
          }
        </Map>

And it renders as follows:

However, I have a lot of data points that have the same City (e.g. San Francisco), and therefore the same lat/long coordinates — so I need help clustering.

I have had a hard time finding sample code or tutorials that make sense to me.

It seems like there's no out-of-the-box clustering in react-leaflet, and I need to use the https://github.com/Leaflet/Leaflet.markercluster plugin, correct? Would I also need the "react wrapper" from https://github.com/YUzhva/react-leaflet-markercluster or is that optional?

Can anyone point me to a tutorial or documentation or roughly guide me on whether it is possible to use <CircleMarker> and <Tooltip> and make a cluster using Leaflet.markercluster ?

Thanks in advance!

Answer 1

Here's what I did -- followed the install instructions at: https://github.com/YUzhva/react-leaflet-markercluster#readme

Some of the demos here were also helpful: https://yuzhva.github.io/react-leaflet-markercluster/

I used both https://github.com/Leaflet/Leaflet.markercluster and https://github.com/YUzhva/react-leaflet-markercluster

Specifically, I was getting lots of errors if I didn't install his @next:

yarn add react-leaflet-markercluster@next 

Here's my [relevant] code:

import React, { Component } from 'react';
import { Map, CircleMarker, TileLayer, Tooltip, AttributionControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import MarkerClusterGroup from 'react-leaflet-markercluster';
require('react-leaflet-markercluster/dist/styles.min.css');

class Maps extends Component {

...

  render() {

    return (
      <div>
        <Map
          style={{ height: "480px", width: "100%", opacity: "0.9" }}
          zoom={4.25}
          maxZoom={20}
          center={[37.7687477, -99.6820275]}
          attributionControl={false}>
          <TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png"
            attribution="Map by <a href='http://stamen.com' target='_blank'>Stamen Design</a> | &copy; <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
          />

          <AttributionControl position="bottomright" prefix={false} />

          <MarkerClusterGroup
            spiderfyDistanceMultiplier={1}
            showCoverageOnHover={false}
          >
            {this.state.dataMaps.map((dataItem, k) => {
              let { coordinates, company, url, loc } = dataItem;
              return (
                <CircleMarker
                  key={k}
                  center={[coordinates[0], coordinates[1]]}
                  position={[coordinates[0], coordinates[1]]}
                >
                  <Tooltip direction="right" offset={[-8, -2]} opacity={1}>
                    <span><a href={url}>{company}</a></span>
                    <span>{loc}</span>
                  </Tooltip>
                </CircleMarker>);
            })}
          </MarkerClusterGroup>

        </Map>
      </div>
    );
  }
}

export default Maps;

I was able to get <Circlemarker> working only if it had both center= and position= per https://github.com/YUzhva/react-leaflet-markercluster/issues/31 and https://github.com/Leaflet/Leaflet/issues/6257#issuecomment-526229644