0

What I'm trying to do:

  • Display a list of cities on the page by iterating through a Mongo collection.
  • Display a Google Map next to that list with the sort order # of the city as the marker label.

For example:

  1. New York -> would have marker with label "1" on it in the map div
  2. Chicago -> would have marker with label "2" on it
  3. Washington D.C. -> would have marker with label "3" on it

Simple setup, my HTML is:

<template name = "cities">
    {{#each city}}
        <p>{{cityname}}></p>
    {{/each}}
</template>

and JS:

Template.cities.helpers({
    'city': function(){
        var country = Session.get('currentCountry');
        return Cities.find({ country: country}, {sort: {population: -1}});
    }
});

All well and good, but I would like to display my cities with a number next to them (and that number is the order they load in on the DOM, which would depend on the way the city list is sorted when retrieved from the Mongo DB).

I need to then somehow pass along this number to the Google Maps marker creation function.

Any help is appreciated!

1 Answers1

0

Turns out this is trivial (thanks Michel)

New HTML:

<template name = "cities">
    {{#each city}}
        <p>{{@index}} {{cityname}}></p>
    {{/each}}
</template>

If you want to increment the index by 1 (or any other value), see this: Adding offset to {{@index}} when looping through items in Handlebars

Community
  • 1
  • 1