Details Chart: MapBox Maps – OSKAR

This will require Builder privileges for setup and implementation.

The Details presentation chart now can be used to display images of MapBox Maps based on data from your data set. A request to the Mapbox API returns an image. The API requires an API access token.

The API Access Token

The API requires an API access token in the request. The API access token allows usage monitoring by the application, but also allows MapBox to contact the developer about their application usage. It is supplied in the request with the parameter: access_token=inserttokenhere

MapBox Static Maps API

The MapBox Static Maps API generates an image of a map based on a URL parameter in an HTTP request. It should also be noted that the URL is restricted to 2048 characters.

Map Parameters

/styles/v1/{username}/{style_id}/static/{overlay}/{lon},{lat},{zoom},{bearing},{pitch}|{bbox}|{auto}/{width}x{height}{@2x}

The position of the map is represented by either the word auto, a bounding box, or the following five numbers: longitude, latitude, zoom, bearing, and pitch. Bearing and pitch, are optional. If you only specify bearing and not pitch, pitch will default to 0. If you specify neither, they will both default to 0. If you specify auto or bbox, you should not provide any of these numbers.

username: username of the account which the style belongs
style_id: the ID of the style from which to create a static map.
overlay: One or more comma-separated features that can be applied on top of the map at request time. The order of features in an overlay dictates their Z-order on the page. The last item in the list will have the highest Z-order (will overlap the other features in the list), and the first item in the list will have the lowest (will underlap the other features). Format can be a mix of geojson, marker, or path. For more details on each option, see the Overlay options section.
lon: Longitude for the center point of the map; a number between -180 and 180
lat: Latitude of the center point of the map; a number between -85.0511 and 85.0511
zoom: Zoom level; a number between 0 and 22. Fractional zoom levels will be rounded to two decimal places.
bearing: Bearing rotates the map around its center. A number between 0 and 360, interpreted as decimal degrees. 90 rotates the map 90° clockwise, while 180 flips the map. Defaults to 0.
pitch: Pitch tilts the map, producing a perspective effect. A number between 0 and 60, measured in degrees. Defaults to 0 (looking straight down at the map).
bbox - Four coordinates representing: upper longitude, upper latitude, lower longitidue, lower latitude, enclosed in square brackets like [lon(min),lat(min),lon(max),lat(max)]. bbox is used in place of lon,lat,zoom or auto. The zoom level is calculated based on the most detailed zoom level that fits the bounding box within the request's specified width and height. Increasing the request's width and height will return a map at a higher zoom level. See the bbox example requests for how to retrieve a static map using a bounding box.
auto: If auto is used, the viewport will fit the bounds of the overlay. If auto is used without a specified padding value, padding will automatically be applied with a value that is 5% of the smallest side of the image, rounded up to the next integer value, up to a maximum of 12 pixels of padding per side.
- Please Note: auto replaces lon, lat, zoom, bearing, pitch, and bbox.
width: Width of the image; a number between 1 and 1280 pixels.
height: Height of the image; a number between 1 and 1280 pixels
@2x: Render the static map at a @2x scale factor for high-density displays

Optional Parameters Not in URL Above:

Place these Parameters after any of the above listed but before the access token.

- - attribution: A boolean value controlling whether there is attribution on the image. Defaults to true. Note: If attribution=false, the watermarked attribution is removed from the image. You still have a legal responsibility to attribute maps that use OpenStreetMap data, which includes most maps from Mapbox. If you specify attribution=false, you are legally required to include proper attribution elsewhere on the webpage or document.
  - logo: A boolean value controlling whether there is a Mapbox logo on the image. Defaults to true.
  - before_layer: A string value for controlling where the overlay is inserted in the style. All overlays will be inserted before the specified layer
  - markers: this is optional and specifies one or more points that will be identified with a marker on the returned map image. The API provides very minimal styling that can be applied to the markers. The URL can contain multiple markers parameters. Each markers parameter specifies a list of locations that have the same styling. If markers are supplied then the center and zoom parameters can be omitted.

Each markers parameter is of the form:

{name}-{label}+{color}({lon},{lat})

The available marker style descriptors are:

- name – Marker shape and size. Options are pin-s and pin-l
- lon , lat – The location at which to center the marker. When using an asymmetric marker, make sure that the tip of the pin is at the center of the image.
  - This location can be specified using the ${value:<axisName>} macro. The URL will generate a map for the Street City, State string address identified with a red marker labeled with a D.
- label(optional) – Marker symbol. Options are a lowercase alphanumeric label a through z, 0 through 99, or a valid Maki icon. Any letters requested, will render in uppercase only.
- color(optional) – a 3 or 6-digit hexadecimal color code

Creating a Details Chart

Create a new Presentation Details Chart
Set Frame Style to HTML
Format as Shown in Image
Click OK
Then Save your Details Chart

Example URLs

HTML Templates with Modification:

https://api.mapbox.com/v4/{mapid}/{lon},{lat},{z}/{width}x{height}.{format}?access_token=<your access token>

https://api.mapbox.com/v4/{mapid}/{overlay}/{lon},{lat},{z}/{width}x{height}.{format}?access_token=<your access token>

https://api.mapbox.com/v4/{mapid}/{overlay}/auto/{width}x{height}.{format}?access_token=<your access token>

Coding that has worked in iDashboards v11.1e, all YOU need is your API Key!

<img src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/0,0,2/400x400?access_token=INSERTYOURACCESSTOKENHERE">

Please Note: The maximum character length for http protocol is 2048 characters. If the URL goes over the limit: then no image will be created, and no map will appear in the chart. The iDashboards application handles the URL-encoding so it doesn’t need to be explicitly handled in the URL.

Possible Issues

If you attempted to to do this through a Details chart like the other maps, you may get a link that appears to be broken.

In the Chart Preview box, right click on that broken image
Then select: Open image in new tab
A new browser tab will then open and it will give you a message

Not Authorized

If you attempt to utilize Mapbox without an access token you will see the following:

{"message":"Not Authorized - No Token"}

Classic Styles Not Supported

If you attempted to utilize older HTML coding like shown below:

{"message":"Classic styles are no longer supported; see https://blog.mapbox.com/deprecating-studio-classic-styles-d8892ac38cb4 for more information"}

Link Provided in Message

Not Found

Your not using old coding but not quite right either, so it cannot find the image.

{"message":"Not Found"}

For More Information:

Mapbox Static Images API Documentation
Dashboard & Chart Design Articles
iDashboards Builder Manual 9.13.6 Details
iDashboards Builder Manual 8 Designing Charts

If the above is unable to resolve the issue, then please contact truOI Support for further assistance.