diff --git a/README.md b/README.md
index e1942e5..f5034a3 100644
--- a/README.md
+++ b/README.md
@@ -2,34 +2,37 @@
[](https://coveralls.io/github/aviklai/react-leaflet-kml?branch=master)
[](https://www.npmjs.com/package/react-leaflet-kml)
-React leaflet wrapper of leaflet-kml.
+React leaflet v3 wrapper of leaflet-kml.
-Installation instructions:
+## 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 { Map } from 'react-leaflet';
+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 class App extends React.Component {
- render() {
- return (
-
- );
- }
-}
+
+ );
+};
```
## Basic usage example
-https://codesandbox.io/s/basic-usage-itkpv
\ No newline at end of file
+https://codesandbox.io/s/basic-usage-react-leaflet-v3-pzcvt
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 534f409..ebe7a5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "react-leaflet-kml",
- "version": "1.0.0",
+ "version": "2.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -159,15 +159,6 @@
"@babel/helper-plugin-utils": "^7.0.0"
}
},
- "@babel/runtime": {
- "version": "7.3.4",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
- "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
- "dev": true,
- "requires": {
- "regenerator-runtime": "^0.12.0"
- }
- },
"@babel/template": {
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.2.2.tgz",
@@ -414,6 +405,12 @@
"@types/yargs": "^12.0.9"
}
},
+ "@react-leaflet/core": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.0.tgz",
+ "integrity": "sha512-pwJJQjlv6TV2yBmhV+yY1N/fQYhZdQSquBM0t6ODQSG4cEHvl5VoHPYNkgXBBz6EqxFMbS9QGxrB1VcxV4mihQ==",
+ "dev": true
+ },
"@types/babel__core": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.0.tgz",
@@ -456,9 +453,9 @@
}
},
"@types/geojson": {
- "version": "7946.0.6",
- "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.6.tgz",
- "integrity": "sha512-f6qai3iR62QuMPPdgyH+LyiXTL2n9Rf62UniJjV7KHrbiwzLTZUKsdq0mFSTxAHbO7JvwxwC4tH0m1UnweuLrA==",
+ "version": "7946.0.7",
+ "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+ "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
"dev": true
},
"@types/istanbul-lib-coverage": {
@@ -483,9 +480,9 @@
"dev": true
},
"@types/leaflet": {
- "version": "1.4.3",
- "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.3.tgz",
- "integrity": "sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==",
+ "version": "1.5.19",
+ "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.19.tgz",
+ "integrity": "sha512-ZAKqfvdU/+KFoCpf8aUba09F8mfSc8R2esq++Cha3E2DgwS5K/I/4eJ+0JylrVHZivgY7PSAeXFv/izP+81/MQ==",
"dev": true,
"requires": {
"@types/geojson": "*"
@@ -522,20 +519,10 @@
"@types/react": "*"
}
},
- "@types/react-leaflet": {
- "version": "2.2.0",
- "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.2.0.tgz",
- "integrity": "sha512-Fe8To4p+kU8ZvSl7qfU83TKdi96uy65PpAOH3WC2UH3x2DiMoFsNpRnEbtZd1OUedlSbtlu3u823KSlWZoVa1A==",
- "dev": true,
- "requires": {
- "@types/leaflet": "*",
- "@types/react": "*"
- }
- },
"@types/react-test-renderer": {
- "version": "16.8.1",
- "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.8.1.tgz",
- "integrity": "sha512-8gU69ELfJGxzVWVYj4MTtuHxz9nO+d175XeQ1XrXXxesUBsB4KK6OCfzVhEX6leZWWBDVtMJXp/rUjhClzL7gw==",
+ "version": "16.9.3",
+ "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.3.tgz",
+ "integrity": "sha512-wJ7IlN5NI82XMLOyHSa+cNN4Z0I+8/YaLl04uDgcZ+W+ExWCmCiVTLT/7fRNqzy4OhStZcUwIqLNF7q+AdW43Q==",
"dev": true,
"requires": {
"@types/react": "*"
@@ -1967,15 +1954,6 @@
}
}
},
- "hoist-non-react-statics": {
- "version": "3.3.0",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
- "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
- "dev": true,
- "requires": {
- "react-is": "^16.7.0"
- }
- },
"hosted-git-info": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
@@ -3675,27 +3653,42 @@
"dev": true
},
"react-leaflet": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-2.2.1.tgz",
- "integrity": "sha512-q95486MsoKYmHFRDJyKRY/wdlKbaiTBfq23rfcG9WwsGNxaQuHLcIhxj3m9s4PiG3DImhz3Qfov6UUrsf+yMpw==",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.0.0.tgz",
+ "integrity": "sha512-ePv7J+S3XIMY1c357NXhSxMp09L7GUKMUINJEFcpLAfec4FUw6YDqC1SgkNZmMIXkg0IRNJxKHI1qwTnBL7FUQ==",
"dev": true,
"requires": {
- "@babel/runtime": "^7.3.1",
- "fast-deep-equal": "^2.0.1",
- "hoist-non-react-statics": "^3.3.0",
- "warning": "^4.0.3"
+ "@react-leaflet/core": "^1.0.0"
}
},
"react-test-renderer": {
- "version": "16.8.4",
- "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.4.tgz",
- "integrity": "sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==",
+ "version": "16.14.0",
+ "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
+ "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
"dev": true,
"requires": {
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
- "react-is": "^16.8.4",
- "scheduler": "^0.13.4"
+ "react-is": "^16.8.6",
+ "scheduler": "^0.19.1"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+ "dev": true
+ },
+ "scheduler": {
+ "version": "0.19.1",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+ "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+ "dev": true,
+ "requires": {
+ "loose-envify": "^1.1.0",
+ "object-assign": "^4.1.1"
+ }
+ }
}
},
"read-pkg": {
@@ -3743,12 +3736,6 @@
"util.promisify": "^1.0.0"
}
},
- "regenerator-runtime": {
- "version": "0.12.1",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
- "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
- "dev": true
- },
"regex-not": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -4581,9 +4568,9 @@
}
},
"typescript": {
- "version": "3.8.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
- "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+ "version": "4.0.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz",
+ "integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
"dev": true
},
"uglify-js": {
@@ -4761,15 +4748,6 @@
"makeerror": "1.0.x"
}
},
- "warning": {
- "version": "4.0.3",
- "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
- "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
- "dev": true,
- "requires": {
- "loose-envify": "^1.0.0"
- }
- },
"webidl-conversions": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
diff --git a/package.json b/package.json
index 3ba8a16..e774972 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-leaflet-kml",
- "version": "1.0.4",
+ "version": "2.0.0",
"description": "React leaflet wrapper of leaflet-kml",
"main": "lib/index.js",
"types": "lib/index.d.ts",
@@ -20,6 +20,9 @@
"postversion": "git push && git push --tags",
"cover": "jest --config jestconfig.json --coverage && cat ./coverage/lcov.info | coveralls"
},
+ "publishConfig": {
+ "registry": "https://registry.npmjs.org/"
+ },
"repository": {
"type": "git",
"url": "git+https://github.com/aviklai/react-leaflet-kml.git"
@@ -29,7 +32,8 @@
"Leaflet",
"kml",
"leaflet-kml",
- "typescript"
+ "typescript",
+ "react-leaflet-v3"
],
"author": "",
"license": "MIT",
@@ -38,30 +42,29 @@
},
"homepage": "https://github.com/aviklai/react-leaflet-kml#readme",
"peerDependencies": {
- "leaflet": "^1.3.0",
- "react": "^16.0.0",
- "react-dom": "^16.0.0",
- "react-leaflet": "^2.0.0"
+ "leaflet": "^1.5.0",
+ "react": "^16.8.0",
+ "react-dom": "^16.8.0",
+ "react-leaflet": "^3.0.0"
},
"devDependencies": {
"@types/jest": "^24.0.9",
- "@types/leaflet": "^1.4.1",
+ "@types/leaflet": "^1.5.0",
"@types/react": "^16.8.7",
"@types/react-dom": "^16.8.2",
- "@types/react-leaflet": "^2.2.0",
- "@types/react-test-renderer": "^16.8.1",
+ "@types/react-test-renderer": "^16.9.3",
"coveralls": "^3.0.3",
"jest": "^24.3.0",
"leaflet": "^1.4.0",
"prettier": "^1.16.4",
"react": "^16.8.4",
"react-dom": "^16.8.4",
- "react-leaflet": "^2.2.1",
- "react-test-renderer": "^16.8.4",
+ "react-leaflet": "^3.0.0",
+ "react-test-renderer": "^16.14.0",
"ts-jest": "^24.0.0",
"tslint": "^5.13.1",
"tslint-config-prettier": "^1.18.0",
- "typescript": "^3.8.3",
+ "typescript": "^4.0.5",
"uglify-js": "^3.5.15"
},
"dependencies": {
diff --git a/src/__tests__/ReactLeafletKml.test.tsx b/src/__tests__/ReactLeafletKml.test.tsx
index 19e8ea2..e9db159 100644
--- a/src/__tests__/ReactLeafletKml.test.tsx
+++ b/src/__tests__/ReactLeafletKml.test.tsx
@@ -1,16 +1,20 @@
import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { MapContainer } from 'react-leaflet';
import ReactLeafletKml from '../index';
-import { Map } from 'react-leaflet';
import * as ReactTestUtils from 'react-dom/test-utils';
test('ReactLeafletKml', () => {
expect(ReactLeafletKml);
- const component = ReactTestUtils.renderIntoDocument(
-
+ const dom = ReactTestUtils.renderIntoDocument(
+
+
+
+
+
) as any;
- expect(component.leafletElement._container).toBeDefined()
+ const component = ReactDOM.findDOMNode(dom.childNodes[0]) as any;
+ expect(component).toBeInstanceOf(HTMLElement);
});
diff --git a/src/index.ts b/src/index.ts
index c1a1f74..9d99f4d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,38 +1,44 @@
-// @ts-nocheck
-import * as React from 'react';
import * as L from 'leaflet';
-import { ContextProps, MapLayer, withLeaflet } from 'react-leaflet';
+import { LayerProps, LeafletContextInterface, createLayerComponent } from '@react-leaflet/core';
import 'leaflet-kml';
+import { useEffect } from 'react';
-interface IProps extends ContextProps {
+interface IProps {
kml: XMLDocument;
}
-class ReactLeafletKml extends MapLayer {
- public createLeafletElement(props: IProps) {
- const { kml } = props;
- this.leafletElement = new L.KML(kml);
- if (this.props.leaflet.map.options.preferCanvas) {
- setTimeout((map: LeafletContext.map) => {
- // Handling react-leaflet bug of canvas renderer not updating
- map._renderer._update();
- }, 0, this.props.leaflet.map)
- }
- return this.leafletElement;
- }
+const updateOnCanvas = (map: LeafletContextInterface["map"]) => {
+ if (map.options.preferCanvas) {
+ // @ts-ignore
+ map._renderer._update();
+ }
+}
- public updateLeafletElement () {
- if (this.props.leaflet.map.options.preferCanvas) {
- this.props.leaflet.map._renderer._update();
- }
- }
+
+const createLeafletElement = (props: IProps, context: LeafletContextInterface) => {
+ useEffect(() => {
+ return () => {
+ updateOnCanvas(context.map);
+ }
+ }, []);
- public componentWillUnmount() {
- super.componentWillUnmount();
- if (this.props.leaflet.map.options.preferCanvas) {
- this.props.leaflet.map._renderer._update();
- }
+ const { kml } = props;
+ // @ts-ignore
+ const instance = new L.KML(kml);
+ if (context.map.options.preferCanvas) {
+ setTimeout((map: LeafletContextInterface["map"]) => {
+ // Handling react-leaflet bug of canvas renderer not updating
+ // @ts-ignore
+ map._renderer._update();
+ }, 0, context.map)
}
+ return { instance, context };
+}
+
+const updateLeafletElement = (instance: L.Layer, props: IProps, prevProps: IProps) => {
+ // @ts-ignore
+ updateOnCanvas(instance._map);
}
-export default withLeaflet(ReactLeafletKml);
\ No newline at end of file
+
+export default createLayerComponent(createLeafletElement, updateLeafletElement);
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 7327402..9296408 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,8 @@
"declaration": true,
"outDir": "./lib",
"strict": true,
- "jsx": "react"
+ "jsx": "react",
+ "esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*"]