Measure and draw tool cursor problem

DanielLi · ‎02-28-2012

When i try to draw a point, line, etc., the drawing is placed a few inches from where my cursor is pointing. If i change the "units display" on measure tool, then ALL the tools start drawing where my cursor points. I looked at the samples and tried to find differences in code but the only thing i am doing different is not setting an initial extent which shouldn't be a problem since the map service should be using the default extent.

Here is my code:

            dojo.require("esri.map");
            dojo.require("esri.dijit.Measurement");
            dojo.require("esri.dijit.Scalebar");
            dojo.require("dojox.layout.FloatingPane");
            dojo.require("esri.arcgis.utils");
            dojo.require("esri.toolbars.draw");
            dojo.require("dijit.dijit");
            dojo.require("esri.dijit.Bookmarks");

            dojo.require("dijit.form.CheckBox");
            dojo.require("esri.SnappingManager");

            var map;

            function Init() {
                esri.config.defaults.io.proxyUrl = "../../proxy.ashx";
                esri.config.defaults.io.alwaysUseProxy = true;
                esri.config.defaults.geometryService = new esri.tasks.GeometryService("@(Model.GeometryService)");

                map = new esri.Map("map");

                // Add Map Service Layer
                var baseMap = new esri.layers.ArcGISDynamicMapServiceLayer("@(Model.MapService)");
                map.addLayer(baseMap);

                // Measurement tool
                dojo.connect(map, 'onLoad', function (map) {
                    dojo.connect(dojo.byId('map'), 'resize', map, map.resize);


                });

                addMeasurementWidget();
            }

            dojo.addOnLoad(Init);

// Creates floating panel and measurement tool for measurement widget
function addMeasurementWidget() {
    var fp = new dojox.layout.FloatingPane({
        title: "Measurement Tool<img style='right:2px; position:absolute;' onclick='Javascript:toggleMeasureButton();' src='https://www.arcgis.com/apps/OnePane/basicviewer/images/close.png' />",
        resizeable: false,
        dockable: false,
        closable: false,
        style: "position:absolute; top:0; left:50px; width:245px; height: 175px; z-index: 100; visibility: hidden;",
        id: 'floater'
    }, dojo.byId('floater'));

    fp.startup();

    measure = new esri.dijit.Measurement({
        map: map,
        id: 'measureTool'
    }, 'measureDiv');

    measure.startup();

    var measureButton = new dijit.form.ToggleButton({
        id: "measureButton",
        iconClass: "esriMeasureIcon"
    });

    dojo.connect(measureButton, "onClick", function() {
        toggleMeasureButton();
    });

    dojo.byId('divToolbar').appendChild(measureButton.domNode);
}

// Creates toggle for showing and hiding measurement widget
function toggleMeasureButton() {
    if (dojo.byId('floater').style.visibility === 'hidden') {
        dijit.byId('floater').show();
    }
    else {
        dijit.byId('floater').hide();
        dijit.byId('measureButton').set('checked', false);
        var measure = dijit.byId('measureTool');
        measure.clearResult();

        if (measure.activeTool) {
            measure.setTool(measure.activeTool, false);
        }
    }
}

    <body class="claro">
        <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" style="height: 100%; width: 100%;">
            <div id="divToolbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
            </div>
            <div id="map" style="width: 100%; height:100%" data-dojo-type="dijit.layout.ContentPane">
                <div id="floater" class="dojoxFloatingPane dijitContentPane dojoxFloatingPaneFg" style="z-index: 100; visibility:hidden; position: absolute; top: 0px; left: 50px; width: 249px; height: 179px; opacity: 1;">
                    <div id="measureDiv"></div>
                </div>
        </div>
    </body>

DanielLi · ‎03-19-2012

Hmm...I can't seem to reproduce it with other map services....

DanielLi · ‎04-17-2012

I have figured out the problem. The div containing the map needs a margin of 5px and 0px padding.
I.E.

<div id="map" style="margin:5px; padding:0px;"></div> is the solution.

This was such a headache to figure out. Esri needs to document this for those not using their built-in style sheets. I hope anyone else who runs into this same problem finds this post.

ChuanHung · ‎08-13-2012

I'm having the same problem in Google Chrome (Version 21.0.1180.77 m) and adding the margin/padding isn't working for me. Has anyone found a solution to this? Thanks in advance.

ChuanHung · ‎08-13-2012

I'm having the same problem in Google Chrome (Version 21.0.1180.77 m) and adding the margin/padding isn't working for me. Has anyone found a solution to this? Thanks in advance.

No sure what went wrong but I took out this part of the code which I copied from this sample

#map_graphics_layer{
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: pulse;
   -webkit-animation-timing-function: ease-in-out;
}

and everything worked after that. Perhaps there's a bug in the webkit regarding animations.

AlexGole1 · ‎05-14-2014

No sure what went wrong but I took out this part of the code which I copied from this sample

#map_graphics_layer{
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: pulse;
   -webkit-animation-timing-function: ease-in-out;
}

and everything worked after that. Perhaps there's a bug in the webkit regarding animations.

Please help! I am experiencing the same issue. And none of the Technics above have worked for me yet.

GISiste · ‎01-29-2016

Hi Daniel

I've exactly the same problem. I tried your suggestion that you posted but still not working.

Were you able to resolve the problem?

Has anyone else an idea about the solution?

Thank you.