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> — Map data © <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.
1 answers
solution1
0 2015-12-11 19:31:56
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> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
}
});
Example on Plunker: http://plnkr.co/edit/OoqwpNLaUhiXLm26mMtB?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.