angularjs with Leafletjs

Question

Following directie code is from http://jsfiddle.net/M6RPn/26/ I want to get a json feed that has many lat and long.. I can get a json with $resource or $http in Angular easi

Answer 1

I recently built an app using Angular JS and Leaflet. Very similar to what you've described, including location data from a JSON file. My solution is similar to blesh.

Here's the basic process.

I have a element on one of my pages. I then have a Directive to replace the element with the Leaflet map. My setup is slightly different because I load the JSON data in a Factory, but I've adapted it for your use case (apologies if there are errors). Within the Directive, load your JSON file, then loop through each of your locations (you'll need to setup your JSON file in a compatible way). Then display a marker at each lat/lng.

HTML

Directive

app.directive('map', function() {
return {
    restrict: 'E',
    replace: true,
    template: '
',
    link: function(scope, element, attrs) {

        var popup = L.popup();
        var southWest = new L.LatLng(40.60092,-74.173508);
        var northEast = new L.LatLng(40.874843,-73.825035);            
        var bounds = new L.LatLngBounds(southWest, northEast);
        L.Icon.Default.imagePath = './img';

        var map = L.map('map', {
            center: new L.LatLng(40.73547,-73.987856),
            zoom: 12,
            maxBounds: bounds,
            maxZoom: 18,
            minZoom: 12
        });



        // create the tile layer with correct attribution
        var tilesURL='http://tile.stamen.com/terrain/{z}/{x}/{y}.png';
        var tilesAttrib='Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.';
        var tiles = new L.TileLayer(tilesURL, {
            attribution: tilesAttrib, 
            opacity: 0.7,
            detectRetina: true,
            unloadInvisibleTiles: true,
            updateWhenIdle: true,
            reuseTiles: true
        });
        tiles.addTo(map);

        // Read in the Location/Events file 
        $http.get('locations.json').success(function(data) {
            // Loop through the 'locations' and place markers on the map
            angular.forEach(data.locations, function(location, key){

                var marker = L.marker([location.latitude, location.longitude]).addTo(map);

            });
        });
    }
};

Sample JSON File

{"locations": [     
{   
    "latitude":40.740234, 
    "longitude":-73.995715
    }, 
{   
    "latitude":40.74277, 
    "longitude":-73.986654
    },
{   
    "latitude":40.724592, 
    "longitude":-73.999679
    }
]}