0

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: enter image description here

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!

0

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

enter image description here

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.