Skip to content

Commit ef7fb87

Browse files
bennypowersbennypowers
committed
rewrite in typescript with LitElement
1 parent 3e38a25 commit ef7fb87

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+17079
-4155
lines changed

‎.gitignore‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
/bower_components
2-
**/*~
1+
/node_modules
2+
*.js
3+
*.js.map
4+
*.d.ts
5+
!karma.conf.js

‎.project‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎.settings/.jsdtscope‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎.settings/org.eclipse.wst.jsdt.ui.superType.container‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.settings/org.eclipse.wst.jsdt.ui.superType.name‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.vscode/settings.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"files.exclude": {
3+
"**/*.js": {"when": "$(basename).ts"},
4+
"**/*.d.ts": {"when": "$(basename).ts"},
5+
"**/*.js.map": true
6+
},
7+
}

‎README.md‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# leaflet-map
22

3-
*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com)
3+
*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com)
44
JavaScript library via html elements.
55

66
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).
77

8-
Most of the options documented in the Leaflet reference are exported as html attributes.
8+
Most of the options documented in the Leaflet reference are exported as html attributes.
99
All events are mapped into html events of the same name.</p>
10-
For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt;
10+
For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt;
1111
to define the view and zoom level.
1212

1313

@@ -18,22 +18,23 @@ do not yet support web-components natively, yet.
1818

1919
## Quickstart Guide
2020

21-
Make leaflet maps using declarative [Polymer](http://polymer-project.org) web components.
21+
Make leaflet maps using declarative web components.
2222
To get started read the [documentation](http://leaflet-extras.github.io/leaflet-map/doc.html)
2323
or checkout the [demo](http://leaflet-extras.github.io/leaflet-map/).
2424

25-
Install this web component using [Bower](http://bower.io):
25+
Install this web component using [npm](https://npm.im/leaflet-element):
2626

2727
```
28-
bower install leaflet-map
28+
npm i -S leaflet-element
2929
```
3030

3131
Import the main component and start creating your map:
3232

33+
```js
34+
import 'leaflet-element'
35+
```
3336
```html
3437
<head>
35-
<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
36-
<link rel="import" href="leaflet-map.html">
3738
<style>
3839
html, body {
3940
margin: 0;
@@ -61,7 +62,7 @@ Import the main component and start creating your map:
6162

6263
Although leaflet-map is still under heavy development, it is already fully usable.
6364

64-
List of demos:
65+
List of demos:
6566

6667
* [leaflet-map](https://leaflet-extras.github.io/leaflet-map/demo.html#view) (L.map)
6768
* [leaflet-marker](https://leaflet-extras.github.io/leaflet-map/demo.html#marker) (L.marker)
@@ -78,24 +79,17 @@ List of demos:
7879

7980
Please have a look at the [change log](https://github.com/nhnb/leaflet-map/blob/master/CHANGES.md), for recent developments.
8081

81-
## Dependencies
82-
83-
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.
84-
85-
Please note that the pages have to be accessed via a webserver. file://-urls are not supported.
86-
87-
8882
## Notes for implementing child elements
8983

9084
Child elements like markers or layers will be initialized by the surrounding container (the map or a layer)
9185
by setting a "container" javascript property.
92-
Therefore the child element should define a _containerChanged method and use that as initializer.
93-
Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.
86+
Therefore the child element should define a _containerChanged method and use that as initializer.
87+
Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.
9488

9589

9690
## License
9791

98-
leaflet-map is based on polymer and leaflet. Small parts of leaflet,
92+
leaflet-map is based on polymer and leaflet. Small parts of leaflet,
9993
especially the api documentation, have been copied into leaflet-map files.
10094

10195
* [Leaflet](https://github.com/Leaflet/Leaflet/blob/master/LICENSE)

‎base.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { PropertyValues } from 'lit-element';
2+
import { FireMixin } from '@pwrs/mixins/fire';
3+
import { LitElement, property } from 'lit-element';
4+
import { bound } from './bound-decorator';
5+
6+
type LeafletFeature =
7+
| null
8+
| L.Circle
9+
| L.GeoJSON
10+
| L.Marker
11+
| L.LayerGroup
12+
| L.Polyline
13+
| L.Polygon
14+
| L.Popup
15+
| L.Point;
16+
17+
export class LeafletBase extends FireMixin(LitElement) {
18+
_mutationObserver?: MutationObserver;
19+
20+
feature: LeafletFeature;
21+
22+
_container: L.Map | L.LayerGroup;
23+
24+
get container() {
25+
return this._container;
26+
}
27+
28+
set container(v) {
29+
this._container = v;
30+
}
31+
32+
@bound onLeafletEvent(e: L.LeafletEvent) {
33+
this.fire(e.type, e);
34+
}
35+
}

‎boilerplate.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<script src="https://unpkg.com/@webcomponentsjs/webcomponentsjs/webcomponents-loader.js"></script>
3+
<script type="module" src="https://unpkg.com/leaflet-element?module"></script>
4+
<leaflet-map></leaflet-map>
5+
```

‎bound-decorator.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export function bound<T extends Function>(
2+
target: object,
3+
propertyKey: string,
4+
descriptor: TypedPropertyDescriptor<T>
5+
): TypedPropertyDescriptor<T> | void {
6+
if (!descriptor || typeof descriptor.value !== 'function') {
7+
throw new TypeError(
8+
`Only methods can be decorated with @bound. <${propertyKey}> is not a method!`
9+
);
10+
}
11+
12+
return {
13+
configurable: true,
14+
get(this: T): T {
15+
const f: T = descriptor.value!.bind(this);
16+
// Credits to https://github.com/andreypopp/autobind-decorator for memoizing the result of bind against a symbol on the instance.
17+
Object.defineProperty(this, propertyKey, {
18+
value: f,
19+
configurable: true,
20+
writable: true,
21+
});
22+
return f;
23+
},
24+
};
25+
}
26+
27+
export default bound;

0 commit comments

Comments
 (0)