react-leaflet-kml

React leaflet wrapper of leaflet-kml

Usage no npm install needed!

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

README

Build Status Coverage Status npm version

React leaflet v3 wrapper of leaflet-kml.

Requirements

The current version of this library supports React Leaflet v3.
If you are using React Leaflet v2, please use the previous version of this library. Please see the documentation here:
https://github.com/aviklai/react-leaflet-kml/tree/v1

Installation instructions:

run npm install --save react-leaflet-kml

Usage example:

import * as React from 'react';
import { MapContainer } from 'react-leaflet';
import ReactLeafletKml from 'react-leaflet-kml';

const kmlText='YOUR KML FILE AS TEXT';
const parser = new DOMParser();
const kml = parser.parseFromString(kmlText, 'text/xml');

export const App = () => { 
  return (
      <MapContainer zoom={15} center={[45, 20]}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />
        <ReactLeafletKml kml={kml} />
      </MapContainer>
  );
};

Basic usage example

https://codesandbox.io/s/basic-usage-react-leaflet-v3-pzcvt