Dear all
I want to change the default symbology of area and line tools that comes with measurement widgets in arcgis java script api 4.15.
i want my own custom symbology for both tools area and distance tools.
Thanks.
Nadir,
Here is a snippet:
// Create new instance of the Measurement widget
const measurement = new Measurement();
measurement.watch("activeWidget", function(evt){
if(evt.label === "Distance Measurement"){
console.info(evt.viewModel.palette);
evt.viewModel.palette.handleColor = [255,0,0,0.8]
evt.viewModel.palette.pathPrimaryColor = [255,0,0,1];
evt.viewModel.palette.pathSecondaryColor = [128,128,128,1];
}else{
console.info(evt.viewModel.palette);
evt.viewModel.palette.pathColor = [255,0,0,1];
evt.viewModel.palette.handleColor = [255,0,0,0.8];
evt.viewModel.palette.fillColor = [255,0,0,0.3];
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Measurement in 2D - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#topbar {
background: #fff;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D"
], function(MapView, WebMap, DistanceMeasurement2D, AreaMeasurement2D) {
var activeWidget = null;
// load a webmap
const webmap = new WebMap({
portalItem: {
id: "990d0191f2574db495c4304a01c3e65b"
}
});
// create the map view
const view = new MapView({
container: "viewDiv",
map: webmap
});
// add the toolbar for the measurement widgets
view.ui.add("topbar", "top-right");
document
.getElementById("distanceButton")
.addEventListener("click", function() {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
document
.getElementById("areaButton")
.addEventListener("click", function() {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DistanceMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements.classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
const measurement = new Measurement();
measurement.watch("activeWidget", function(evt){
if(evt.label === "distanceButton"){
alert("if");
console.info(evt.viewModel.palette);
evt.viewModel.palette.handleColor = [255,0,0,0.8]
evt.viewModel.palette.pathPrimaryColor = [255,0,0,1];
evt.viewModel.palette.pathSecondaryColor = [128,128,128,1];
}else{
alert("else");
console.info(evt.viewModel.palette);
evt.viewModel.palette.pathColor = [255,0,0,1];
evt.viewModel.palette.handleColor = [255,0,0,0.8];
evt.viewModel.palette.fillColor = [255,0,0,0.3];
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button
class="action-button esri-icon-measure-line"
id="distanceButton"
type="button"
title="Measure distance between two or more points"
></button>
<button
class="action-button esri-icon-measure-area"
id="areaButton"
type="button"
title="Measure area"
></button>
</div>
</body>
</html>
the above is me testing code.i applied the which you give it to me.But it not making any effect.
Thanks
Nadir,
That's because you are using the DistanceMeasurement2D and AreaMeasurement2D and Not the Measurement widget. Didn't you see the errors in the console about the Menasurement? In your code it would look like this:
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DistanceMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
activeWidget.viewModel.palette.handleColor = [255, 0, 0, 0.8]
activeWidget.viewModel.palette.pathPrimaryColor = [255, 0, 0, 1];
activeWidget.viewModel.palette.pathSecondaryColor = [128, 128, 128, 1];
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
activeWidget.viewModel.palette.pathColor = [255, 0, 0, 1];
activeWidget.viewModel.palette.handleColor = [255, 0, 0, 0.8];
activeWidget.viewModel.palette.fillColor = [255, 0, 0, 0.3];
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
Hello Robert,
Thank you! This is a good idea, but it seems that the palette property is only present in 2d's measurement widget viewModel, I use DirectLineMeasurement3D widget, which doesn't have palette property in its corresponding viewModel. I output viewModel from the console and don't see any properties related to symbols. Do you have any suggestions? Thank you so much!
Hello!
So I had some trouble changing the default colors for two different measurement tool (a distance line tool and an area measurement tool from the measurement widget) in React.js. This post was SUPER helpful but I want to add a few things. I am using React.js version 17.0.1 running with Node.js v 16.0.0 and the arcgis/core package version 4.24
Hope this helps someone out there! Good luck! You can do it!
Hello @craragon77 @RobertScheitlin__GISP ! Thanks for sharing this, but I am testing it and palette attribute does not exist in viewModel in esri version 4.28 when I console log it.
Hello,
have anyone tried to change the colour using the ESM? I created a simple Ex WAB widget for the purposes of being able to control the colour of the measurement graphics but I can't see the palette property on the viewModel.
Also, is it possible to turn off the map measurement labels?
I found that someone submitted an idea:
So hopefully available OOTB soon.
Thank you