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

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

JaniceBaird

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.

ResizeMeasurementResults.png

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

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>

All comments

JaniceBaird

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.

RobertScheitlin__GISP

Janice,

Is the app public?

JaniceBaird

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.

JaniceBaird

Robert,

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

thank-you for your help!

Janice.

RobertScheitlin__GISP

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>

JaniceBaird

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

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.

RadekSvítil

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.

JaniceBaird

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.

RobertScheitlin__GISP

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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