react-leaflet-greatcircle

Leaflet.greatCircle for react-leaflet

Usage no npm install needed!

<script type="module">
  import reactLeafletGreatcircle from 'https://cdn.skypack.dev/react-leaflet-greatcircle';
</script>

README

react-leaflet-greatcircle

Installation

It requires React, Leaflet and react-leaflet to be installed.

npm install react-leaflet-greatcircle

Usage

import React from 'react';
import { Map, TileLayer } from 'react-leaflet';

import GreatCircle from 'react-leaflet-greatcircle';

const position = [51.505, -0.09];

export default () => (
  <Map center={position} zoom={1} style={{ height: 300, width: 800 }}>
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <GreatCircle
      center={position}
      radius={100000} /* In meters */
      fill={false}
      /* You can pass all classic properties of Circle */
    />
  </Map>
);