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

JaniceBaird · ‎05-11-2015

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.

RobertScheitlin__GISP · ‎05-12-2015

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>

View solution in original post

RobertScheitlin__GISP · ‎05-11-2015

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

JaniceBaird · ‎05-11-2015

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.

RadekSvítil · ‎05-11-2015

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.

RobertScheitlin__GISP · ‎05-11-2015

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.

JaniceBaird · ‎05-11-2015

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.

RobertScheitlin__GISP · ‎05-11-2015

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.

JaniceBaird · ‎05-11-2015

Thanks!

RobertScheitlin__GISP · ‎05-11-2015

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.

RobertScheitlin__GISP · ‎05-12-2015

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>