silly question time - changing color of feature layer polygon

tiwariC · ‎09-14-2023

Hi guys I am working with a polygon feature layer and just want to be able to change the color I dont need unique values I just need to adjust the color across the board. How do I do this?

JeffreyThompson2 · ‎09-15-2023

This code can replace your featureLayer and simpleRenderer declaration. You may also need to remove the quotation marks from the keys in your popupTemplate. They are unnecessary and could cause problems.

const adm2_nfi = new FeatureLayer({
url: "https://services.arcgis.com/qovwaCdMoEzUUFzS/arcgis/rest/services/ukr_adm2_NFI/FeatureServer/0",
popupTemplate: popupadmin2_NFI,
renderer: {
  type: 'simple',
  symbol: {
     type: 'simple-fill',
     color: [0,76,115,0.04]
  }
}
});

GIS Developer
City of Arlington, Texas

View solution in original post

JeffreyThompson2 · ‎09-14-2023

When importing your featureLayer, use the renderer property.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#renderer

Use color for fill color and the outline object to control the outline.

GIS Developer
City of Arlington, Texas

tiwariC · ‎09-14-2023

Hey tried it but the feature layer stops populating here is my code, any help would be appreciated.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Tab title</title>
<style>
html,
body,
#heading {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #f0f0f0;
}

.header {
text-align: left;
background: #cca1a2;
color: rgb(255, 255, 255, 0.9);
height: 44px;
display: flex;
align-items: center;
font-weight: bolder;
font-size: 24pt;
}

.header img {
height: 40px;
margin: 0 8px 0 8px;
}

#viewDiv {
padding: 0;
margin: 0;
height: calc(100% - 44px);
width: 100%;
}
</style>

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

require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol"

], function(esriConfig,Map, MapView, FeatureLayer, SimpleRenderer, SimpleFillSymbol) {

esriConfig.apiKey = "AAPK046ec2b5a3d04ed29e6bb8b67a2f0f0eyHUHGveaAshcvy3mD3hVRZV6V0UXj2DoH7o-Dp4x_pAtu67phCz1BpEm-rGkNwc2";

const map = new Map({
basemap: "gray"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [31.165,47.78],
zoom: 7
});

//Feature Layer Popup
const popupadmin2_NFI = {
"title": "Breakdown of population reached by Non-Food Items (NFI)",
"content": "<b>Oblast:</b> {ADM1_EN}<br><b>Raoin:</b> {ADM2_EN}<br><b>Provision of NFI:</b> {Provision_of_NFIs}<br><b>Provision of Winter Clothes:</b> {Provision_of_Winter_Clothes}<br><b>Support of Winter Energy Needs:</b> {Support_winter_energy_needs}<br><b>Total People Reached:</b>{Total}",
"format": {
"digitSeparator": true
},
"stringFieldOption": "text-box",
}

//ADM2_Layer (polygon)
const adm2_nfi = new FeatureLayer({
url: "https://services.arcgis.com/qovwaCdMoEzUUFzS/arcgis/rest/services/ukr_adm2_NFI/FeatureServer/0",
popupTemplate: popupadmin2_NFI,
});

layer.adm2_nfi = new SimpleRenderer({
symbol: new SimpleFillSymbol({
color: "rgba(0,76,115,0.04)",
outline:
})
});

map.add(adm2_nfi, 0);
});

</script>
</head>

<div class="header"><img src="https://unhcr.maps.arcgis.com/sharing/rest/content/items/9ee9d07c182742ed854bb3433e72a57d/data"/>Thematic Breakdown of Activites % People Reached</div>

</html>

JeffreyThompson2 · ‎09-15-2023

This code can replace your featureLayer and simpleRenderer declaration. You may also need to remove the quotation marks from the keys in your popupTemplate. They are unnecessary and could cause problems.

const adm2_nfi = new FeatureLayer({
url: "https://services.arcgis.com/qovwaCdMoEzUUFzS/arcgis/rest/services/ukr_adm2_NFI/FeatureServer/0",
popupTemplate: popupadmin2_NFI,
renderer: {
  type: 'simple',
  symbol: {
     type: 'simple-fill',
     color: [0,76,115,0.04]
  }
}
});

GIS Developer
City of Arlington, Texas

tiwariC · ‎09-21-2023

thank you Jeffery!