nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

custom symbology for measurement widgets

Nadir_Hussain

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.

Najděte více příspěvků označených jako

Accepted answers

All comments

RobertScheitlin__GISP

Nadir,

Here is a snippet:

        <SPAN class="comment token">// Create new instance of the Measurement widget</SPAN>
        <SPAN class="keyword token">const</SPAN> measurement <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Measurement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
        measurement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"activeWidget"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
         <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>label <SPAN class="operator token">===</SPAN> <SPAN class="string token">"Distance Measurement"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
           console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
           evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>handleColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">]</SPAN>
           evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>pathPrimaryColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
           evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>pathSecondaryColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
         <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
           console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
           evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>pathColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
           evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>handleColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
           evt<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>fillColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
         <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Nadir_Hussain

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

RobertScheitlin__GISP

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:

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setActiveWidget</SPAN><SPAN class="punctuation token">(</SPAN>type<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">switch</SPAN> <SPAN class="punctuation token">(</SPAN>type<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"distance"</SPAN><SPAN class="punctuation token">:</SPAN>
            activeWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">DistanceMeasurement2D</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
              view<SPAN class="punctuation token">:</SPAN> view
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// skip the initial 'new measurement' button</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">newMeasurement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>handleColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">]</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>pathPrimaryColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>pathSecondaryColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>activeWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"distanceButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"area"</SPAN><SPAN class="punctuation token">:</SPAN>
            activeWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">AreaMeasurement2D</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
              view<SPAN class="punctuation token">:</SPAN> view
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// skip the initial 'new measurement' button</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">newMeasurement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>pathColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>handleColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            activeWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>palette<SPAN class="punctuation token">.</SPAN>fillColor <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>activeWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"areaButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">case</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">:</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>activeWidget<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>activeWidget<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              activeWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              activeWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Lerman

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!

craragon77

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!

MonikaHonkova

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

LuisSolaRuiz

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.

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.