topic Re: custom symbology for measurement widgets in ArcGIS JavaScript Maps SDK Questions

custom symbology for measurement widgets

NadirHussain — Sat, 04 Jul 2020 19:17:15 GMT

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.

Re: custom symbology for measurement widgets

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:13:02 GMT

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];
         }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: custom symbology for measurement widgets

NadirHussain — Mon, 06 Jul 2020 09:00:44 GMT

<!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>

#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>

// 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;
}
}

the above is me testing code.i applied the which you give it to me.But it not making any effect.

Thanks

Re: custom symbology for measurement widgets

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:13:05 GMT

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;
        }
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: custom symbology for measurement widgets

Lerman — Mon, 07 Dec 2020 04:25:06 GMT

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!

Re: custom symbology for measurement widgets

craragon77 — Thu, 16 Mar 2023 13:59:29 GMT

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

The click logic for the measurement tool runs best in a useEffect hook after the initialization of the Measurement widget (i don't know why but it runs a lot smoother)
The code for the area widget in the 'else' statement of the first comment works like a charm. you can plug that directly into whatever you're doing. Just be sure to change the colors you want using standard rbga css (e.g. [255, 255, 255, 1] or [255, 102, 255,0.5] )
The direct measurement tool color change DOES NOT work as written. the handleColor key works fine as written, but the pathPrimaryColor and pathSecondaryColor don't work because in the of the 'a' in the rgba css. When you change the colors they won't show up on the map. You have the change the 'a' to '255' to make any color appear. It took me forever to figure out why.

Finally, I'd recommend breaking up the 'watch' method into two separate functions honestly since the event is undefined at the moment of initialization in React.js because of how the life cycle of components work. If you look at Chrome dev tools in the console for the 'event' you'll see everything you're looking for but because info in the console is displayed RETROACTIVELY (you'll see a little 'i' icon in the console explaining why in the Chrome dev console). That's why if you have 'console.log(evt)' you'll see everything but 'console.log(evt.label)' is undefined. Because the evt.label at the moment when it prints is not defined YET. I had a tough time making the if/else work, so its easier to break up the distance and area measurement css logic into two different code blocks if possible.

Hope this helps someone out there! Good luck! You can do it!

Re: custom symbology for measurement widgets

mh19 — Mon, 11 Sep 2023 09:04:34 GMT

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:

https://community.esri.com/t5/arcgis-javascript-maps-sdk-ideas/measurement-2d-areameasurement2dviewmodel-and/idc-p/1207712#M165

So hopefully available OOTB soon.

Thank you

Re: custom symbology for measurement widgets

LuisSolaRuiz — Fri, 16 Aug 2024 10:30:16 GMT

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.