Install Overlapping Marker Spiderfier for Leaflet with React

Question

I am new to React. I try to use the npm module overlapping-marker-spiderfier-leaflet in a react project.

I follow the instruction at https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet so I do npm install -S overlapping-marker-spiderfier-leaflet and then import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet'; in my project.

I then do var oms = new OverlappingMarkerSpiderfier(this.map); but I get :

Unhandled Rejection (TypeError): WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet.OverlappingMarkerSpiderfier is not a constructor

Do you know how I could solve this error. Do you think I could rather use the minified js to use this plugin? How so?

Answer 1

overlapping-marker-spiderfier-leaflet library doesn't export anything in an ES6 compatible way. But it could be directly imported as a file from the library's dist folder:

import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;

Example

import React from "react";
import {
  withLeaflet,
  MapLayer
} from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;

class Spiderfy extends Component {

  componentDidMount(props) {
    const { map } = props.leaflet;
    const oms = new OverlappingMarkerSpiderfier(map);
    //...
  }

  //...
}

This demo demonstrates how to integrate overlapping-marker-spiderfier-leaflet into react-leaflet.