0

I have issue when use angular-leaflet-directive to create multiple map.

I have list City and i want to use ng-reapeat to display many map.

this is code

<div ng-repeat="(key,city) in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
      <div class="panel-heading">{{city.name}}</div>
      <div class="panel-body" style="width: 100%; height: 100%;">
          <leaflet style="width: 100%; height: 90%;" center="{{city.place_id}}"></leaflet>
      </div>
    </div>

it alert error Syntax Error: Token '{' invalid key at column 2 of the expression [{{city.place_id}}] starting at [{city.place_id}}]. when i test by change 'center' with other string then It haven't error.

Please help me fix it.

thank you so much !!!!!!!

Võ Minh Tâm
  • 59
  • 2
  • 9
  • Could you set up a Plunk or something to provide us with some more information, or at least provide sample data of what's contained in `listCity`? – Spikee Dec 08 '15 at 07:29
  • this is sample data of list City{ 'name' : 'West Jakarta City', 'lat' : '-6.168872', 'lng' : '106.756572', 'place_id' : 'ChIJ7x9CSLj3aS4RmvSqYhrWPhg' } – Võ Minh Tâm Dec 08 '15 at 07:49
  • angular.extend($scope,{ ChIJ7x9CSLj3aS4RmvSqYhrWPhg: { // location ACEH lat: -6.168872, lng: 106.756572, zoom: 12, place_id: 'ChIJB0vJuDb0aS4RlHPzGrFt85A' } }) – Võ Minh Tâm Dec 08 '15 at 07:51
  • A basic Plunk (or similar) would be best, to have a sample that 'can' work. – Spikee Dec 08 '15 at 08:15

1 Answers1

0

According to the example in the docs, you must provide a lat, a lng and a zoom in your center property.

So try something like this:

<div ng-repeat="city in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
    <div class="panel-heading">{{city.name}}</div>
    <div class="panel-body" style="width: 100%; height: 100%;">
        <leaflet style="width: 100%; height: 90%;" center="{ lat: city.lat, lng: city.lng, zoom: 10 }"></leaflet>
    </div>
</div>

I assume your listCity is an Array.

Hinrich
  • 13,485
  • 7
  • 43
  • 66