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

Issues with Measurement Widget

MarkLewin

Hi all,

I'm having problems with the Measurement widget. When I attempt to use it, the lines aren't drawn between the markers, but vertically downwards instead. Hard to describe, so I attach a screenshot:

[ATTACH=CONFIG]34242[/ATTACH]

I'm use Alaska state plane coordinates for my operational layers, but a web mercator base map, so my map's spatial reference is web mercator too. I know I need to instantiate a Geometry service in esri/config/defaults, which I have done, and when I step through my code in Firebug I can see that the Measurement widget's _geometryService property is populated correctly.

The code I use to instantiate the widget is simple enough:

this.measure = new Measurement({
 map : this.map,
 defaultAreaUnit : (this.configOptions.units === "metric") ? "esriSquareKilometers" : "esriSquareMiles",
 defaultLengthUnit : (this.configOptions.units === "metric") ? "esriKilometers" : "esriMiles",
 id : 'measureTool'
}, 'measureDiv');

this.measure.startup();

I'm using the ArcGIS Server API for JavaScript v3.9.

Any suggestions would be greatly appreciated as I'm stuck and past deadline! 😮

Mark

measurement_widget_issues.png

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

JonathanUihlein

Mark, that JSFiddle you posted is incomplete.
It doesn't load correctly and it seems to be referencing a few external JS files that were not included.

If you could create a simple sample using just a map, the measurement widget and your operational layer to show off the current issue, it would help a great deal.

I have not been able to recreate the issue with my own custom operational layers so I am leaning toward the issue being unrelated to the actual measurement widget and something in your code affecting your measurements.

Thanks!

MarkLewin

I don't know if it's related, but my scalebar is returning ridiculous figures too. I'm adding the scalebar after all my layers have loaded as instructed, but the values it's showing are orders of magnitude higher than they should be.

I've triple-checked my map's SR, and it's 102100.

Please help!

Thanks in advance,
Mark

MarkLewin

Hi Marla and Ujjwal,

Thanks for your suggestions. I fixed the CSS issue and have verified that my container is "position: absolute;", but I still experience the same issues. I include an updated screenshot and a link to a JSFiddle that contains the page source and CSS.

Thanks again,

Mark

JSFiddle: http://jsfiddle.net/xlbloke/R7a3t/

[ATTACH=CONFIG]34313[/ATTACH]

measurement_widget_issues2.png

JonathanUihlein

Hi Mark,

Please keep us updated with your findings.

The measurement widget is receiving significant updates in the next release.
If this is an internal bug, I want to make sure this is taken care of.

In the meanrime, I am going to try my best to recreate your issue using a similar operational layer.

MarlaKostuk

Hi Mark,

I believe that Ujjwal is on to something with the problem being associated with the CSS. I didn�??t notice the misaligned title bar in the measurement widget. If you have stepped through the code/snooped the web traffic and the widget is working properly, I would double check the CSS. When the CSS is not aligned properly, issues can arise with the placement of measurement line in relation to the position of the cursor.

I don�??t believe that this is an issue with the projection. The operational layer projects on the fly. Without seeing a simple application with the problem reproduced it makes it difficult to identify the issue.

I have attached a couple of older threads that could point you in the right direction.
1. Measure and draw cursor problem
2. Draw cursor offset
3. Basemap and operational layers in different projections

Thanks!
-Marla

UjjwalNarayan1

Can you put the measurement widget markup (HTML) in an absolute positioned div and see if that fixes the issue? Similar to the example Marla provided

[HTML]
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
            <div id="measurementDiv"></div>
            <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
          </div>
</div>
[/HTML]

My hunch is that this could be caused by css positioning problems, because I see that the title bar of your measurement widget is misaligned. Worth a shot 🙂

MarkLewin

Hi Marla,

I wish I could, but I suspect that my problems stem from the projection of my operational layers, which are hosted by a local ArcGIS Server instance. We're using Alaska State Plane:

Map: Geometry (wkid:
PROJCS["NAD_1983_2011_StatePlane_Alaska_1_US_Feet",GEOGCS["GCS_NAD_1983_2011",DATUM["D_NAD_1983_2011",SPHEROID["GRS_1980",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Hotine_Oblique_Mercator_Azimuth_Natural_Origin"],PARAMETER["false_easting",16404166.66666666],PARAMETER["false_northing",-16404166.66666666],PARAMETER["scale_factor",0.9999],PARAMETER["azimuth",-36.86989764583333],PARAMETER["longitude_of_center",-133.6666666666667],PARAMETER["latitude_of_center",57.0],UNIT["Foot_US",0.3048006096012192]])

But my basemaps are in Web Mercator (102100), and therefore my map is too, so I find it hard to see how this can be the case? However, when I remove the operational layers, the measurement tool works fine.

Basically, every time I click on the map to mark a measurement point, I get the little flag, but a line heading due South instead of to the next marker. It's driving me crazy, so anything you could do to help would be greatly appreciated! 🙂

Thanks,
Mark

MarlaKostuk

Hi Mark,

Could you elaborate a little bit more on the issue? Using the measurement widget, are you only able to draw vertical lines? Would you mind sharing a simplified sample of your application in JS fiddle so I can take a look?

This a very simple sample that uses the measurement widget.

I have attached a snippet of how to add the measurement widget is added:

var measurement = new Measurement({
          map: map,
defaultAreaUnit: Units.SQUARE_MILES,
defaultLengthUnit: Units.KILOMETERS,
        }, dom.byId("measurementDiv"));
        measurement.startup();

I hope this helps!

Thanks,
-Marla K.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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