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>
<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>Heat Map</title>
<link rel="stylesheet" href="http://myserver.local/arcgis_js_api/library/4.12/esri/themes/dark-green/main.css" />
<style>
html,
body,
#viewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://myserver.local/arcgis_js_api/library/4.12/dojo/dojo.js"></script>
<script>
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>
<div id="viewDiv"></div>
</body>
</html>
