Set scale dependencies on rendered feature layer(s) in JavaScript 4.x

847
6
Jump to solution
09-03-2019 01:13 PM
ZacStanley3
New Contributor III

Hello-

I'm very green when it comes to Java. I am hoping someone can share a piece of code that will allow me to have a feature layers draw with symbolized trail when I cross a certain scale threshold. It seems this capability existed in JS 3.x but doesn't in 4.x. Any and all help is appreciated. Here's my code so far:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/widgets/Home",
], function(Map, MapView, FeatureLayer, Expand, BasemapGallery, Home, Click) {

var map = new Map({
basemap: "topo-vector"
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.6226858,37.9449276],
zoom: 12
});

// Define a simple renderer and an image symbol
var trailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "18px",
height: "18px"
}
}

// Add labels
var trailheadsLabels = {
symbol: {
type: "text",
color: "#000000",
haloColor: "#FFFFFF",
haloSize: "2px",
font: {
size: "10px",
family: "Verlag",
style: "regular",
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.NAME"
}
};

// Add all trails no use type symbology
var TrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "solid",
color: "#2F5279",
width: "0.7px"
}
};

var Trails = new FeatureLayer({
url:
"https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: TrailsRenderer,

});

map.add(Trails, 0);

// Add hiking only trails
var hikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "short-dot",
color: "#2F5279",
width: "1px"
}
};

var hikeTrails = new FeatureLayer({
url:
"https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: hikeTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian'"
});

// map.add(hikeTrails, 0);

// Add hiking/biking trails
var bikehikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "long-dash",
color: "#2F5279",
width: "1px"
}
};

var bikehikeTrails = new FeatureLayer({
url:
"https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: bikehikeTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Bicycle'"
});

// map.add(bikehikeTrails, 0);

var horsehikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "dash-dot",
color: "#2F5279",
width: ".1px"
}
};

var horsehikeTrails = new FeatureLayer({
url:
"https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: horsehikeTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle'"
});

// map.add(horsehikeTrails, 0);

var muTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "short-dash",
color: "#2F5279",
width: "1px"
}
};

var muTrails = new FeatureLayer({
url:
"https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: muTrailsRenderer,
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle | Bicycle'"
});

// map.add(muTrails, 0);

// Define a simple value renderer and symbols
var onetamareaRenderer = {
type: "simple",
symbol: {
type: "simple-fill",
color: "#D5E5C8",
outline: {
width: 2,
color: "#4E663A"
}
}
};

var onetamLayer = new FeatureLayer ({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Area_of_Interest/FeatureServer/0",
renderer: onetamareaRenderer,
opacity: 0.5
});

map.add(onetamLayer, 0)

// Define a popup for Trailheads
var popupTrailheads = {
"title": "Featured Hike",
"content": "<b>West Peak Loop</b><br>{HikeDesc}{HikeDesc2}{HikeDesc3}<br><br><b>Difficulty:</b> {Difficulty}<br><b>Length: </b>{Length}<br><br><b>Amenities: </b>{Amenities}<br><br><b>Get the Latest:</b> {TheLatest2}"
}

// Create the layer and set the popup
var trailheads = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Featured_Hikes_Trailheads/FeatureServer/0",
outFields: ["HikeDesc","HikeDesc2","HikeDesc3","Difficulty","Length","Amenities", "TheLatest2"],
renderer: trailheadsRenderer,
labelingInfo: [trailheadsLabels],
popupTemplate: popupTrailheads
});

// Add the layer
map.add(trailheads);

view.popup.watch("selectedFeature", function(graphic){
if(graphic.layer === trailheads){
view.popup.triggerAction(0);
}
});

// Create a BasemapGallery widget instance and set
// its container to a div element

var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget
// Use an Esri icon font to represent the content inside
// of the Expand widget

var bgExpand = new Expand({
view: view,
content: basemapGallery
});
// close the expand whenever a basemap is selected
basemapGallery.watch("activeBasemap", function() {
var mobileSize =
view.heightBreakpoint === "xsmall" ||
view.widthBreakpoint === "xsmall";

if (mobileSize) {
bgExpand.collapse();
}
});
// Add the expand instance to the ui

view.ui.add(bgExpand, "top-right");
var homeBtn = new Home({
view: view
});

// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");
});
view.popup.watch("selectedFeature", function(graphic){
if(graphic.layer === trailheads){
view.popup.triggerAction(0); //This calls the popup Zoom To action
}
});



</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
BenElan
Esri Contributor

This link shows the scale for each level of zoom: Web map zoom levels 

View solution in original post

6 Replies
BenElan
Esri Contributor

Hi Zac,

You can set the minScale and maxScale for your layers

You could add multiple layers with different symbologies that display at different scales.

Furthermore, here is a sample that changes symbology based on scale: Create a scale-dependent visualization | ArcGIS API for JavaScript 4.12 

ZacStanley3
New Contributor III

Thanks Ben-

I tried the cloning approach but got tuck when changing the mapView - I will try the min and max scale and report back. Thank you.

0 Kudos
BenElan
Esri Contributor

Here is a short sample that shows switching layers based on the scale: https://codepen.io/benesri/pen/MWgOYjy 

Zoom in to switch.

0 Kudos
ZacStanley3
New Contributor III

Ben,

Thank you so much. Will explore.

0 Kudos
BenElan
Esri Contributor

This link shows the scale for each level of zoom: Web map zoom levels 

View solution in original post

ZacStanley3
New Contributor III

Thanks Ben! I was able to use min and max scale to solve my problem!