Issue with BasemapToggle

KafilBaig — Tue, 17 Sep 2019 08:02:34 GMT

I have added basemaptoggle in to my page it works fine for one map and other map doesn't come up when we try to toggle.

Please let me know if am missing anything here .

please find my code below.

<!DOCTYPE html>

<style>

html,

body,

#viewDiv {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

</style>

var myMap, view;

require([

"esri/Basemap",

"esri/layers/TileLayer",

//"esri/layers/CSVLayer",

"esri/layers/FeatureLayer",

"esri/layers/GraphicsLayer",

"esri/Map",

"esri/views/MapView",

"esri/widgets/BasemapToggle"

], function (Basemap, TileLayer, FeatureLayer, GraphicsLayer, Map, MapView, BasemapToggle) {

// --------------------------------------------------------------------

// If you do not have public Internet access then use the Basemap class

// and point this URL to your own locally accessible cached service.

// Otherwise you can just use one of the named hosted ArcGIS services.

// https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

// --------------------------------------------------------------------

//var url =

// "http://myserver.local/earthquakes/2.5_week.csv";

var featureurl =

"http://myserver.local:6080/arcgis/rest/services/QARS1/MapServer";

var LandmarkUrl =

"http://myserver.local:6080/arcgis/rest/services/Landmarks/MapServer";

var PhoneLogUrl =

"http://myserver.local:6080/arcgis/rest/services/Cell/MapServer/0";

var layer = new TileLayer({

url: "http://myserver.local:6080/arcgis/rest/services/QatarVectorMap2019/MapServer"

});

var customBasemap = new Basemap({

baseLayers: [layer],

title: "Vector",

id: "myBasemap"

});

var satlayer = new TileLayer({

url: "http://myserver.local:6080/arcgis/rest/services/Satellite2018/MapServer"

});

var SatelliteBasemap = new Basemap({

baseLayers: [satlayer],

title: "Satellite",

id: "SatBasemap",

thumbnailUrl: "http://myserver.local/HeatMap_JS/Images/s.png"

});

// Paste the url into a browser's address bar to download and view the attributes

// in the CSV file. These attributes include:

// * mag - magnitude

// * type - earthquake or other event such as nuclear test

// * place - location of the event

// * time - the time of the event

//var template = {

// title: "{place}",

// content: "<table border='1' width='430'><tr><td width='150' style='font-weight:bold; font-size:14px;'>Magnitude</td><td width='80'>Type</td><td width='80'>Place</td><td width='90'>Time</td></tr><tr><td width='150'>{mag}</td><td width='80'>{type}</td><td width='80'>{place}</td><td width='90'>{time}</td></tr></table>"

//};

var feattemplate = {

title: "{ELECTRICITY_NO}",

content: "<table border='1' width='430'><tr><td width='150' style='font-weight:bold; font-size:14px;'>ELECTRICITY_NO</td><td width='80'>ZONE_NO</td><td width='80'>STREET_NO</td><td width='90'>BUILDING_NO</td></tr><tr><td width='150'>{ELECTRICITY_NO}</td><td width='80'>{ZONE_NO}</td><td width='80'>{STREET_NO}</td><td width='90'>{BUILDING_NO}</td></tr></table>"

};

var Landmarktemplate = {

title: "Landmark : {ANAME}",

content: "{ANAME}<BR>{ENAME}<BR>{ZONE_NO}<BR>{STREET_NO}"

};

var currentClosureTemplate = {

title: "CellID : {CELLID}",

content: formatContent,

outFields: ["*"]

};

function formatContent(attractions) {

var cell_id = attractions.GraphicsLayer.attributes.CELLID;

var date_to = new Date(attractions.GraphicsLayer.attributes.starttime);

return cell_id + "<br> calls recieved at" + date_to.toLocaleString();

}

var Celltemplate = {

title: "CellID : {CELLID}",

content: "<b>Cell ID : {CELLID}<BR>OtherParty Number : {OTHER_PARTY}<BR>OtherParty Name : {PER_NAME}<BR>Operator : {OPERATOR_ID}<BR>Start DateTime : {STARTTIME}",

fieldInfos: [{

fieldName: "starttime",

format:

{

dateFormat: "short-date-long-time-24"

}

]

};

// The heatmap renderer assigns each pixel in the view with

// an intensity value. The ratio of that intensity value

// to the maxPixel intensity is used to assign a color

// from the continuous color ramp in the colorStops property

var renderer = {

type: "heatmap",

colorStops: [

{ color: "rgba(63, 40, 102, 0)", ratio: 0 },

{ color: "#472b77", ratio: 0.083 },

{ color: "#4e2d87", ratio: 0.166 },

{ color: "#563098", ratio: 0.249 },

{ color: "#5d32a8", ratio: 0.332 },

{ color: "#6735be", ratio: 0.415 },

{ color: "#7139d4", ratio: 0.498 },

{ color: "#7b3ce9", ratio: 0.581 },

{ color: "#853fff", ratio: 0.664 },

{ color: "#a46fbf", ratio: 0.747 },

{ color: "#c29f80", ratio: 0.83 },

{ color: "#e0cf40", ratio: 0.913 },

{ color: "#ffff00", ratio: 1 }

maxPixelIntensity: 25,

minPixelIntensity: 0

};

//var csvlayer = new CSVLayer({

// url: url,

// title: "Magnitude 2.5+ earthquakes from the last week",

// copyright: "USGS Earthquakes",

// popupTemplate: template,

// renderer: renderer

//});

var QARSlayer = new FeatureLayer({

url: featureurl,

popupTemplate: feattemplate

});

var Landmarklayer = new FeatureLayer({

url: LandmarkUrl,

popupTemplate: Landmarktemplate

});

var attractions = new FeatureLayer({

url: PhoneLogUrl,

outFields: ["*"],

visible: false,

popupTemplate: Celltemplate,

renderer: renderer

});

//GraphicsLayer for desplaying results

var resultsLayer = new GraphicsLayer();

myMap = new Map({

basemap: customBasemap,

layers: [QARSlayer, Landmarklayer, attractions]

});

view = new MapView({

center: [224211.167, 394822.380], // long, lat

container: "viewDiv",

map: myMap,

zoom: 1,

minzoom: 0,

maxzoom: 9

});

//query all features from the attractions layer

view.when(function () {

return attractions.when(function () {

var query = attractions.createQuery();

return attractions.queryFeatures(query);

});

})

.then(addToSelect);

// Add the unique values to the attractions type

// select element. This will allow the user

// to filter attractions by type.

function addToSelect(values) {

return setattractionsDefinitionExpression(25);

}

// set the definition expression on the attractions

// layer to reflect the selection of the user

function setattractionsDefinitionExpression(newValue) {

//You messed up the SQL syntax for the defenition query

attractions.definitionExpression = "SQ = '" + newValue + "'";

if (!attractions.visible) {

attractions.visible = true;

}

//You misspelled the function name here

return queryForAttractionGeometries();

}

// Get all the geometries of the attractions layer

// the createQuery() method creates a query

// object that respects the definitionExpression

// of the layer

function queryForAttractionGeometries() {

var attractionsQuery = attractions.createQuery();

return attractions.queryFeatures(attractionsQuery)

.then(function (response) {

attractionsGeometries = response.features.map(function (feature) {

return feature.geometry;

});

return attractionsGeometries;

});

}

//***Add div element to show coordinates ***//

var coordsWidget = document.createElement("div");

coordsWidget.id = "coordsWidget";

coordsWidget.className = "esri-widget esri-component";

coordsWidget.style.padding = "7px 15px 5px";

view.ui.add(coordsWidget, "bottom-right");

//** Update Lat,Lon,Zomm and scale **//

function showCoordinates(pt) {

var coords = "X/Y : " + pt.x.toFixed(3) + " " + pt.y.toFixed(3) + "| Scale 1 :" + Math.round(view.scale * 1) / 1 + "| Zoom" + view.zoom;

coordsWidget.innerHTML = coords;

}

//*** Add event and show center coordinates after the view is finished moving eg : zoom,pan ***//

view.watch(["stationary"], function () {

showCoordinates(view.center);

});

//*** Add event to show mouse coordinates on click and move ***//

view.on(["pointer-down", "pointer-move"], function (evt) {

showCoordinates(view.toMap({x: evt.x, y: evt.y}));

});

var toggle = new BasemapToggle({

view: view,

nextBasemap: SatelliteBasemap,

titleVisible: true

});

view.ui.add(toggle, { position: "top-right" });

});

</script>

</head>

<body>

</body>

</html>

Re: Issue with BasemapToggle

RobertScheitlin__GISP — Tue, 17 Sep 2019 12:49:20 GMT

Kafil,

All basemaps have to have the same spatial reference or they will not work together.

Re: Issue with BasemapToggle

KafilBaig — Tue, 17 Sep 2019 13:37:51 GMT

Thanks Robert ,

All basemaps are in same spatial reference 2932. Again I tried to referesh 3-4 times and it worked .

Sent from my iPhone

topic Re: Issue with BasemapToggle in ArcGIS JavaScript Maps SDK Questions

Issue with BasemapToggle

Re: Issue with BasemapToggle

Re: Issue with BasemapToggle