Polymer 1.0 / leaflet-map: how to implement Leaflet functions to web components

Question

This question is an extension of a previous question of mine. I am new to both Polymer 1.0 and the leaflet-map web component, and so far I am unable to use any of Leaflet functionality I have used with ease in Javascript / HTML / CSS based Leaflet web apps.

For example, I would like to set the map view to center on a click on the map. I tried some variations of this idea, based on some examples I found on SO:

map element in html:

<leaflet-map id="thismap"  latitude="{{latitude}}" longitude="{{longitude}}" zoom="14"  >

map element registration:

<script>
 Polymer({
  is: "my-maps",
  ready: function () {
       L.Icon.Default.imagePath="../../bower_components/leaflet/dist/images";      

   },
    attached: function(){
      this.map = L.map(thismap);
   },
  listeners:{
   'tap': 'testmove'
   },
  testmove: function(e){
    console.log("tapped");      
    this.map.setView([40.675951373, -73.989100456], 14);
     console.log("map center: "+this.map.getCenter());
  }
});
</script>

In this case, 'getCenter' outputs the center point as assigned in 'setView', but the visible map does not pan to center on this point, as I would hope.

I can't find any examples in the leaflet-map documentation or anywhere else that show any type of dynamic functionality of this sort (map resizing on a click, button press etc). Ideas?

Answer 1

The key I found is to write any method that is dependent on Leaflet source functions within the leaflet-map core element (leaflet-core.html).

(in leaflet-core.html)

Polymer({
    is: 'leaflet-map',

 ...

 map.on('click', function(e) {                      
            this.map.setView([e.latlng.lat, e.latlng.lng], this.map.zoom);
        }, this);

....

});

One issue is that 'tap' is not one of the events defined in leaflet-core.html, so I had to use 'click'. But this sufficed for this test purpose.