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; } } }

Switching base maps with ArcGISTiledMapServiceLayer

ChuckBenton

I'm developing an app that runs on both Android and iOS. My base map comes up just fine, but I want to be able to select between several sources and the solution is eluding me.

The mainMap function includes:

    Item{
          id: baseMap
          property string source: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        }

    Map {
        id:mainMap
        anchors.fill: parent
        wrapAroundEnabled: true

        ArcGISTiledMapServiceLayer {
            url: baseMap.source
        }
    }

Within the main toolBar exists;

ToolButton{
iconSource: getlayers_icon()

onClicked: {

launchSelectBaseMapMenu()

mainMap.reset

mainMap.addLayer(baseMap.source)

console.log("Resetting Map")

}

LaunchSelectBaseMapMenu returns an updated baseMap.source, but I cannot identify how to set the TiledMapServiceLayer to the new path. I've tried doing it directly with ArcGISTiledMapServiceLayer, and moved the reset and other things to various places with no impact.

I'm new to Qt/QML and ArcGIS, so I figure it probably is a simple oversight... any help is appreciated!

Chuck

Find more posts tagged with

Accepted answers

JeanneTrieu

Hi Chuck,

There is an example of how to do so in our QML sample application under: Tiled Layers->Tiled Layer online. Thank you very much for trying out our beta version. We usually encourage users to post their beta questions on the beta forum however since we will be releasing shortly, we will not move this post to the forum.

thanks,

Jen Trieu | Product Engineer.

All comments

ChuckBenton

Worked perfectly, thanks!!!

Lucas Danzinger

Chuck-

Try using insertLayer instead of addLayer. This allows you to specify the layer index. You can use removeLayerByIndex + insertLayer to switch basemap but leave all other layers as they were. Here is an example of something that seems to work for me for switching basemaps:

ApplicationWindow {
    id: appWindow
    width: 800
    height: 600
    title: "BasemapSwitcher"


    Map {
        id: map
        anchors.fill: parent


        ArcGISTiledMapServiceLayer {
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        }


        ArcGISDynamicMapServiceLayer {
            url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"
        }
    }


    ComboBox {
        id: comboBox
        width: 125
        anchors {
            left: parent.left
            top: parent.top
            margins: 15
        }


        model: ["light grey", "imagery", "topographic"]
    }


    Button {
        anchors {
            left: parent.left
            top: comboBox.bottom
            margins: 15
        }
        width: 125
        text: "switch basemap"
        onClicked: {
            console.log("switching basemap to", comboBox.currentText);


            switch(comboBox.currentText) {
            case "light grey":
                switchBasemap("http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Base/MapServer");
                break;
            case "imagery":
                switchBasemap("http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer");
                break;
            case "topographic":
                switchBasemap("http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer")
                break;
            }
        }


        function switchBasemap(serviceUrl) {
            var lyr = ArcGISRuntime.createObject("ArcGISTiledMapServiceLayer", {url: serviceUrl});
            map.removeLayerByIndex(0);
            map.insertLayer(lyr, 0);
        }
    }
}

ChuckBenton

I'm having trouble figuring out how to manage layer order.

I'm drawing another layer on top of the base layer as follows:

Map {

id: mainMap

anchors.fill: parent

focus: true

ArcGISTiledMapServiceLayer {

url: baseMap.source

}

ArcGISDynamicMapServiceLayer {

url: "http://bv.teamar.com:6080/arcgis/rest/services/UnitedStatesFeatures/MapServer"

opacity: 0.5

}

When I change the baseMap as follows (following the guidance given earlier in this post) the layer on top disappears

ToolButton {

text: " "

Layout.alignment: Qt.AlignHCenter

Text {

text: "Light Gray"

font.bold: true

color: "black"

}

onClicked: {

baseMap.source = "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"

tiledMapService = ArcGISRuntime.createObject("ArcGISTiledMapServiceLayer");

tiledMapService.url = baseMap.source;

console.log("Map:", tiledMapService.url)

mainMap.addLayer(tiledMapService);

sbmComponent.destroy()

}

I assume there's a a layer order issue here, but can't find a QML based solution. Any suggestions?

Chuckj

ChuckBenton

Thanks Jen, it worked fine!

JeanneTrieu

Hi Chuck,

thanks,

Jen Trieu | Product Engineer.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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