Using ArcGIS JavaScript 4.x can someone please point me to an example of creating a map with a FeatureLayer containing polylines?
I have a working sample of a FeatureLayer with PictureMarkerSymbol but I have so-far failed to create a FeatureLayer with polyline graphics.
Any help is greatly appreciated!
Solved! Go to Solution.
Chad,
Here is a sample that shows polylines and specifying line symbology:
Chad,
Here is a sample that shows polylines and specifying line symbology:
Thanks Robert. I have seen this example and it doesn't match my needs but I will study it more closely and maybe ask a follow-up question.
I will try to modify this example to not retrieve its polyline data from a featureserver (which more closely matches my goal).
Chad,
The FeatureLayer can easily be change to a MapServer url instead of a FeatureServer.
I made the edits I wanted to the highway example. My goal was to define the graphics in the client. In case anyone in the future wants a really simple example here is the example with the edits I made.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Visualize features by type - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-legend {
background-color: black;
color: white;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"dojo/domReady!"
],
function(
Map, MapView, FeatureLayer, Legend
) {
/******************************************************************
*
* Define symbols for each unique type. One each for freeways,
* highways, and other major roads
*
******************************************************************/
///////////////////////////////////////////////////////////////////////
// EDIT:
// I'm going to use a simple renderer so I only need one symbol type.
// Comment out unused symbols.
//////////////////////////////////////////////////////////////////////
// Symbol for freeways
// var fwySym = {
// type: "simple-line", // autocasts as new SimpleLineSymbol()
// color: "#FFAA00",
// width: 10,
// style: "solid"
// };
// // Symbol for U.S. Highways
// var hwySym = {
// type: "simple-line", // autocasts as new SimpleLineSymbol()
// color: "#DF73FF",
// width: 7,
// style: "solid"
// };
// Symbol for other major highways
var otherSym = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#EBEBEB",
width: 3,
style: "short-dot"
};
/******************************************************************
*
* Set each unique value directly in the renderer's constructor.
* At least one field must be used (in this case the "CLASS" field).
* The label property of each unique value will be used to indicate
* the field value and symbol in the legend.
*
******************************************************************/
///////////////////////////////////////////////////////////////////////
// EDIT:
// I want this to be really basic so just use a SimpleRenderer and
// point it to the one type of symbol I'm using. Comment out the
// unique-value stuff I'm not using.
///////////////////////////////////////////////////////////////////////
var hwyRenderer = {
//type: "unique-value", // autocasts as new UniqueValueRenderer()
type: "simple",
symbol: otherSym,
// defaultSymbol: otherSym,
// defaultLabel: "Other major roads",
// field: "CLASS",
// uniqueValueInfos: [{
// value: "I", // code for interstates/freeways
// symbol: fwySym,
// label: "Interstate"
// }, {
// value: "U", // code for U.S. highways
// symbol: hwySym,
// label: "US Highway"
// }]
};
///////////////////////////////////////////////////////////////////////
// EDIT:
// Define a list of client side graphics to render on the feature
// layer. These are just polylines that make up two boxes.
///////////////////////////////////////////////////////////////////////
var features = [
{
geometry: {
type: "polyline",
paths: [
[-118, 34],
[-118, 34.15],
[-118.35, 34.15],
[-118.35, 34],
[-118, 34]
]
}
},
{
geometry: {
type: "polyline",
paths: [
[-118.1, 34.05],
[-118.1, 34.1],
[-118.25, 34.1],
[-118.25, 34.05],
[-118.1, 34.05]
]
}
}
]
///////////////////////////////////////////////////////////////////////
// EDIT:
// I'm using client-side graphics so don't point to a feature server
// and do populate the sources property with the features to render on
// the layer. Because I'm using client-side graphics I also need to
// set:
// fields (as an empty array because I don't have any data associated
// with the features), objectIdField (it's value isn't important
// because I'm not using popup)
// spatialReference - docs say it is required but works if commented out
// geometryType - I'm drawing polylines
///////////////////////////////////////////////////////////////////////
// Set the renderer on the layer
var hwyLyr = new FeatureLayer({
//url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Freeway_System/FeatureServer/2",
source: features,
fields: [],
objectIdField: "ObjectID",
spatialReference: { wkid: 4326 },
geometryType: "polyline",
renderer: hwyRenderer
});
// Add the layer to the map
var map = new Map({
basemap: "dark-gray",
layers: [hwyLyr]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.2438934, 34.058481],
zoom: 12
});
/******************************************************************
*
* Add layers to layerInfos on the legend
*
******************************************************************/
var legend = new Legend({
view: view,
layerInfos: [
{
layer: hwyLyr,
title: "Major Roads"
}]
});
view.ui.add(legend, "bottom-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>