topic Re: base map in ArcGIS JavaScript Maps SDK Questions

base map

anjelinaponkerat — Thu, 16 Nov 2017 18:10:43 GMT

I,m going to add 4 arcgis web services(tiled), as a base map by toggle tools. but I can not do this. plese help me.

Regards

Re: base map

RobertScheitlin__GISP — Thu, 16 Nov 2017 18:13:43 GMT

Anjelina,

The BaseMap Toggle dijit is intended for 2 basemaps. For 4 basemaps you need to use the BaseMap Gallery dijit.

Re: base map

anjelinaponkerat — Thu, 16 Nov 2017 20:22:56 GMT

Do you have any sample code?

Regards

Re: base map

RobertScheitlin__GISP — Thu, 16 Nov 2017 20:46:48 GMT

Anjelina,

Sure see this sample:

Basemap gallery | ArcGIS API for JavaScript 3.22

Re: base map

anjelinaponkerat — Fri, 17 Nov 2017 07:14:53 GMT

I used this sample, but I dont know how to add my tiled web services instead of topo, satellite and other.... . I dont like esri basemap and open street, I,m going to use my own services that are from ArcGIS Server 10.2.2. please help me more.

Regards

Re: base map

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:57:55 GMT

Anjelina,

Here is a sample for custom basemaps and using the Basemap Gallery dijit: (attached is the images that this sample requires)

<!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>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <style>
    html,
    body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }

    #paneHeader {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }

    #rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.22/"></script>

  <script>
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery",
      "dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery,
      parser, BasemapLayer, Basemap
    ) {
      parser.parse();

      map = new Map("map");

      var basemaps = [];
      var waterTemplateLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"
      });
      var waterBasemap = new Basemap({
        layers: [waterTemplateLayer],
        title: "Water Template",
        thumbnailUrl: "images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer"
      });
      var publicSafetyBasemap = new Basemap({
        layers: [publicSafetyLayer],
        title: "Public Safety",
        thumbnailUrl: "images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(error) {
        console.log(error);
      });
    });
  </script>

</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">

    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>

    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">

      <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
        <div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
          <span>Select Basemap</span>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="basemapGallery"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: base map

anjelinaponkerat — Tue, 21 Nov 2017 07:57:24 GMT

This sample can not load secured web services!!! What changes I have to apply in your code?

Regards

Re: base map

RobertScheitlin__GISP — Tue, 21 Nov 2017 12:30:39 GMT

Anjelina,

What do you mean exactly that you cannot load secured web service? Secured web service should work in the code without any changes, assuming that the user has appropriate permissions to the service when they are prompted to login.

Re: base map

anjelinaponkerat — Tue, 21 Nov 2017 13:48:25 GMT

Yes, I can not load secured web services and the page has not login page!!!

If I add token after web service in my code the service load ok, if not dont load!!

Re: base map

RobertScheitlin__GISP — Tue, 21 Nov 2017 14:55:51 GMT

What type of service are you attempting to add? When I add a secured map service I have no problem with the Identity manger login dialog to appear automatically.

Re: base map

anjelinaponkerat — Tue, 21 Nov 2017 15:19:42 GMT

Tiled map service, arcgis 10.2.2

Re: base map

RobertScheitlin__GISP — Wed, 22 Nov 2017 12:26:14 GMT

I see that this question is marked as answered now. Do you mind sharing with the community what you did to fix your issue?

Re: base map

anjelinaponkerat — Thu, 23 Nov 2017 18:31:35 GMT

The issue was related to settings in web service address. my web service was https://.... and web address was http://... . I changed my web address to https and problem solved.

Regards

Re: base map

anjelinaponkerat — Sun, 26 Nov 2017 16:45:16 GMT

I add query buffer to your sample code, but the map service can not show!!.

If I remove map.addLayer(featureLayer); from code the map service load ok . please help me

<!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>Display Multiple ArcGIS Online Services</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body {
height: 97%;
width: 98%;
margin: 1%;
}

#map {
border: solid 1px #B5BCC7;
padding: 0;
}

#paneHeader {
background: url(images/header.png) repeat-x;
color: white;
border-bottom: solid 1px #B5BCC7;
text-align: center;
height: 30px;
margin: 0;
overflow: hidden;
font-size: 16px;
padding: 8px 5px;
}

#rightPane {
width: 150px;
margin: 0;
padding: 0;
}
</style>

], function(
dom, Color, keys, parser, esriConfig,
has, Map,SnappingManager, Measurement,
FeatureLayer, SimpleRenderer, GeometryService,
SimpleLineSymbol, SimpleFillSymbol,
Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate , HomeButton , Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic, SimpleMarkerSymbol
) {
parser.parse();

map = new Map("map");

var basemaps = [];
var waterTemplateLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"
});
var waterBasemap = new Basemap({
layers: [waterTemplateLayer],
title: "Water Template",
thumbnailUrl: "images/waterThumb.png"
});
basemaps.push(waterBasemap);
var publicSafetyLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer"
});
var publicSafetyBasemap = new Basemap({
layers: [publicSafetyLayer],
title: "Public Safety",
thumbnailUrl: "images/safetyThumb.png"
});
basemaps.push(publicSafetyBasemap);

var basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();

basemapGallery.on("error", function(error) {
console.log(error);
});

esriConfig.defaults.io.proxyUrl = "/proxy/";

// Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
outFields: ["POP2000"]
});

// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
featureLayer.setSelectionSymbol(symbol);

// Make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

map.addLayer(featureLayer);

var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;

// When the map is clicked create a buffer around the click point of the specified distance
map.on("click", function(evt){
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map.graphics.clear();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);

var query = new Query();
query.geometry = circle.getExtent();
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
featureLayer.queryFeatures(query, selectInBuffer);
});

});
</script>

</head>

<body class="claro">
<span id="messages">Click on the map to select census block points within 1 mile.</span>

<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">

<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
<div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Select Basemap</span>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>

</html>

Re: base map

RobertScheitlin__GISP — Sun, 26 Nov 2017 19:19:13 GMT

Anjelina,

Your question is pretty different from the original one that has already be marked as answered. You really need to start a new question for this,