topic html, copyright in Attribution at 4.x in ArcGIS JavaScript Maps SDK Questions

html, copyright in Attribution at 4.x

BrandonFlessner — Sat, 11 Dec 2021 20:25:46 GMT

I'm attempting to use a 3rd party (Mapbox) basemap in 4.3 JavaScript API. I need to include copyright and links in the map attribution as per Mapbox's policy. I've included the html as a string in the layers copyright property, but the string is not 'translated' into html and instead shows the html as text.

  var basemap = new WebTileLayer({
    urlTemplate: "...",
    copyright: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>'
  });
  map.add(basemap);‍‍‍‍‍

Output:

The behavior can also be seen in this sample (click the attribution to see the Stamen copyright shown as text): ArcGIS API for JavaScript Sandbox

This was valid in the 3.x API, how do I do this at 4.x?

Re: html, copyright in Attribution at 4.x

FC_Basson — Sat, 11 Dec 2021 20:25:49 GMT

The problem is that the content for the attribution element is converted to HTML special characters, whereas to have working hyperlinks you need the actual <a></a> tag.

What I quickly tried was a simple conversion from HTML special characters to text:

// get attribution div
attrdiv = document.getElementsByClassName('esri-attribution__sources')[0]
// convert formatted HTML content to text
attrdiv.innerHTML = attrdiv.innerText‍‍‍‍‍‍‍‍

This should be done after the layers have been loaded and the attribution set.

Re: html, copyright in Attribution at 4.x

BrandonFlessner — Sat, 11 Dec 2021 20:25:52 GMT

Thanks for your reply FC Basson. You code works, the trouble for me was figuring out all the events to wait for to make sure the layers were loaded and attribution set. The Mapbox layer is used as a basemap in my application and I have a basemap toggle which changes the attribution text when you toggle between basemaps. Here's my hackish solution:

when the mapView is ready

watch the attribution text

if the attribution text equals the Mapbox copyright text

try to update the text to make it html, but this doesn't work

try to update it every 2 milliseconds

if update successful, clear interval

mapView.watch('ready', function(){
 var attribution = mapView.ui._components[0];
 attribution.widget.viewModel.watch('attributionText', function(evt){
    if (evt == '<a href="http://mapbox.com/about/maps" class="mapbox-wordmark" target="_blank">Mapbox</a>© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, © <a href="https://www.mapbox.com/map-feedback/" target="_blank"><strong>Improve this map</strong></a>'){
       document.getElementsByClassName('esri-attribution__sources')[0].innerHTML = evt; // never works, don't know why
       updateAttr = setInterval(function(){
          document.getElementsByClassName('esri-attribution__sources')[0].innerHTML = evt;
          if (document.getElementsByClassName('esri-attribution__sources')[0].innerText == "Mapbox© OpenStreetMap contributors, © Improve this map"){
             clearInterval(updateAttr);
            }
       }, 2);
     }
   });
});

Of course this would need to be edited if any operational layers had attribution or copyright text. Not a satisfying solution. This was so easy at 3.x!! Sure there is a better way.

Re: html, copyright in Attribution at 4.x

BjornSvensson — Tue, 25 Apr 2017 21:10:17 GMT

FYI - This is a 4.3 specific bug. It worked in 4.0-4.2, and will work again at 4.4 ...