0

There is a library that runs on react-leaflet v2. https://github.com/somarmeteorologia/react-leaflet-markers But my project uses react-leaflet v3. Therefore, this library needs to be rewritten for the new version. To do this, you need to rewrite this code:

import React from 'react'
import { MapLayer, withLeaflet } from 'react-leaflet'
import PropTypes from 'prop-types'

import { markers } from './core'

import { isEquals } from './utils'

class Markers extends MapLayer {
  constructor(props) {
    super(props)

    this.leafletElement = L.markers(props)
    this.leafletElement
      .attachLayer(props.leaflet.map)
      .attachMarkers(props.markers)
  }

  componentDidMount() {
    super.componentDidMount()
    this.leafletElement.reset()
  }

  createLeafletElement(props) {
    return L.markers(props)
  }

  updateLeafletElement(fromProps, toProps) {
    !isEquals(fromProps.markers, toProps.markers) &&
      this.leafletElement.attachMarkers(toProps.markers)
  }
}

Markers.propTypes = {
  markers: PropTypes.array.isRequired,
  isDebug: PropTypes.bool.isRequired,
  options: PropTypes.shape({})
}

Markers.defaultProps = {
  isDebug: false,
  options: {}
}

export default withLeaflet(Markers)
Aliaksei Valadzko
  • 1
  • Seems like everything went to function based components. The only example you can find of a class based component is on their website. They then proceed to show every bit of documentation and all examples showing only function based components. – Wedge Martin Jan 31 '21 at 16:58
  • I tried playing with this a bit. You're going to need to rewrite the `react-leaflet`markers` package for version 3. I started playing with it, but it was taking too much time. You can read about using the core API to create custom components [in the docs](https://react-leaflet.js.org/docs/core-architecture). Its kind of hard to follow, so you can also read an answer I wrote [here](https://stackoverflow.com/a/65713838/12010984) giving another explanation. [Here's a CSB to get you started](https://codesandbox.io/s/friendly-germain-o61sq), but its not working. Its a good starting point though – Seth Lutske Feb 04 '21 at 03:39

0 Answers0