I'm using a leaflet map in my application but I need to add markers to this map. The information about the coördinates for this marker I need to get from a json file.
So my plan was to use a ng-repeat in my view (marker in markers) and then for every marker call a function in my controller (createMarkers(marker.lat, markter.lng))
But I don't know if this is possible? Maybe there is another way to do this?
Hope to get some help with this :)
controller
lycheeControllers.controller(
'routeCtrl',
[
'$scope',
'$http',
function ($scope, $http) {
$http.get('json/route.json').success(
function (data) {
$scope.titel = "Transport route van India naar Italie"
$scope.markers = data;
var map = new L.Map('map');
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18
}
).addTo(map);
map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
var muzzafarpur = new L.LatLng(26.117482, 85.363364);
map.setView(muzzafarpur, 3);
$scope.plaatsMarkers = function(){
alert("test");
}
//Extend the Default marker class
var RedIcon = L.Icon.Default.extend(
{
options: {
iconUrl: '../app/img/marker-icon.png'
}
}
);
var redIcon = new RedIcon();
}
);
}
]
);
HTML
<section id="panel">
<section id="titel">{{titel}}</section>
<div id="map">
<div ng-repeat="mark in markers">{{plaatsMarkers()}}</div>
</div>
JSON
[
{
"naam": "lychee",
"markers": [
{
"mark": [
{
"naam": "Muzzafarpur",
"tekst": "Lycheeplantage: de lychees worden per vrachtwagen tot de haven van Kolkata gebracht.",
"datum": 1,
"lng": 26.117482,
"lat": 85.363364
},
{
"naam": "Kolkata",
"tekst": "Van hieruit vertrekt het hoofdtransport richting Gioia Tauro.",
"datum": 2,
"lng": 22.572765,
"lat": 88.363975
},
{
"naam": "Colombi (Sri Lanka)",
"tekst": "Hier wordt een tussenstop gemaakt",
"datum": 3,
"lng": 6.947216,
"lat": 79.844486
},
{
"naam": "Golf van Aden",
"tekst": "Risico wegens piraterij.",
"datum": 4,
"lng": 12.640338,
"lat": 47.849579
},
{
"naam": "Suezkanaal",
"tekst": "Hier dient tol betaald te worden. Deze route bespaart echter wel in afstand.",
"datum": 5,
"lng": 30.841705,
"lat": 32.317608
},
{
"naam": "Malta",
"tekst": "Hier wordt er overgeschakelt naar een ander schip (JRS Capella) en via de FAS Adriatic 2 Feeder Service wordt er verder koerst gezet richting Gioia Tauro.",
"datum": 6,
"lng": 35.902973,
"lat": 14.523021
},
{
"naam": "Gioia Tauro",
"tekst": "Aankomst in Italie. Van hieruit worden de lychees vervoert naar de verschillende Carrefour winkels.",
"datum": 7,
"lng": 38.443573,
"lat": 15.898798
}
]
}
]
}
]
I'm not familiar with leaflet but what seems me write is to deep
$watch
on markers:JS
Console
Demo Fiddle
Hope it will help...