leaflet-extras · bennypowers · Jun 11, 2020 · Jun 12, 2020 · Jun 12, 2020 · Jun 12, 2020
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@pwrs"
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,7 @@
-/bower_components
-**/*~
+coverage
+node_modules
+
+*.js
+*.js.map
+*.d.ts
+*.tgz
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+!*.js
+!*.js.map
+!*.d.ts
diff --git a/.project b/.project
diff --git a/.settings/.jsdtscope b/.settings/.jsdtscope
diff --git a/.settings/org.eclipse.wst.jsdt.ui.superType.container b/.settings/org.eclipse.wst.jsdt.ui.superType.container
diff --git a/.settings/org.eclipse.wst.jsdt.ui.superType.name b/.settings/org.eclipse.wst.jsdt.ui.superType.name
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "files.exclude": {
+    // "**/*.js": {"when": "$(basename).ts"},
+    // "**/*.d.ts": {"when": "$(basename).ts"},
+    // "**/*.js.map": true
+  },
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,27 @@
+Copyright (c) 2020
+Benny Powers
+
+Copyright (c) 2014-2016
+Hendrik Brummermann, Prateek Saxena
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are
+permitted provided that the following conditions are met:
+
+   1. Redistributions of source code must retain the above copyright notice, this list of
+      conditions and the following disclaimer.
+
+   2. Redistributions in binary form must reproduce the above copyright notice, this list
+      of conditions and the following disclaimer in the documentation and/or other materials
+      provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/CHANGES.md → OLD_CHANGELOG.md b/CHANGES.md → OLD_CHANGELOG.md
diff --git a/README.md b/README.md
@@ -1,39 +1,35 @@
 # leaflet-map
 
-*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com) 
+*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com)
 JavaScript library via html elements.
 
 Please have a look at the [demo](https://leaflet-extras.github.io/leaflet-map/demo.html) or the [api documentation](https://leaflet-extras.github.io/leaflet-map/doc.html#leaflet-map).
 
-Most of the options documented in the Leaflet reference are exported as html attributes. 
+Most of the options documented in the Leaflet reference are exported as html attributes.
 All events are mapped into html events of the same name.</p>
-For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt; 
+For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt;
 to define the view and zoom level.
 
 
-Web-components are an emerging standard which is based on Custom Elements, Shadow DOM, HTML Imports and Web Animations.
-[Polymer](http://www.polymer-project.org/docs/start/tutorial/intro.html) is a library which simplifies working with web-components. It includes a compatibility layer for browsers which
-do not yet support web-components natively, yet.
-
-
 ## Quickstart Guide
 
-Make leaflet maps using declarative [Polymer](http://polymer-project.org) web components.
+Make leaflet maps using declarative web components.
 To get started read the [documentation](http://leaflet-extras.github.io/leaflet-map/doc.html)
 or checkout the [demo](http://leaflet-extras.github.io/leaflet-map/).
 
-Install this web component using [Bower](http://bower.io):
+Install this web component using [npm](https://npm.im/leaflet-element):
 
 ```
-bower install leaflet-map
+npm i -S leaflet-element
 ```
 
 Import the main component and start creating your map:
 
+```js
+import 'leaflet-element'
+```
 ```html
   <head>
-	<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="leaflet-map.html">
     <style>
       html, body {
         margin: 0;
@@ -61,7 +57,7 @@ Import the main component and start creating your map:
 
 Although leaflet-map is still under heavy development, it is already fully usable.
 
-List of demos: 
+List of demos:
 
 * [leaflet-map](https://leaflet-extras.github.io/leaflet-map/demo.html#view) (L.map)
 * [leaflet-marker](https://leaflet-extras.github.io/leaflet-map/demo.html#marker) (L.marker)
@@ -78,51 +74,20 @@ List of demos:
 
 Please have a look at the [change log](https://github.com/nhnb/leaflet-map/blob/master/CHANGES.md), for recent developments.
 
-## Dependencies
-
-leaflet-map depends on webcomponentsjs in ../webcomponentsjs, Polymer in ../polymer and leaflet in ../leaflet. If you use bower, those will be installed automatically at the right locations.
-
-Please note that the pages have to be accessed via a webserver. file://-urls are not supported.
-
-
 ## Notes for implementing child elements
 
-Child elements like markers or layers will be initialized by the surrounding container (the map or a layer)
-by setting a "container" javascript property.
-Therefore the child element should define a _containerChanged method and use that as initializer. 
-Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.  
+Child elements like markers or layers will be initialized by the surrounding container
+(the map or a layer) by setting a "container" javascript property.
+Therefore the child element should define a `containerChanged` method and use that as initializer.
+Don't forget to define a `disconnectedCallback` method that calls `super.disconnectedCallback`
+to perform any necessary clean up. The leaflet-marker element is a good template.
 
 
 ## License
 
-leaflet-map is based on polymer and leaflet. Small parts of leaflet, 
+See LICENSE file.
+
+leaflet-map is based on leaflet. Small parts of leaflet,
 especially the api documentation, have been copied into leaflet-map files.
 
 * [Leaflet](https://github.com/Leaflet/Leaflet/blob/master/LICENSE)
-* [Polymer](https://github.com/polymer/polymer/blob/master/LICENSE.txt)
-
-
-Copyright (c) 2014-2016
-Hendrik Brummermann, Prateek Saxena
-
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are
-permitted provided that the following conditions are met:
-
-   1. Redistributions of source code must retain the above copyright notice, this list of
-      conditions and the following disclaimer.
-
-   2. Redistributions in binary form must reproduce the above copyright notice, this list
-      of conditions and the following disclaimer in the documentation and/or other materials
-      provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
-EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
-EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
-SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
-HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
-TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/base.ts b/base.ts
@@ -0,0 +1,48 @@
+import { FireMixin } from '@pwrs/mixins/fire';
+import { LitElement } from 'lit-element';
+import { bound } from './bound-decorator';
+import type { LeafletMap } from './leaflet-map';
+import * as L from 'leaflet';
+
+type LeafletFeature =
+  | null
+  | L.Circle
+  | L.GeoJSON
+  | L.Marker
+  | L.LayerGroup
+  | L.Polyline
+  | L.Polygon
+  | L.Popup
+  | L.Point;
+
+export class LeafletBase extends FireMixin(LitElement) {
+  declare static is: string;
+
+  declare feature: LeafletFeature;
+
+  declare protected mo?: MutationObserver;
+
+  declare private _container: L.Map | L.LayerGroup;
+
+  get container(): L.Map | L.LayerGroup {
+    return this._container;
+  }
+
+  set container(container: L.Map | L.LayerGroup) {
+    this._container = container;
+    this.containerChanged?.(container);
+  }
+
+  get mapElement(): LeafletMap {
+    return (
+        !(this.container instanceof L.Map) ? null
+      : (this.container.getContainer().getRootNode() as ShadowRoot).host as LeafletMap
+    );
+  }
+
+  @bound onLeafletEvent(e: L.LeafletEvent): void {
+    this.fire(e.type, e);
+  }
+
+  containerChanged?(container?: L.Map | L.LayerGroup): void
+}
diff --git a/boilerplate.md b/boilerplate.md
@@ -0,0 +1,5 @@
+```html
+<script src="https://unpkg.com/@webcomponentsjs/webcomponentsjs/webcomponents-loader.js"></script>
+<script type="module" src="https://unpkg.com/leaflet-element?module"></script>
+<leaflet-map></leaflet-map>
+```
diff --git a/bound-decorator.ts b/bound-decorator.ts
@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/ban-types */
+export function bound<T extends Function>(
+  target: object,
+  propertyKey: string,
+  descriptor: TypedPropertyDescriptor<T>
+): TypedPropertyDescriptor<T> | void {
+  if (!descriptor || typeof descriptor.value !== 'function') {
+    throw new TypeError(
+      `Only methods can be decorated with @bound. <${propertyKey}> is not a method!`
+    );
+  }
+
+  return {
+    configurable: true,
+    get(this: T): T {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const f: T = descriptor.value!.bind(this);
+      // Credits to https://github.com/andreypopp/autobind-decorator for memoizing the result of bind against a symbol on the instance.
+      Object.defineProperty(this, propertyKey, {
+        value: f,
+        configurable: true,
+        writable: true,
+      });
+      return f;
+    },
+  };
+}
+
+export default bound;
diff --git a/bower.json b/bower.json