<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Visualize data with rotation | Sample | ArcGIS API for JavaScript 4.18</title>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], function(Map, MapView, FeatureLayer) {
// Create an arrow symbol using an SVG path
// Since the arrow points downward, we set
// the angle to 180 degrees to point to
// 0 geographic degrees north
const symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
color: "#ffff00",
outline: {
color: [0, 0, 0, 0.7],
width: 0.5
},
angle: 180,
size: 15
};
/******************************************************
*
* Create a SimpleRenderer where each feature will be
* rendered with the same symbol (in this case, an arrow).
* Set the symbol on the renderer and a "rotation"
* visual variable that points to a field in the stream service
* that contains heading information for each feature.
* The "geographic" rotation type assumes 0 degrees is due north.
*
* The size visual variable resizes each symbol
* based on the feature's wind speed.
*
*******************************************************/
const rotationRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: symbol,
visualVariables: [{
type: "rotation",
field: "WIND_DIRECT",
rotationType: "geographic"
},
{
type: "size",
field: "WIND_SPEED",
minDataValue: 0,
maxDataValue: 60,
minSize: 8,
maxSize: 40
}
]
};
// Construct the layer and add it to the map
const layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0",
renderer: rotationRenderer
});
const map = new Map({
basemap: "satellite",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
extent: {
spatialReference: {
wkid: 3857
},
xmin: -41525513,
ymin: 4969181,
xmax: -36687355,
ymax: 9024624
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.