Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-leaflet-kml

aviklai4.6kMIT2.1.2TypeScript support: included

React leaflet wrapper of leaflet-kml

React, Leaflet, kml, leaflet-kml, typescript, react-leaflet-v3

readme

Build Status Coverage Status npm version

React leaflet v3 and v4 wrapper of leaflet-kml.

Requirements

The current version of this library supports React Leaflet v3 and v4.
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'; // react-leaflet-kml must be loaded AFTER react-leaflet

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