CODEWITHSUNDEEP
meteorleaflet
Chromos
Chromos

Reputation: 1921

Rendering multiple Leaflet instances in Meteor

I want to render a list of small maps with individual leaflet instances in meteor.js. However using the suggested Template.list.rendered callback returns only one instance for the first list-element.

HTML:

<template name="list">
    <div class="list-group">
    {{#each happening}}
        <div class="list-group-item">
            <p id="{{_id}}">  
                {{#constant}}
                  <br>
                    <div id="container" class="container">
                      <div id="map" class="map" style="height: 300px; width: 90%;"></div>
                    </div>
                {{/constant}}
            </p>    
        </div>  
    {{/each}}
    </div>
</template>

JS:

Template.list.rendered = function () {
   set up leaflet...
};

I reckon rendered isn't the way to go here?

Upvotes: 0

Views: 227

Answers (1)

Michael
Michael

Reputation: 315

Without seeing your code, it's hard to debug. However, it sounds like your code is referencing the div by id (which isn't unique in your code) so it's only working on the first div. So if you make your map div id unique and reference each in turn then it should work.

Something like this:

<div id="map_{{_id}}" class="map" style="height: 300px; width: 90%;"></div>

Upvotes: 1

Related Questions