Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
121 lines (107 sloc) 2.85 KB
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Map changes depends on property watching - 4.12</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/Expand", "esri/widgets/BasemapGallery","esri/layers/FeatureLayer"], function(Map, SceneView, Expand, BasemapGallery,FeatureLayer) {
var map = new Map({
basemap: "osm"
});
var Layer = new FeatureLayer({
url: "https://services.arcgis.com/d3voDfTFbHOCRwVR/arcgis/rest/services/REGION_2018/FeatureServer/0",
});
map.add(Layer);
Layer.renderer = {
type: "simple",
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 51,51, 204, 1 ],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width:1
}
}
};
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: 2.35, // lon
y: 47, // lat
z: 3000000 // elevation in meters
},
}
});
var basemapGallery = new BasemapGallery({
view: view,
});
// Create an Expand instance
var widgetExpand = new Expand({
view: view,
content: basemapGallery
});
//watch the property map.basemap.title from the view, if it changes, we call the function
view.watch("map.basemap.title",function(){
widgetExpand.collapse(); //close the expand widget
let varJSON=map.basemap.toJSON();
if (varJSON.baseMapLayers[0].title=="World Imagery"){
Layer.renderer = {
type: "simple",
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 51,51, 204, 0 ],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width:1
}
}
};
}
else{
Layer.renderer = {
type: "simple",
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 51,51, 204, 1 ],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width:1
}
}
};
} });
// Add the expand instance to the ui
view.ui.add(widgetExpand, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
You can’t perform that action at this time.