AngularJS Leaflet Markers Won't Render
I've been trying to implement a marker and path trail to a leaflet map inside an ionic project and have been using following this angularJS with Leaflet documentation/example found here. However, when implementing I cannot get the pins to be visible. Here is my JSFiddle. I also included some of my code because it wouldn't let me submit my question without but its the same rendering issue on my JSFiddle. Any help would be great!
I'm being forced to show code if I have a JSFiddle link, so this is what I got but I don't think the solutions in my code. If some library or call issue.
my index.html
<style>
.scroll { height: 100%; }
map {
display: block;
width: 100%;
height: 100%;
background: #fff;
}
.angular-leaflet-map {
display: block;
width: 100%;
height: 100%;
background: #ffff;
}
</style>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
my pathmap.html
<ion-view view-title="Activities" >
<ion-content ng-controller="PathController" class="has-header">
<leaflet center="center" paths="paths" defaults="defaults"></leaflet>
</ion-content>
</ion-view>
controller.js
angular.module('starter.controllers', ['ionic', 'leaflet-directive', 'ngCordova'])
[......]
.controller("PathController", [ '$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 25.074521,
lng: -77.348191,
zoom: 14
},
paths: {
p1: {
color: '#33CCCC',
weight: 3,
latlngs: [
{ lat: 25.074521, lng: -77.348191 },
{ lat: 25.074501, lng: -77.317485 },
{ lat: 25.081517, lng: -77.319116 },
{ lat: 25.078077, lng: -77.345831 }
],
}
},
markers: {
marker1: {
lat: 25.074521,
lng: -77.348191,
icon: {
url: 'img/nirvana.jpg',
iconSize: [80, 80],
iconAnchor: [40, 80],
popupAnchor: [0, 0],
shadowSize: [0, 0],
shadowAnchor: [0, 0]
}
},
marker2: {
lat: 25.074501,
lng: -77.317485,
icon: {
iconUrl: 'img/logo.png',
iconSize: [800, 800],
iconAnchor: [400, 600],
popupAnchor: [40, 40],
}
},
marker3: {
lat: 25.081517,
lng: -77.319116,
icon: {
iconUrl: 'img/logo.png',
iconSize: [800, 800],
iconAnchor: [400, 600],
popupAnchor: [40, 40],
}
},
marker4: {
lat: 25.078077,
lng: -77.345831,
icon: {
iconUrl: 'img/logo.png',
iconSize: [800, 800],
iconAnchor: [400, 600],
popupAnchor: [40, 40],
}
},
},
defaults: {
scrollWheelZoom: false
}
});
}]);
Turns out I didn't have markers="markers" and needed to update my leaflet.js Hope this helps someone else out.
Without
markers="markers"and old leaflet.js
With
markers="markers"and updated leaflet.js
