Search code examples
javascriptpolymerleafletweb-component

Polymer 1.0 custom element in leaflet-map not working


can anybody explain why the following 2 snippets do not have the same effect / what am I doing wrong at the 2nd :

Working (got the marker on the map):

<dom-module id="odl-map">
<template>
    <leaflet-map id="innerMap" style="width:100%;height:100%;" latitude="50.92062" longitude="13.34081" zoom="10">
        <leaflet-marker latitude="50.92062" longitude="13.34081"></leaflet-marker>
    </leaflet-map>
</template>
<script>
 Polymer({
     is: "odl-map",
     ready: function() {
         L.Icon.Default.imagePath="./public/components/leaflet/dist/images";
     }
 });
</script>

But if I just replace the leaflet-marker with a custom element containing the leaflet-marker it does not work :

<dom-module id="contact-map-item">
<template>
    <leaflet-marker latitude="50.92062" longitude="13.34081"></leaflet-marker>
</template>
<script>
    Polymer({
        is: "contact-map-item"
    })
</script>
</dom-module>
<dom-module id="odl-map">
    <template>
        <leaflet-map id="innerMap" style="width:100%;height:100%;" latitude="50.92062" longitude="13.34081" zoom="10">
            <contact-map-item></contact-map-item>
        </leaflet-map>
    </template>
    <script>
     Polymer({
         is: "odl-map",
         ready: function() {
             L.Icon.Default.imagePath="./public/components/leaflet/dist/images";
         }
     });
    </script>
</dom-module>

Solution

  • Finally got a quite clean solution. The issue was that the map populates itself as "container" when it finished loading (leaflet-core.html, method registerMapOnChildren). So i had to add a container-object to my contact-map-item and pass it to the marker :

    <dom-module id="contact-map-item">
    <template>
        <leaflet-marker container="{{container}}" latitude="50.92062" longitude="13.34081"></leaflet-marker>
    </template>
    <script>
        Polymer({
            is: "contact-map-item",
            properties: {container : Object}
        });
    </script>
    </template>