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 : '© http://www.openstreetmap.org/copyright ">OpenStreetMap contributors, © https://www.mapbox.com/map-feedback/ ">Mapbox ' } ) ; 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?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

html, copyright in Attribution at 4.x

BrandonFlessner

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.

&nbsp; <SPAN class="keyword token">var</SPAN> basemap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; urlTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"..."</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; copyright<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>'&copy; <a href="</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.openstreetmap.org%2Fcopyright" target="_blank">http://www.openstreetmap.org/copyright</A><SPAN>">OpenStreetMap</a> contributors, &copy; <a href="</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fwww.mapbox.com%2Fmap-feedback%2F" target="_blank">https://www.mapbox.com/map-feedback/</A><SPAN>">Mapbox</a>'</SPAN></SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>basemap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Output:

screen capture of copyright shown as text, not html

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?

タグ付きの投稿をもっと見る

Accepted answers

BjornSvensson

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

All comments

FC_Basson

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:

<SPAN class="comment token">// get attribution div</SPAN>
attrdiv <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByClassName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'esri-attribution__sources'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="comment token">// convert formatted HTML content to text</SPAN>
attrdiv<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> attrdiv<SPAN class="punctuation token">.</SPAN>innerText‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

BrandonFlessner

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.

BjornSvensson

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.