Leaflet as web-component

[Hendrik Brummermann]

Hello all,

as you may know there is a new emerging web standard called web-component. Web-components are basically custom elements, which are partly isolated from surrounding context in order to allow integration of elements from different sources. The Polymer library adds a compatibility layer for all common browsers (The prerelease of Chrome has 100% native support, Firefox is getting close).

I did some experiments to make leaflet available as web-components. Please have a look at https://nhnb.github.io/nhnb-leaflet-map/index.html to get a first impression.

At this time, the prototype supports the objects map, marker, tilelayer and icon. Most of the options of these objects are supported and all events.

Since this is an unofficial project, I prefixed the elements with "nhnb" and did not upload the library to the bower-repository, yet. I am happy to drop this prefix, if that is acceptable.


The next steps are to support more feature of leaflet, as well as improving documentation and tests. And I want to add an example of how to use value binding, e. g. to create markers from a spreedsheet without manually writing JavaScript as Google has recently demonstrated with the google-map component.

I am looking for feedback, bug reports and contributions :-).

Hendrik

[Hendrik Brummermann]

Hi all,

It has been a week, and a lot of improvement happened. While the web-component is still under heavy development, it is already useable.


After some discussions, I dropped the "nhnb"-prefix. So the web component is now called "leaflet-map" and it is available via bower.

Demo page: https://nhnb.github.io/leaflet-map/leaflet-map/demo.html

API documentation: https://nhnb.github.io/leaflet-map/doc.html#leaflet-map

Github project: https://github.com/nhnb/leaflet-map/


The following elements are fully supported in version 0.2.0:

• leaflet-geolocation (part of L.map)
• leaflet-map (L.map)
• leaflet-marker (L.marker)
• leaflet-icon (L.icon)
• leaflet-divicon (L.divIcon)
• leaflet-scale-control (L.control.scale)
• leaflet-tilelayer (L.tileLayer)
• leaflet-tilelayer-wms (L.tileLayer.wms)

In the mean time, prtksxna also started working on creating a web component athttps://github.com/prtksxna/leaflet-map-component I reached out to prtksxna in the hope that we can merge projects: https://github.com/prtksxna/leaflet-map-component/issues/23 For example my implementation already supports tile-layers, but his implementation already supports vector layers. And of course both types of layers should be supported.

Hendrik

[Prateek Saxena]

Hey Hendrik,

Merging our projects sounds like a good idea. Its great that you've
already implemented tile-layers! I have implemented some new vector
stuff too - http://prtksxna.github.io/leaflet-map-component/ - but
while working on the component I was a bit confused about some of the
design (API) decisions that I took. You seem to have a different
approach so it might be a good idea to discuss both and reach one that
works for everyone.

1. Should all the leaflet map events be replicated and exposed via the
element or is it fine to let the users use element.map [1] directly?
What would be the pros and cons of either approach?

2. Should the vector objects be also separated neatly into
<leaflet-vector-layers> instead of being added to the map directly? I
think both should be allowed to give users control. I'd be happy to
implement this in my code.

3. Do we at some point want to integrate popular plugins such as
marker clustering [2] and heatmap [3] into the component as separate
layers? I think we should have good documentation to let people add
and contribute these.

I haven't yet taken a deep look at your code but I am guessing its
similar in structure. Do you think it might be a better idea to have
the repository under Leaflet [4] itself? Whom do we need to approach
to give us direction on this?


—prtksxna


[1] https://github.com/prtksxna/leaflet-map-component/blob/master/leaflet-map-component.html#L116
[2] https://github.com/Leaflet/Leaflet.markercluster
[3] https://github.com/Leaflet/Leaflet.heat
[4] https://github.com/Leaflet/

[Hendrik Brummermann]

Hi Prateek,

i am going to answer in between the quotes:

Am Sonntag, 13. Juli 2014 06:59:44 UTC+2 schrieb Prateek Saxena:

1. Should all the leaflet map events be replicated and exposed via the
element or is it fine to let the users use element.map [1] directly?
What would be the pros and cons of either approach?

I was considering the leaflet map object as an implementation detail, which should not be used directly.

Exporting attributes and events defines an official API that can be accessed by the designer tool. I have not looked at the designer in detail, yet, but I like the idea of creating a user interface by pulling component from a palate onto a drawing board and setting properties.

2. Should the vector objects be also separated neatly into
<leaflet-vector-layers> instead of being added to the map directly? I
think both should be allowed to give users control. I'd be happy to
implement this in my code.

I agree that we shall allow both approaches.

Perhaps we should use <leaflet-layer-group> and <leaflet-feature-layer> elements, which correspond to those objects provided by leaflet.

Those elements would be responsible to inject themselves into their direct children on initialization and DOM changes. Analog to the behaviour of <leaflet-map>:

		registerMapOnChildren: function() {
			for (var i = 0; i < this.children.length; i++) {
				this.children[i].container = this.map;
			}
			this.onMutation(this, this.registerMapOnChildren);
		},

(I guess, the method should be renamed to registerContainerOnChildren instead of "map", and we might want to use a mutation listener which does not fire on modifications to grand children. Polymer's mutation listeners are strange).

When we implement <leaflet-layer-control>, we can reference elements (tile layers, markers, circles, polygons, ...) via their "id" attribute.The layer-control can default to automatically picking up direct children of the map. Tile-layers as base-layer and feature-group/layer-group as optional layers. I suspect this to be the most common use case. Other cases would need a little configuration.

 

3. Do we at some point want to integrate popular plugins such as
marker clustering [2] and heatmap [3] into the component as separate
layers? I think we should have good documentation to let people add
and contribute these.

Yes, I have a use case for awesome-markers.

I have not looked at how to inject css code. Especially Chrome Canary has stricter css isolation than current Chrome and Firefox. This may be an issue.

The very basic contract to support plugins is probably something along the lines of:
"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."

But I agree, that this is only a start and we need more documentation here.

 

I haven't yet taken a deep look at your code but I am guessing its
similar in structure. Do you think it might be a better idea to have
the repository under Leaflet [4] itself? Whom do we need to approach
to give us direction on this?

This would be a very good.


Hendrik

[Hendrik Brummermann]

Has it been a week already?

We have merged Prateek's and my implementation. So far there has been no feedback regarding our request to accept the web-component as an official https://github.com/leaflet project. Therefore the merged implementation is available at https://nhnb.github.io/leaflet-map/ for the time being.

The current implementation 0.3.0 supports the following objects completely:

• leaflet-map
• leaflet-geolocation
• leaflet-marker, leaflet-icon, leaflet-divicon
• leaflet-ilayer, leaflet-layer-group
  
• leaflet-tilelayer, leaflet-tilelayer-wms
• leaflet-circle, leaflet-polyline, leaflet-polygon
• leaflet-scale-control

Popups are supported on markers and circles. 

The next tasks will be to implement unbounded popups, geojson layers and the layer-control.

The website needs a header/footer and some more links. But I am going to wait a little for a decision by the leaflet team regarding a relocation of the project.

Hendrik

[Hendrik Brummermann]

Hi all,

It's time for another status update:

* Markers are now draggable, thanks to awiel for the fix
* Rob Beers implemented a new element leaflet-storage-layer which is a tilelayer with offline support
* some improvements to the webpage https://nhnb.github.io/leaflet-map/  (header, plugin page, fixed pathes, apidoc is now viewable on small screens, but needs further improvements)

Hendrik

[jason.j.f...@gmail.com]

Hello, are you still updating this page? 

I am having some trouble using leaflet-map with Polymer 1.0.  I have posted some questions on Stack Overflow but there doesn't seem to be many users on there who are using this yet...Maybe you can help? Thanks!