custom symbology for measurement widgets

905
4
07-04-2020 12:17 PM
NadirHussain
Occasional Contributor II

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.

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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];
         }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
NadirHussain
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
        }
      }
0 Kudos
Lerman
by
New Contributor III

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!

 

0 Kudos