How to visualize data hosted w/ ArcGIS JavaScript API?

I’d appreciate help to learn how one would load and visualize data served out via ArcGIS JavaScript REST service.

The layer I am interested in is here:

https://data-gis.unep-wcmc.org/server/rest/services/PriorityAreasForConservationOrRestoration/Natural_and_Modified_Habitat_Screening_Layer/MapServer

And when I click on the ‘View in ArcGIS JavaScript’ link, I am directed to a view of the map.

Looking at the map as ‘view source’, the data source appears (layerURL) to be nearly identical to the viewport URL (just without the trailing ?f=jsapi). However the ?f=jsapi seems to matter, as the content of the different URLs is quite different.

Trying a simple d3.json() returns SyntaxError: Unexpected token < in JSON at position 0.

Here’s a notebook showing the error:

I’d be happy for help and guidance. Just trying to figure out where to link into the hosted data confuses me. I expect that–even after loading the data–I’d have several more steps to get it to render in a similar way as to how they show it from the hosting site (different colors, etc). It would be really nice if someone could help show how this is accomplished. I’d especially enjoy learning how one does this with Leaflet.

Hope to hear from you!

Hi Aaron, I think you need to use ?f=json instead of ?f=jsapi.

Thanks. And yes - if I change to ?f=json, then d3.json() will return an object.

I also realized something weird: The data layer will visualize (with full color) if I drop it into Leaflet directly. I just updated the notebook to show this. So in other words - it works ‘as is’ in the context of leaflet (I was being silly not to try to this first).

1 Like