Polymer component for OSM Maps using Leaflet

[Prateek Saxena]

Hey,

I have been looking at Polymer for a while now and got really excited
about it after watching all the IO videos. I wanted to try my hand at
making something real so I decided to make a leaflet-map component so
that people can use OSM or Mapbox tiles and use Leaflet [1] features
too. This is my first attempt at a polymer component and I faced some
issues. I tried to follow the example of the <google-map> component
[2] and built a similar interface for my component.

I am done with the first phase of development and happy that the
<leaflet-map> component [3] works as I intended it to. While making it
I couldn't understand how to maintain the flat-dependency for Bower
[4] but found a solution in <seed-element>. Other issues that I don't
know solutions of:

* How to use stylesheets inside the component:
https://github.com/prtksxna/leafleft-map-component/issues/2
* Should the the Leaflet library be loaded inside the main HTML or in
the component: https://github.com/prtksxna/leafleft-map-component/issues/3
* How can I make a change to a property without triggering
propertyChanged:
https://github.com/prtksxna/leafleft-map-component/issues/6
* How are dependent components within a single repository suppose to
document their dependencies:
https://github.com/prtksxna/leafleft-map-component/issues/7
* Where can I find documentation on the `select` attribute of the
<content> tag: https://github.com/prtksxna/leafleft-map-component/issues/8
* For certain elements I wasn't able to register onMutation correctly:
https://github.com/prtksxna/leafleft-map-component/issues/9

I would be grateful if someone could answer these questions. Do you
think its worth it to package it and put it on bower and web component
registries? Should I add the rest of the Leaflet features and add
elements for <leaflet-polygon>, <leaflet-path> etc?

I was also thinking it would be interesting to add more container
elements inside it that could act as layers, such as — one for heat
maps and another one for clustered markers. I also need to figure out
the best way to add tests [5] for this.

Suggestions and feedback are welcome.


—prtksxna


[1] http://leafletjs.com
[2] https://github.com/PolymerLabs/google-map
[3] https://github.com/prtksxna/leafleft-map-component
[4] https://github.com/prtksxna/leafleft-map-component/issues/1
[5] https://github.com/prtksxna/leafleft-map-component/issues/4

[Rob Dodson]

On Mon, Jun 30, 2014 at 9:11 AM, Prateek Saxena <prtk...@gmail.com> wrote:

Hey,

I have been looking at Polymer for a while now and got really excited
about it after watching all the IO videos. I wanted to try my hand at
making something real so I decided to make a leaflet-map component so
that people can use OSM or Mapbox tiles and use Leaflet [1] features
too. This is my first attempt at a polymer component and I faced some
issues. I tried to follow the example of the <google-map> component
[2] and built a similar interface for my component.

I am done with the first phase of development and happy that the
<leaflet-map> component [3] works as I intended it to. While making it
I couldn't understand how to maintain the flat-dependency for Bower
[4] but found a solution in <seed-element>. Other issues that I don't
know solutions of:

* How to use stylesheets inside the component:
https://github.com/prtksxna/leafleft-map-component/issues/2

Left a comment. Btw, this line caught my attention

https://github.com/prtksxna/leafleft-map-component/blob/master/leaflet-map-component.html#L10

You're hard coding a path to `bower_components` but you don't have a guarantee that the user will have a `bower_components` dir. Using a `.bowerrc` file, the user may have renamed their `bower_components` dir (we often rename ours to just "components"). Depending on how leaflet works, you may need to take their stylesheet, modify it so it's Shadow DOM friendly, and load your own version into your elements.

 

* Should the the Leaflet library be loaded inside the main HTML or in
the component: https://github.com/prtksxna/leafleft-map-component/issues/3

Left a comment

 

* How can I make a change to a property without triggering
propertyChanged:
https://github.com/prtksxna/leafleft-map-component/issues/6 

Hm good question. Maybe you could name your zoom property something different, like initialZoom, so it isn't called?

 

* How are dependent components within a single repository suppose to
document their dependencies:
https://github.com/prtksxna/leafleft-map-component/issues/7

Left a comment 

* Where can I find documentation on the `select` attribute of the
<content> tag: https://github.com/prtksxna/leafleft-map-component/issues/8

The select attribute just uses CSS selector syntax. This section of the spec seems to explain everything that's allowed:
http://w3c.github.io/webcomponents/spec/shadow/#h3_satisfying-matching-criteria

Types (input, div, p), ID's, classes, attributes, and :not()

 

* For certain elements I wasn't able to register onMutation correctly:
https://github.com/prtksxna/leafleft-map-component/issues/9

What's not working for you?

 

I would be grateful if someone could answer these questions. Do you
think its worth it to package it and put it on bower and web component
registries?

sure!

 

Should I add the rest of the Leaflet features and add
elements for <leaflet-polygon>, <leaflet-path> etc?

sure!

 

I was also thinking it would be interesting to add more container
elements inside it that could act as layers, such as — one for heat
maps and another one for clustered markers. I also need to figure out
the best way to add tests [5] for this.

Take a look at the seed-element. It has some sample tests.

 

Suggestions and feedback are welcome.


—prtksxna


[1] http://leafletjs.com
[2] https://github.com/PolymerLabs/google-map
[3] https://github.com/prtksxna/leafleft-map-component
[4] https://github.com/prtksxna/leafleft-map-component/issues/1
[5] https://github.com/prtksxna/leafleft-map-component/issues/4

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMi5MH6Wpst9dDka01SAUomGZVTj6gLge-UEfW0w1YK2fZJpTQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Prateek Saxena]

Hey Rob,

On Mon, Jun 30, 2014 at 10:09 PM, Rob Dodson <robd...@google.com> wrote:
>> * How to use stylesheets inside the component:
>> https://github.com/prtksxna/leafleft-map-component/issues/2
> Left a comment.

Thank you! I have fixed this

> Btw, this line caught my attention
> https://github.com/prtksxna/leafleft-map-component/blob/master/leaflet-map-component.html#L10
> You're hard coding a path to `bower_components` but you don't have a
> guarantee that the user will have a `bower_components` dir. Using a
> `.bowerrc` file, the user may have renamed their `bower_components` dir (we
> often rename ours to just "components"). Depending on how leaflet works, you
> may need to take their stylesheet, modify it so it's Shadow DOM friendly,
> and load your own version into your elements.

I had documented this concern in the first issue -
http://git.io/K_klXg - and have fixed it now.

>> * Should the the Leaflet library be loaded inside the main HTML or in
>> the component: https://github.com/prtksxna/leafleft-map-component/issues/3
> Left a comment

Fixed.

>> * How can I make a change to a property without triggering
>> propertyChanged:
>> https://github.com/prtksxna/leafleft-map-component/issues/6
> Hm good question. Maybe you could name your zoom property something
> different, like initialZoom, so it isn't called?

I get really confused with difference between a property and an
attribute. I don't want to call it something else as I am reflecting
it on the DOM. So if you zoom the map by double clicking on it then
the attribute changes too. Is there some documentation that I should
refer to to understand this better?

>> * How are dependent components within a single repository suppose to
>> document their dependencies:
>> https://github.com/prtksxna/leafleft-map-component/issues/7
> Left a comment

Fixed.

>> * Where can I find documentation on the `select` attribute of the
>> <content> tag: https://github.com/prtksxna/leafleft-map-component/issues/8
> The select attribute just uses CSS selector syntax. This section of the spec
> seems to explain everything that's allowed:
> http://w3c.github.io/webcomponents/spec/shadow/#h3_satisfying-matching-criteria
> Types (input, div, p), ID's, classes, attributes, and :not()

I have added this to the comment and linked to the mailing list.

>> * For certain elements I wasn't able to register onMutation correctly:
>> https://github.com/prtksxna/leafleft-map-component/issues/9
> What's not working for you?

Changing the innerHTML of the `leaflet-marker` element whether through
the inspector or through JavaScript does not call the `contentChanged`
- http://git.io/2Bruog - function and thus doesn't update the popup.

>> I would be grateful if someone could answer these questions. Do you
>> think its worth it to package it and put it on bower and web component
>> registries?
> sure!

Done! I put it up on Bower and a few other places :)

>> Should I add the rest of the Leaflet features and add
>> elements for <leaflet-polygon>, <leaflet-path> etc?
> sure!

Hmm. I am unsure of how I want to expose the interface for these.
These elements will be slightly more complicated. Maybe I should
discuss that on the leaflet mailing list.

> Take a look at the seed-element. It has some sample tests.

The seed-element and the article related to it were very helpful. I
haven't added tests yet but was able to add documentation and deploy
to gh-pages using that documentation

—prtksxna

[Prateek Saxena]

I have put up all the code on Github -
https://github.com/prtksxna/leaflet-map-component - and added the
documentation and demo pages too. Thanks a lot Rob an Scott for
replying on issues and sorry about those pull requests and issues, I
have closed them now.

It'd be great if you guys could test it and raise issue for bugs and features.


Thanks,
Prateek

[sewer...@gmail.com]

Hi, I know this is an unorthodox way to ask for help..but I am working on an app that uses leaflet-map with Polymer 1.0 and I am really stuck trying to get some of the Leaflet.js functionality to work, and here is precious little documentation on this at this point.  I have posted a couple question on Stack Overflow here and here.  Any help you can give would be greatly appreciated, thanks!