0

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%;
}
Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
Greg
  • 78
  • 1
  • 6

1 Answers1

1

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

Brandi H
  • 91
  • 3
  • Hello @Brandi, Where can we get the CSS file as well. In Salesforce you usually upload the js & css together as a zipped file into the static resource.Please advise – Sumchans Apr 02 '20 at 23:29
  • [The CSS location is the same as the normal GL-JS build](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart), Including it with a in the head of the document via the Mapbox CDN is the simplest and easiest way to provide the CSS, but it is also bundled in the Mapbox module, meaning that if you have a bundler that can handle CSS, you can import the CSS from mapbox-gl/dist/mapbox-gl.css. – Brandi H Apr 07 '20 at 18:32