CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jscontent-security-policymapbox-gl
Greg
Greg

Reputation: 78

MapBox GL CSP Version Not Rendering Tiles

I'm trying to get a map to render using the CSP version.

Everything appears to be working except rendering the tiles, as you can see from the JSFiddle and the code below.

No errors are thrown in the console.

<div id='map'></div>

mapboxgl.accessToken = 'ACCESS_TOKEN';
mapboxgl.workerUrl = 'https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp-worker.js';

var el = document.createElement('div');
 el.style.backgroundImage = 'url(https://placekitten.com/g/40/40/)';
 el.style.width = 40 + 'px';
 el.style.height = 40 + 'px';

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 12.5,
    center: [-74.5, 40],
    style: 'mapbox://styles/mapbox/streets-v11',
    hash: true
});

new mapboxgl.Marker(el)
   .setLngLat([ -74.5, 40 ])
   .addTo(map);

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

Upvotes: 0

Views: 1148

Answers (1)

Brandi H
Brandi H

Reputation: 91

I work for Mapbox - and I believe this is happening because Salesforce isn't allowing the worker script to load. Per Salesforce:

You can’t load JavaScript resources from a third-party site, even if it’s a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal.

A Static Resource is an archive file containing the files that you want to access in Salesforce. So the short version is that Salesforce's security policy will only load a local copy of mapbox-gl-csp-worker.js. You'll need to create a static resource with that file to get your map working:

  1. Download a copy of mapbox-gl-csp-worker.js file.
  2. Create a zip or jar archive containing the worker file.
  3. https://help.salesforce.com/articleView?id=pages_static_resources_create.htm&type=5 to Salesforce.
  4. Change the worker URL in your code to the relative path for the resource.

A couple things to keep in mind:

  • Make sure that you are pointing the script tag to the CSP build for GL JS: <script src='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp.js'></script>
  • Whenever you want to update GL JS, you need to download the new version of the csp build, and update the static resource on Salesforce.

Good luck!

Brandi

Upvotes: 1

Related Questions