I have created a JSON file which includes 30 map service layers and their attributes. This includes the map service url. My function creates a table of contents from the JSON object so that when I click on a ToC value it returns the map service owner, name and service url. Using the url how can I add the service layer to my basemap??

So far the code to return the layer info is as follows:

 $(document).ready(function () {
    for (index in jsonString.Land) {
        $('#land ul').append('<li><a href="#" data-owner="' + jsonString.Land[index].owner + '">' + jsonString.Land[index].name + '</a></li>');

            for (index in jsonString.Air) {
        $('#air ul').append('<li><a href="#" data-url="' + jsonString.Air[index].url + '" data-owner="' + jsonString.Air[index].owner + '">' + jsonString.Air[index].name + '</a></li>');

    for (index in jsonString.Water) {
        $('#water ul').append('<li><a href="#" data-url="' + jsonString.Water[index].url + '" data-owner="' + jsonString.Water[index].owner + '">' + jsonString.Water[index].name + '</a></li>');

    for (index in jsonString.Heritage) {
        $('#heritage ul').append('<li><a href="#" data-url="' + jsonString.Heritage[index].url + '" data-owner="' + jsonString.Heritage[index].owner + '">' + jsonString.Heritage[index].name + '</a></li>');
    for (index in jsonString.Waste) {
        $('#waste ul').append('<li><a href="#" data-url="' + jsonString.Waste[index].url + '" data-owner="' + jsonString.Waste[index].owner + '">' + jsonString.Waste[index].name + '</a></li>');

    $('a').on('click', function () {
        $('#show').html($(this).attr('data-owner') + '<br>' + $(this).attr('data-url'));

I've searched online for an example and having had a look at the Javascript api fro ArcGIS I'm still failing.

  • that do the URLs returned by your code snippet actually look like? Jul 17, 2015 at 15:05
  • Hi John, ...../ArcGIS/rest/services/WMS_Waterbody_Classifications/MapServer Jul 20, 2015 at 10:50

1 Answer 1


Hopefully I'm understanding this question correctly and you want to add a service to a base map layer that comes from your JSON blob. You would create an esri BasemapLayer with the URL as a parameter for each of the services. Once you have all the layers in, you need to add them to the layers parameter of your basemap. In my example, I wanted a slightly altered version of their default satellite map--so I had to configure it on my own.


 var map = new Map("mapDiv", {
        basemap: "Satellite",
        infoWindow: popup
    satLayer = new esri.dijit.BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
    boundaryLayer = new esri.dijit.BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"
    transLayer = new esri.dijit.BasemapLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"
    satelliteBasemap = new esri.dijit.Basemap({
        layers: [satLayer, boundaryLayer, transLayer],
        title: "Satellite",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/d802f08316e84c6592ef681c50178f17/info/thumbnail/Imagery_Labels_Trans.jpg"

For what you want to do, you would need to use the jsonString.categoryNameHere[index].url instead of the service URLS in my example, and possibly make an array to push the BasemapLayers into so they can easily be added to the layers property of your map, as I'm not sure it's convenient to be as specific about variable names with 30 options.

Also as a note: there are dynamic map service layers as well for data that changes (census data vs stuff like city boundaries), so use that if it's dynamic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.