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

ZacStanley3 — Tue, 03 Sep 2019 20:13:56 GMT

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"
});

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>

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

BenElan — Tue, 03 Sep 2019 21:11:24 GMT

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

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

ZacStanley3 — Tue, 03 Sep 2019 21:15:38 GMT

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.

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

BenElan — Tue, 03 Sep 2019 21:33:32 GMT

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

Zoom in to switch.

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

ZacStanley3 — Tue, 03 Sep 2019 21:40:11 GMT

Ben,

Thank you so much. Will explore.

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

BenElan — Tue, 03 Sep 2019 22:53:28 GMT

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

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

ZacStanley3 — Wed, 04 Sep 2019 13:07:09 GMT

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

topic Set scale dependencies on rendered feature layer(s) in JavaScript 4.x in ArcGIS JavaScript Maps SDK Questions

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

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

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

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

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

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

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