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>
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>