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>
