AnsweredAssumed Answered

Add basemap dynamically

Question asked by bforbhavin on May 1, 2015
Latest reply on May 1, 2015 by csgeosol1

I want to give users flexibility to add basemap layer after their dynamic service layer is loaded on the map. See following example, I have highlighted code and what works/doesn't work.

 

I guess basemap must be added as first layer only. basemap's layer id will be always layer0? Is there any workaround if the basemap is not added as a first layer and want to add it after the map is loaded with dynamic service layer?

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Feature Layer Only Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

    <style>

      html, body, #map {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

      }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

      require([

        "dojo/dom-construct",

        "esri/map",

        "esri/layers/FeatureLayer",

        "esri/geometry/Extent",

        "esri/InfoTemplate",

        "dojo/domReady!"

      ], function(

          domConstruct,

          Map,

          FeatureLayer,

          Extent,

          InfoTemplate

        ) {

          var bounds = new Extent({

            "xmin":-16045622,

            "ymin":-811556,

            "xmax":7297718,

            "ymax":11142818,

            "spatialReference":{"wkid":102100}

          });

 

 

          var map = new Map("map", {

            extent: bounds

          });

 

 

          var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2";

 

 

          var template = new InfoTemplate("World Regions", "Region: ${REGION}");

 

 

          var fl = new FeatureLayer(url, {

            id: "world-regions",

            infoTemplate: template

          });

          //map.setBasemap('streets'); //it works here

          map.addLayer(fl);

         map.setBasemap('streets'); //it doesn't work here

        }

      );

    </script>

  </head>

  <body>

    <div id="map"></div>

  </body>

</html>

Outcomes