Tool: Mapbox (GL JS API)

[AmeliaBR]

This issue is for discussion of the reference tool "Mapbox GL JS API and Mapbox Studio embed".

---

Mapbox, in addition to providing map tiles, have lots of APIs for building applications with them.

Examples and API reference for the MapBox JS framework

[AmeliaBR]

Also, the Maps API essentially provides iframe embeds.

[nchan0154]

In addition to the Maps API slippy maps that @AmeliaBR linked above, Mapbox allows you to style maps through their Mapbox Studio web application, generate a link and use those as an iframe source. I have written up the capabilities for these below. In general, the Mapbox Studio maps are more customizeable in every way, except for hiding and showing default map controls, which is possible in the default HTML slippy maps. I have not figured out how to replicate these with the Mapbox Studio map URLS.

4.3.1 Generate a default map for a given area

Fully supported, a bit more setup than the others due to the customizeability. Requires an API key.

4.3.2 Display a map using tile data from an author-specified web map service

Yes, you can use Mapbox's default tilesets, of which there are several options, or upload your own. Default data is pulled from Open Street Map.

4.3.3 Display map tiles defined in various common coordinate systems

No support, only supports Web Mercator.

4.3.4 Show pinpoint locations or custom markers on the map

Full support. Puts others to shame, allows you to add multiple custom markers and specify custom icons and custom labels.

4.3.5 Draw polygons or polylines as stylable, interactive vector graphics (separate from the image tiles)

Full support! First embed that allows you to do so. You add this in a similar manner to points, as a custom dataset through their UI. You can draw a line or polygon with the UI or upload your own data.

4.3.6 Support hyperlinks from markers or vector features

I believe this is not supported with embeds, this is possible through the Mapbox GL JS library.

4.3.7 Display a basic map without JavaScript.

Mapbox has a static images API that can be configured via URL, but the JS embeds do not fall back to a static image.

4.3.8 Zoom the map independently from the rest of the page

Supported except the buttons do not have any focus outlines.

4.3.9 Pan the map display

Supported, possible to pan with keyboard but no focus styles.

4.3.10 Load additional map tiles when they pan into view

Supported

4.3.11 Wrap/duplicate data tiles when panning around the globe

Supported

4.3.12 Maintain reasonable scale of labels and lines when zooming

Supported, same caveat of text may be too small

4.3.13 Dynamically load different resolution map tile on zoom

Supported

4.3.14 Hide or show (and maybe dynamically load) vector features and labels on zoom

Supported

4.3.15 Display map data attribution and links

This is hidden under a tooltip like element, but this element is activated on hover and is not accessible to keyboard users.

4.3.16 Apply custom styling to map markers and vector features

Full support, Mapbox Studio allows for non developers to customize styles through their user interface

4.3.17 Apply custom styling to map controls

No support

4.3.18 Toggle whether default controls are displayed

Partial support, HTML slippy map URLS can have configuration options passed into the URL, but Map Studio based maps cannot.

4.3.19 Select map view from latitude and longitude point

slightly harder to do in map studio as their geocoder will automatically look for landmarks around your provided lat/long instead of just adding your input as a point, but it is possible to work around this

4.3.20 Select map view from street address or place name

Full support, their geocoder seems less 'smart' than Google's as it often took me multiple search queries to find an address, but it does work.

4.3.21 Reproject map tile data into a new projection or globe view

No support.

4.3.22 Save the location or export to other application

No support.

[nchan0154]

@AmeliaBR A gentle reminder, it might necessary to whitelist 'api.mapbox.com' in order to have the mapbox embeds display properly.

[AmeliaBR]

@nchan0154 Done. Although I haven't replaced the keys in the iframe embed code URLs, so they're still using your key. Feel free to swap them to the one from the JS code if you like.

[NickFitz]

I broke the MapBoxGL API examples by accidentally including my own key in a recent commit. Fixing now…