How to use setRotationAngle in react-leaflet

Question

I am using react-leaflet maps, and run-time I have to update the direction of markers, I am using a library of leaflet-rotatedmarker with react-leaflet. markers direction are working fine on load and reload but not updated after receiving values from props.

<Marker 
 key={1} 
 position={{ lat: position.latitude, lng: position.longitude }} 
 rotationAngle={position.course} 
 rotationOrigin="center" 
 icon={L.icon({
  iconUrl: "xyz.svg", 
  iconSize: [50,50], 
  iconAnchor: [25, 25]})} 
/>

I just want to update rotationAngle on receiving new angle value.

Please Advise, I don't know how to use setRotationAngle in react-leaflet

Thanks

have you tried this? github.com/verdie-g/react-leaflet-rotatedmarker/issues/… — NN796
– NN796, Commented Jul 23, 2019 at 5:55
Please let us know what helped you out? If my link helped you then I should post it as an answer so that others can take benefit from it! — NN796
– NN796, Commented Jul 23, 2019 at 6:31
I was using direct <Marker /> and in given link @nuragic wrap it in component thats why it could update its rotation. — Zia ur Rehman
– Zia ur Rehman, Commented Jul 23, 2019 at 6:38

NN796 · Accepted Answer · 2019-07-23 06:40:37Z

As mentioned here, it's not possible anymore to extend Marker in v2, so basically we need to copy-paste the whole Marker class and add this functionality. FYI, this is my working version of RotatedMarker:

import React from 'react';
import { Marker as LeafletMarker } from 'leaflet';
import { LeafletProvider, withLeaflet, MapLayer } from 'react-leaflet';
import 'leaflet-rotatedmarker';

class RotatedMarker extends MapLayer {
  static defaultProps = {
    rotationOrigin: 'center',
  };

  createLeafletElement(props) {
    const el = new LeafletMarker(props.position, this.getOptions(props));
    this.contextValue = { ...props.leaflet, popupContainer: el };
    return el;
  }

  updateLeafletElement(fromProps, toProps) {
    if (toProps.position !== fromProps.position) {
      this.leafletElement.setLatLng(toProps.position);
    }
    if (toProps.icon !== fromProps.icon) {
      this.leafletElement.setIcon(toProps.icon);
    }
    if (toProps.zIndexOffset !== fromProps.zIndexOffset) {
      this.leafletElement.setZIndexOffset(toProps.zIndexOffset);
    }
    if (toProps.opacity !== fromProps.opacity) {
      this.leafletElement.setOpacity(toProps.opacity);
    }
    if (toProps.draggable !== fromProps.draggable) {
      if (toProps.draggable === true) {
        this.leafletElement.dragging.enable();
      } else {
        this.leafletElement.dragging.disable();
      }
    }
    if (toProps.rotationAngle !== fromProps.rotationAngle) {
      this.leafletElement.setRotationAngle(toProps.rotationAngle);
    }
    if (toProps.rotationOrigin !== fromProps.rotationOrigin) {
      this.leafletElement.setRotationOrigin(toProps.rotationOrigin);
    }
  }

  render() {
    const { children } = this.props;
    return children == null || this.contextValue == null ? null : (
      <LeafletProvider value={this.contextValue}>{children}</LeafletProvider>
    );
  }
}

export default withLeaflet(RotatedMarker);

Source

I could not make this work with react-leaflet version 3, any help there?

Collectives™ on Stack Overflow

How to use setRotationAngle in react-leaflet

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related