How to make an ellipse in react-leaflet?

Question

I want to make an ellipse in react-leaflet. And I have checked the question How can one make an ellipse in react-leaflet?

When I make a file like "ellipse.js" and paste the code in the file, it seems doesn't work.

Can anybody help to take a look at this?

thank you.

Proceed

Answer 1

Leaflet.Ellipse plugin could be integrated with react-leaflet like this:

a) install leaflet-ellipse package:

npm i leaflet-ellipse

b) introduce the following component to draw an ellipse:

import React, { Component } from "react";
import L from 'leaflet';
import "leaflet-ellipse";
import { withLeaflet } from "react-leaflet";

class Ellipse extends Component {
  componentDidMount() {
    const { latlng, radii, tilt, options } = this.props;
    const { map } = this.props.leaflet;
    L.ellipse(latlng, radii, tilt,options).addTo(map);
  }

  render() {
    return null;
  }
}

export default withLeaflet(Ellipse);

Usage

class MapExample extends React.Component {
  render() {
    const { zoom, center } = this.props;
    return (
      <div>
        <Map center={center} zoom={zoom}>
          <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
          <Ellipse
            latlng={[51.505, -0.05]}
            radii={[500, 200]}
            tilt={0}
            options={{
              color: "green",
              fillColor: "green",
              fillOpacity: 0.5
            }}
          />
          <Ellipse
            latlng={[51.508, -0.12]}
            radii={[750, 400]}
            tilt={135}
            options={{
              color: 'red', 
              fillColor: 'red',
              fillOpacity: 0.5
            }}
          />
        </Map>
      </div>
    );
  }
}

Demo

Defeasible

Answer 2

If you trying to show/hide this layer in React Hooks, you can use

import React, { useState, useEffect } from "react";
import L from 'leaflet';
import "leaflet-ellipse";
import { MapLayer, withLeaflet } from "react-leaflet";

function Ellipse({ latlng, radii, tilt, options, leaflet, show }) {
  const [layer, setLayer] = useState(null);
  const { map } = leaflet;

  useEffect(() => {
    if (show === false) {
      map.removeLayer(layer);
    } else {
      const x = L.ellipse(latlng, radii, tilt, options).addTo(map);
      setLayer(x);
    }
  }, [show])

  return (null);
}

export default withLeaflet(Ellipse);

Voiture

Answer 3

As of version 3, withLeaflet is no longer working.

You will need to use the React-Leaflet Hooks and the React-Leaflet Core API.

I have a Demo on Stack Blitz set up here and your code should look like this:

import { createPathComponent } from "@react-leaflet/core";
import L from "leaflet";
import "leaflet-ellipse";

// Instead of having the Leaflet element creation and updating logic 
// in useEffect callbacks, we can extract them to standalone functions 
// implementing the expected interface:
// Set State:
function createEllipse(props, context) {
  const { center, radii, tilt, options } = props;
  // Create the leaflet.ellipse instance:
  const instance = new L.Ellipse(center, radii, tilt, options);
  // Return the instance and context:
  return {
    instance,
    context: { ...context, overlayContainer: instance }
  };
}

// Update state:
function updateEllipse(instance, props, prevProps) {
  // If props have changed:
  if (
    props.center !== prevProps.center ||
    props.radii !== prevProps.radii ||
    props.tilt !== prevProps.tilt ||
    props.options !== prevProps.options
  ) {
    // Change the Style, LatLng, Radii, and Tilt of our ellipse instance:
    instance.setStyle(props.options);
    instance.setLatLng(props.center);
    instance.setRadius(props.radii);
    instance.setTilt(props.tilt);
  }
}

// Create our component with the React-Leaflet Higher-Level Component Factory,
// the createPathComponent hook. This hook combines the createElementHook, createPathHook,
// and createContainerComponent hooks from the React-Leaflet Core Api:
const Ellipse = createPathComponent(createEllipse, updateEllipse);

export default Ellipse;

Sources:

• Leaflet.Ellipse
• React-Leaflet Hooks
• React-Leaflet Core API

Infatuated