topic Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13? in ArcGIS JavaScript Maps SDK Questions

How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Mon, 11 May 2015 18:18:03 GMT

I can successfully change the point symbol used in the measurement widget in 3.13. However, the point symbol in the results is too small to see. Is there a way to resize the symbol in the results? Please see the attached png.

thanks,

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:24:01 GMT

Janice,

There is not a great way to do this but this will work:

.esriMeasurement .esriMeasurementResultTable tr:nth-of-type(3) > td > img{
  height: 50px;
  width: 50px;
}

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Mon, 11 May 2015 19:17:16 GMT

Hi Robert,

I did try this but it made no change for me. If I go into the development tools in ie I can change this manually and it helps a little but still it does not persist.

getting the unique selector from Firefox I get:

tr.esriMeasurementTableRow:nth-child(3) > td:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > image:nth-child(2)

I have tried this in Firefox, Chrome, and IE11 with no luck.

Thanks,

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RadekSvítil — Mon, 11 May 2015 19:46:09 GMT

Hi,

I can confirm Robert's solution works for me. Just added his code to my css template and works without any problem.

Tested in Firefox 37.02.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Mon, 11 May 2015 19:56:08 GMT

Janice,

The image in your attachment how are you specifying it? Is that the correct image? Like Radek confirms I had no problem changing the size of the image using the provided css.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Mon, 11 May 2015 20:19:10 GMT

Robert,

Your suggestion does work if I use the default marker symbol that the measurement widget uses. the issue I am having is trying to resize a custom marker symbol. I tried your code in the sandbox for the sample and it did not work there either. The sample is located at: ArcGIS API for JavaScript Sandbox

Let me know if I am way off on this.... it is entirely possible that I am doing something funky!

Sorry my original post did not really state that I was using a custom symbol.

Thanks,

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Mon, 11 May 2015 20:31:05 GMT

Janice,

OK I see now that the dijit creates a SVG of the picture marker symbol and it is miniture!... Let me see what I can come up with.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Mon, 11 May 2015 20:34:45 GMT

Thanks!

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Mon, 11 May 2015 20:54:07 GMT

Janice,

I think that you need to call tech support and log this as a bug, referring them to your sandbox example. They seem to creating the SVG incorrectly.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:24:04 GMT

Janice,

So I found a workaround for this issue. Here is a full sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Measure Tool</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html,body {
        height:100%;
        width:100%;
        margin:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #map {
        padding:0px;
      }
      #rightPane{
        width:300px;
      }
    </style>

    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Measurement",
        "esri/dijit/Scalebar",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/query",
        "dojo/_base/lang",
        "dojo/dom-attr",
        "dojo/parser",
        "dijit/layout/BorderContainer"
      ], function (
        Map,
        Measurement,
        Scalebar,
        PictureMarkerSymbol,
        SimpleLineSymbol,
        query,
        lang,
        domAttr,
        parser,
        BorderContainer
      ) {
        parser.parse();

        map = new esri.Map("map", {
          basemap: "hybrid",
          center: [-34.541, 32.843],
          zoom: 3
        });

        map.on('load', function(map) {
          initToolbar(map);
        });

        function initToolbar(mymap) {
          //define a new line symbol and point symbol to use for measure tools
          var pms = new PictureMarkerSymbol("images/flag.png",24,24);
          pms.setOffset(9,11);
          var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DOT,
              new dojo.Color([255,0,0,0.55]), 4);
          var measurement = new Measurement({
            map: map,
            lineSymbol:sls,
            pointSymbol:pms
          }, dojo.byId('measurementDiv'));

          measurement.startup();
          measurement.setTool("area",true);
          var node = query(".esriLocationResultSymbol > *")[1];
          domAttr.set(node, "width", 24);
          domAttr.set(node, "height", 24);
          var node2 = query(".esriLocationResultSymbol > svg > image")[1];
          dojo.removeAttr(node2, "x");
          dojo.removeAttr(node2, "y");
          dojo.removeAttr(node2, "transform");
        }
      });
    </script>
  </head>

  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:true"
    style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      </div>
      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div>Use the measurement widget to calculate area, find the distance between locations and display the current mouse location.  </div>
        <div id="measurementDiv"></div>
      </div>
    </div>
  </body>
</html>

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Tue, 12 May 2015 23:07:47 GMT

Robert,

I am not really sure that I follow what you are doing here but it does work!

thank-you for your help!

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Tue, 12 May 2015 23:34:57 GMT

Robert,

This solution only works on my development machine. When I have other people run my application, they do not get the resized image in the measurement results. They still get the itty-bitty one. I'm done for the day, will look at it again tomorrow.

thanks,

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Wed, 13 May 2015 01:12:54 GMT

Janice,

Is the app public?

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Wed, 13 May 2015 14:17:51 GMT

Hey Robert,

The app is not currently public... at least not the version I am working on. I am trying to upgrade to 3.13 before pushing it out to the public. Our public version is at 3.9... Skagit County iMap .

I am using your suggestion of console.info(measurement) to investigate the object but can not find where the changes are getting may by the code you provided. I am assuming that this line of code: query(".esriLocationResultSymbol > *")[1]; finds the second occurrence of the class in the widget. Is there an easy way to locate this in the console. I am using ie11.... I suppose I should try firefox for different developer tools.

How / Where did you find .esriLocationResultSymbol? Maybe I can use something more generic so it works on my users workstations and not just mine.

Still thinking on it,

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Wed, 13 May 2015 14:31:53 GMT

Janice,

I don't use IE unless testing my apps for compatibility in IE. I use FF as my default browser and just right click on the element in the html I want to inspect and choose "Inspect Element" this shows me the classes and css rules applied to that html element.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

JaniceBaird — Wed, 13 May 2015 16:24:15 GMT

Robert,

I have determined (I think) that this is an issue between IE10 and IE11. The code you shared works in IE11 and not in IE10. It also works in Firefox. Since most of my "internal" users are going to IE10, I will not be including the "Flag.png" that my boss asked for at this time... He will need to get used to the new weird point symbol used in the Measurement Widget!

It would however be nice to use a custom symbol and have it work in all browsers.

Thanks for the help on this!

Janice.

Re: How do I resize a custom point symbol in the results of the Measurement Widget in 3.13?

RobertScheitlin__GISP — Wed, 13 May 2015 16:34:39 GMT

Janice,

Your welcome. Sorry my workaround did not work for you in IE 10.