AngularJS Ionic Leaflet - Map markers not showing

Question

So Ive been trying to get leaflet working in an Ionic app and everything is working fine except my markers. They are not being shown in the default screen nor the locate() function. below is my code

html snippet

 <leaflet defaults="map.defaults" center="map.center" markers="map.markers" ng-if="map"></leaflet>

controller

app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) {

  $scope.$on("$stateChangeSuccess", function() {

      $scope.map = {
          defaults: {
              tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
              maxZoom: 18,
              zoomControlPosition: 'bottomleft'},
          center: {
              lat : 20.6219444444,
              lng : -105.228333333,
              zoom : 15},
          markers: {
              lat : 20.6219444444,
              lng : -105.228333333,
              message: "Puerto Vallarta, MX",
              focus: true,
              draggable: false}
      };

  });

  $scope.locate = function(){

    $cordovaGeolocation
      .getCurrentPosition()
      .then(function (position) {
        $scope.map.center.lat  = position.coords.latitude;
        $scope.map.center.lng = position.coords.longitude;
        $scope.map.center.zoom = 16;

        $scope.map.markers.now = {
          lat:position.coords.latitude,
          lng:position.coords.longitude,
          message: "You Are Here",
          focus: true,
          draggable: false
        };

      }, function(err) {
        // error
        console.log("Location error!");
        console.log(err);
      });

  };

});

any ideas?? thanks for looking

Chris G Chris G · Accepted Answer · 2015-05-16T17:06:08

SOLVED

I added marker value to a variable and then copied that into the $scope.map here is the updated working controller

 app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) {

  $scope.$on("$stateChangeSuccess", function() {

      var mainMarker = {
            lat: 20.6219444444,
            lng: -105.228333333,
            focus: true,
            message: "Puerto Vallarta, MX",
            draggable: false};

      $scope.map = {
          defaults: {
              tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
              maxZoom: 18,
              zoomControlPosition: 'bottomleft'},
          center: {
              lat : 20.6219444444,
              lng : -105.228333333,
              zoom : 15},
          markers: {
              mainMarker: angular.copy(mainMarker)}
      };

  });

  $scope.locate = function(){

    $cordovaGeolocation
      .getCurrentPosition()
      .then(function (position) {
        $scope.map.center.lat  = position.coords.latitude;
        $scope.map.center.lng = position.coords.longitude;
        $scope.map.center.zoom = 16;

        $scope.map.markers.now = {
          lat:position.coords.latitude,
          lng:position.coords.longitude,
          message: "You Are Here",
          focus: true,
          draggable: false
        };

      }, function(err) {
        // error
        console.log("Location error!");
        console.log(err);
      });

  };

});

AngularJS Ionic Leaflet - Map markers not showing

1 Answers