Snapshots should include attribution

[1ec5]

Snapshots include the Mapbox logo, but they should also include the copyright statements required by Mapbox’s terms of service (and the licenses of underlying sources such as OpenStreetMap).

/cc @fabian-guerra @frederoni

[friedbunny]

Adding textual attribution would also be a good opportunity to do https://github.com/mapbox/mapbox-gl-native/issues/3804.

[fabian-guerra]

@1ec5 the copyright statement should look like this?

[1ec5]

That implementation uses a UIVisualEffectView, which produces an effect that may not be straightforward to implement in a static image context. Nor would it be desirable: the visual effect view tends to produce startlingly saturated colors depending on what's underneath. Instead, copy the macOS SDK's implementation: https://github.com/mapbox/mapbox-gl-native/issues/3804#issuecomment-271430850. You can see that implementation in action in macosapp.

[1ec5]

A more subtle design is also possible: take a look at the Static API's attribution. Regardless of the design, use the macOS SDK's implementation because it properly accounts for additional sources used by the style, such as DigitalGlobe.

[fabian-guerra]

What would happen when the image's size is smaller to accommodate the logo and copyright notice? Are we going to scale both to fit the width? or are we going to display the logo and a © character?

[kkaefer]

I think we should provide an API for creating a snapshot that allows specifying whether the Mapbox logo, and/or attribution should be visible. Both should default to yes, but should have the option to hide either, e.g. for situations where you create many small thumbnails and have a blanket attribution elsewhere, or show the required attribution via other means (e.g. native UI controls vs. embedded image marks).

While this ticket seems to be specific to iOS, showing attribution is also a concern for Android. Instead of baking the attribution into the image, we could add a "static map view" component to iOS/Android that handles showing the attribution with platform UI controls, which means it could be responsive in size, and use native fonts/APIs.

[friedbunny]

What would happen when the image's size is smaller to accommodate the logo and copyright notice? Are we going to scale both to fit the width? or are we going to display the logo and a © character?

Our previous static web API (if not api-gl? unsure) would use a smaller logo (the ‘M’) and abbreviated attribution text when the image dimensions were too small to show full size versions. After chatting with @1ec5, I think that’d be a good approach to investigate here, too.

[1ec5]

While this ticket seems to be specific to iOS, showing attribution is also a concern for Android. Instead of baking the attribution into the image, we could add a "static map view" component to iOS/Android that handles showing the attribution with platform UI controls, which means it could be responsive in size, and use native fonts/APIs.

I suppose such a component could be convenient in some cases, but it’d be inconsistent with MapKit’s MKMapSnapshotter and incompatible with the main use cases for static maps on iOS. For example, the APIs for drag-and-drop (#9350) expects an object that conforms to NSItemProviderWriting, which would be UIImage, not UIView.

If the developer needs a non-interactive map view, they can already create an MGLMapView but turn off userInteractionEnabled. #3804 would address the attribution for such a map view.

[1ec5]

10163 added attribution to snapshots on Android. #10352 will do the same on iOS and macOS.

[tobrun]

Capturing from internal conversations related to structuring the attribution when image-width changes:

From full to minimal attribution:

• [FULL LOGO] (©OpenStreetMap) (©DigitalGlobe)
• [SMALL LOGO - helmet] ©Mapbox (©OpenStreetMap) (©DigitalGlobe)
• ©Mapbox (©OSM) (©DigitalGlobe)
• (©OSM) (©DigitalGlobe)

Use this as style guide for the first iteration:

[1ec5]

10352 landed, so Android, iOS, and macOS are all taken care of. Let’s use #10423 to track making the attribution “responsive”.

[meghamukim]

I am trying to export the map using the following code:

 var map = new mapboxgl.Map({
                container: this.mapContainer,
                style: 'mapbox://styles/mapbox/streets-v9',
                maxZoom: 22,
                minZoom: 0,
                zoom: defaultZoomLevel,
                center: centerCoordinates,
                preserveDrawingBuffer: true
            });

map.getCanvas().toBlob(function (blob) {
                canvasContext.strokeStyle = '#CCCCCC';
                canvasContext.strokeRect(leftPosition, topPosition, width, height);
                var img = new Image();
                img.setAttribute("crossOrigin", "anonymous");
                var srcURL = URL.createObjectURL(blob);
                img.onload = function () {
                    canvasContext.drawImage(img, leftPosition, topPosition, width, height);
                    URL.revokeObjectURL(srcURL);
                };
                img.src = srcURL;
 });

It does not include the attribution. I tried adding the attribution to the source, but to no help. I am using a machine on Windows with mapbox-gl-js. So I am not sure if this was fixed to work only mapbox-native on iOS, macOS & Android?

[friedbunny]

@meghamukim For help implementing Mapbox GL-JS or our various native SDKs, check out Stack Overflow or contact support — thanks!