ui-leaflet
ui-leaflet copied to clipboard
Published
20 hours ago •
angular-ui
angular-ui
1.X branch, attribution not working when using custom Mapbox GL Leaflet layer
So I'm using Mapbox GL Leaflet, and I need an attribution.
It works for an OSM layer, but not my custom layer.
<!DOCTYPE html>
<html ng-app="mapTest">
<head>
<meta charset='utf-8' />
<title>ui-leaflet mapbox-gl-leaflet</title>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { height: 500px; width:500px }
</style>
</head>
<body ng-controller="MapCtrl">
<leaflet
layers="layers"
id='map'
class='mainContent'>
</leaflet>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js'></script>
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script src="http://code.angularjs.org/1.5.2/angular.js"></script>
<script src='https://raw.githubusercontent.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js'></script>
<script src='https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.light.min.js'></script>
<script src='https://rawgit.com/angular-ui/ui-leaflet/1.X/dist/ui-leaflet.js'></script>
<script>
var app = angular.module("mapTest", ['nemLogging', 'ui-leaflet']);
app.controller("MapCtrl", function($scope, $window){
$scope.layers = {
baselayers: {
mapbox: {
name: "Mapbox GL Layer",
type: "custom",
layer: $window.L.mapboxGL({
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpbG10dnA3NzY3OTZ0dmtwejN2ZnUycjYifQ.1W5oTOnWXQ9R1w8u3Oo1yA',//From mabox example, not mine. Provided for ease of reproduction
style: 'mapbox://styles/mapbox/streets-v9',
}),
layerOptions: {
attribution: "Mapbox Attribution",
}
},
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz',
layerOptions: {
attribution: "OSM attribution",
}
}
}
};
});//End MapCtrl
</script>
</body>
</html>
So yeah, any suggestions on what I'm doing wrong?
Please see this example:
https://github.com/angular-ui/ui-leaflet/blob/master/examples/0232-layers-mapboxgl-example.html
@elesdoar That doesn't set the attribution. And it also only works with the master branch, which is "not suitable for use at this point", so I'm using the 1.X branch.
Well, still an issue but the above code doesn't run, because the leaflet mapbox thing updated to leaflet 1. So I just redid the dependencies.
<!DOCTYPE html>
<html ng-app="mapTest">
<head>
<meta charset='utf-8' />
<title>ui-leaflet mapbox-gl-leaflet</title>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { height: 500px; width:500px }
</style>
</head>
<body ng-controller="MapCtrl">
<leaflet
layers="layers"
id='map'
class='mainContent'>
</leaflet>
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<!-- angular ui-leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-leaflet/1.X/dist/ui-leaflet.js"></script>
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.min.js"></script>
<!-- Mapbox GL -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css" rel='stylesheet' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js"></script>
<script src="https://rawgit.com/mapbox/mapbox-gl-leaflet/leaflet-v0.7/leaflet-mapbox-gl.js"></script>
<script>
</script>
<script>
var app = angular.module("mapTest", ['nemLogging', 'ui-leaflet']);
app.controller("MapCtrl", function($scope, $window){
var mapbox = $window.L.mapboxGL({
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpbG10dnA3NzY3OTZ0dmtwejN2ZnUycjYifQ.1W5oTOnWXQ9R1w8u3Oo1yA',//From mabox example, not mine. Provided for ease of reproduction
style: 'mapbox://styles/mapbox/streets-v9',
});
$scope.layers = {
baselayers: {
mapbox: {
name: "Mapbox GL Layer",
type: "custom",
layer: mapbox,
layerOptions: {
attribution: "Mapbox Attribution",
}
},
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz',
layerOptions: {
attribution: "OSM attribution",
}
}
}
};
});//End MapCtrl
</script>
</body>
</html>