1.X branch, attribution not working when using custom Mapbox GL Leaflet layer

mtfurlan commented 8 years ago

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/leaflet@0.7.7/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/leaflet@0.7.7/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?

elesdoar commented 8 years ago

Please see this example:

https://github.com/angular-ui/ui-leaflet/blob/master/examples/0232-layers-mapboxgl-example.html

mtfurlan commented 8 years ago

@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.

mtfurlan commented 7 years ago

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/leaflet@0.7.7/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>

angular-ui / ui-leaflet

1.X branch, attribution not working when using custom Mapbox GL Leaflet layer #288