geojson in angular-leaflet-directive with MEANjs

Question

I'm trying to duplicate this example from angular-leaflet-directive, but using the Angular MVC framework that is implemented in MEAN.JS. angular-leaflet-directive accepts and displays the correct tiles, center, and maxBounds that I specify in my controller, but fails to render any geojson, even if I paste the geojson straight into the controller instead of calling for it with $http.get.

I'll update with more concrete examples as I make them on my side.

This works:

<!DOCTYPE html>
<html ng-app="demoapp">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../lib/angular/angular.js"></script>
        <script src="../lib/leaflet/dist/leaflet.js"></script>
        <script src="../lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
        <link rel="stylesheet" href="../lib/leaflet/dist/leaflet.css" />
    </head>
    <body ng-controller="GeoJSONController">
        <leaflet lf-center="wisconsin" geojson="geojson" defaults="defaults" tiles="tiles" width="100%" height="480px"></leaflet>
        <h1>Simple GeoJSON example</h1>
                <script>
            var app = angular.module("demoapp", ["leaflet-directive"]);
            app.controller("GeoJSONController", ['$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
                angular.extend($scope, {
                    wisconsin: {
                        lat: 44.63,
                        lng: -90.02,
                        zoom: 6
                    },
                    defaults: {
                        scrollWheelZoom: false
                    },
                    tiles: {
                        Name: 'Stamen Toner Lite',
                        url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}',
                        options: {
                            ext: 'png',
                            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                        }
                    },
                    geojson: {
                        'data': {
                            'type': 'FeatureCollection', 
                            'features': [{ 
                                'type': 'Feature', 
                                'geometry': {
                                    'type': 'Polygon', 
                                    'coordinates': [
                                        [
                                            [-94.00, 48.00], 
                                            [-94.00, 42.00], 
                                            [-85.00, 42.00], 
                                            [-85.00, 48.00], 
                                            [-94.00, 48.00]
                                        ]
                                    ]
                                }
                            }]
                        },
                        'style': {
                            'fillColor': '#ff0000',
                            'fillOpacity': 0.5,
                            'color': '#000000',
                            'opacity': 0.2
                        }
                    }
                });
            }]);
        </script>

    </body>
</html>

UPDATE Somehow I'm not able to re-produce the problem when using a pristine instance of MEAN.js. I guess that means the problem lies elsewhere. I'll be deleting this question if that's the case.

UPDATE 2 The plot thickens: I just overwrote my entire /public/modules/maps directory in my problem project with the one from my working example from a pristine MEAN.js instance it works in my pristine project, but not my problem project.

score 0 · Answer 1 · answered Dec 11 '15 at 19:31

Kind of hard guessing what goes wrong when you didn't include the actual code with your $http implementation. One thing i spotted is that you used single quotes in the definition of your GeoJSON collection. If you try and load that as JSON it will fail because JSON property names and value should be surrounded by double quotes. Other than that your code works perfectly with a simple $http call:

$http.get('collection.geojson').then(function (response) {
    angular.extend($scope, {
        geojson: {
            data: response.data,
            style: {
                'fillColor': '#ff0000',
                'fillOpacity': 0.5,
                'color': '#000000',
                'opacity': 0.2
            }
        }
    });
});

angular.extend($scope, {
    wisconsin: {
        lat: 44.63,
        lng: -90.02,
        zoom: 6
    },
    defaults: {
        scrollWheelZoom: false
    },
    tiles: {
        Name: 'Stamen Toner Lite',
        url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}',
        options: {
            ext: 'png',
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
    }
});

Example on Plunker: http://plnkr.co/edit/OoqwpNLaUhiXLm26mMtB?p=preview

I know, I'm working on making a non-working example that doesn't have my client's data in it as I stated in my question. I just wanted to get it out there and start generating attention. Also, what I pasted into my initial question does currently work, single-quotes and all. — doicomehereoften1, Dec 11 '15 at 19:34
I meant it won't work if you load it like that using `$http` it will throw: SyntaxError: Unexpected token at Object.parse (native) at fromJson — iH8, Dec 11 '15 at 19:49
Oh, gotcha. Grabbing from $http or from data hardcoded into the controller doesn't generate any errors for me. I'm just not getting polygons that appear. — doicomehereoften1, Dec 11 '15 at 19:56

geojson in angular-leaflet-directive with MEANjs

1 Answers1