Switching base maps with ArcGISTiledMapServiceLayer

5160
5
Jump to solution
02-26-2015 12:39 PM
ChuckBenton
Occasional Contributor

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

0 Kudos
1 Solution

Accepted Solutions
JeanneTrieu
Occasional Contributor

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.

View solution in original post

0 Kudos
5 Replies
JeanneTrieu
Occasional Contributor

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.

0 Kudos
ChuckBenton
Occasional Contributor

Thanks Jen, it worked fine! 

0 Kudos
ChuckBenton
Occasional Contributor

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

0 Kudos
LucasDanzinger
Esri Frequent Contributor

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
Occasional Contributor

Worked perfectly, thanks!!!

0 Kudos