0

I am creating an application that allows users to turn on and off KML layers:

Toggle layers on and off

The KML layers are hosted on ArcGIS Online, and I'm bringing them into the application by creating a new KML Layer variable. The KML Layers are then added to an array variable. Finally, the layers are added to the map according to whether the checkbox is toggled on.

Here is the relevant code:

layers = [];

var parcelKML = new google.maps.KmlLayer({
                url: "https://www.arcgis.com/sharing/rest/content/items/3bdd800d59254407b4e115d56fcbc9ec/data",
                map: map,
                pane: "floatPane",
                preserveViewport: true
        });
layers.push(parcelKML);

var municKML = new google.maps.KmlLayer({
            url: "https://www.arcgis.com/sharing/rest/content/items/1dcc6f19f9c24bf689235f0488d8f90a/data",
            map: map,
            pane: "floatPane",
            preserveViewport: true
        });
layers.push(municKML);

for (var i=0; i < layers.length; i++) {
        layers[i].setMap(null);
       };
    };


//Add layers to map using toggle

//Parcels
$(window).ready(function(){
        $(".ui.toggle.parcels input").click(function(){
            checked = $(".ui.toggle.parcels input").is(":checked");
            console.log(checked);
            if(checked === true) {
                layers[0].setMap(map);
            }
            else{
                layers[0].setMap(null);
            }
        });
    });

//Municipalities
$(window).ready(function(){
        $(".ui.toggle.munic input").click(function(){
            checked = $(".ui.toggle.munic input").is(":checked");
            console.log(checked);
            if(checked===true) {
                layers[1].setMap(map);
            }
            else{
                layers[1].setMap(null);
            }
        });
    });

The layers are successfully loading to the map viewer. However, I'd like the Parcels layer to always appear on top. If I toggle this layer on and then toggle on the municipalities layer, the parcels layer is now on bottom.

How would I specify the order in which the KML layers are drawn?

I'm relatively new to the Google Maps API and JavaScript.

  • Thanks. I don't believe that the solution in the related article resolves my issue, though. When closely inspecting that web map, it appears that different layers will appear on top of the overlay depending on the order in which they are toggled off and on. – paul May 30 at 17:33
0

The solution was as simple as adding the zIndex parameter when defining each of my KML layers.

For example:

var parcelKML = new google.maps.KmlLayer({
            url: "https://www.arcgis.com/sharing/rest/content/items/3bdd800d59254407b4e115d56fcbc9ec/data",
            map: map,
            pane: "floatPane",
            preserveViewport: true,
            zIndex: 0
         });

var municKML = new google.maps.KmlLayer({
        url: "https://www.arcgis.com/sharing/rest/content/items/1dcc6f19f9c24bf689235f0488d8f90a/data",
        map: map,
        pane: "floatPane",
        preserveViewport: true,
        zIndex: 1
       });

After applying this parameter, my layers now load in the order that I specify.

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.