topic Re: Measure and draw tool cursor problem in ArcGIS JavaScript Maps SDK Questions

Measure and draw tool cursor problem

DanielLi — Tue, 28 Feb 2012 20:24:55 GMT

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>

Re: Measure and draw tool cursor problem

derekswingley1 — Tue, 28 Feb 2012 20:42:39 GMT

Can you post the CSS for your site? If you search this forum for drawing and offset issues you'll find some older threads that had problems which boiled down to markup structure (drawing toolbar being created inside the map content pane) and/or CSS.

Re: Measure and draw tool cursor problem

DanielLi — Wed, 29 Feb 2012 13:56:17 GMT

Can you post the CSS for your site? If you search this forum for drawing and offset issues you'll find some older threads that had problems which boiled down to markup structure (drawing toolbar being created inside the map content pane) and/or CSS.

Re: Measure and draw tool cursor problem

derekswingley1 — Wed, 29 Feb 2012 14:38:44 GMT

Nothing jumps out at me...what's your markup look like?

Re: Measure and draw tool cursor problem

DanielLi — Wed, 29 Feb 2012 15:48:10 GMT

I'm not sure what you mean. I am using HTML 5. All my javascript and css is in the <head></head> tag

<!DOCTYPE HTML>

Nothing jumps out at me...what's your markup look like?

Re: Measure and draw tool cursor problem

derekswingley1 — Wed, 29 Feb 2012 16:53:13 GMT

Markup meaning your actual HTML for your page. Can you post your HTML for your page?

Re: Measure and draw tool cursor problem

DanielLi — Wed, 29 Feb 2012 19:39:49 GMT

I'm not sure if i'm allowed to post my map service so i renamed it as "AnonymousSite" in this post

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>
            Map Viewer
        </title>
        <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css" />
        <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dojox/layout/resources/floatingpane.css" />
        <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.7compact/js/esri/dijit/css/Measurement.css" />
        <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.7compact/js/esri/dijit/css/InfoWindow.css" />
        <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.7compact/js/esri/dijit/css/Scalebar.css" />
        <link rel="stylesheet" type="text/css" href="https://www.arcgis.com/apps/OnePane/basicviewer/css/layout.css" />
        <link rel="stylesheet" type="text/css" href="https://www.arcgis.com/apps/OnePane/basicviewer/css/gray.css" />
        <link rel="stylesheet" type="text/css" href="https://community.esri.com/Content/themes/mapviewer/mapviewerlayout.css" />
        <style type="text/css">
            .zoomoutIcon { background-image:url(../../Content/themes/mapviewer/images/nav_zoomout.png); width: 16px; height: 16px; }
            .zoominIcon { background-image:url(../../Content/themes/mapviewer/images/nav_zoomin.png); width: 16px; height: 16px; }
            .panIcon { background-image: url(../../Content/themes/mapviewer/images/nav_pan.png); width: 16px; height: 16px; }
            .zoomprevIcon { background-image: url(../../Content/themes/mapviewer/images/nav_previous.png); width: 16px; height: 16px; }
            .zoomnextIcon { background-image: url(../../Content/themes/mapviewer/images/nav_next.png); width: 16px; height: 16px; }
            .zoomfullextIcon { background-image: url(../../Content/themes/mapviewer/images/nav_fullextent.png); width: 16px; height: 16px; }
        </style>
        <script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis?v=2.7"></script>
        <script type="text/javascript" src="../../Scripts/MapViewer/layout.js"></script>
        <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
        <script type="text/javascript">
            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("AnonymousSite/ArcGIS/rest/services/Geometry/GeometryServer");

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

                // Add Map Service Layer
                var baseMap = new esri.layers.ArcGISDynamicMapServiceLayer("AnonymousSite/ArcGIS/rest/services/SecureServices/BuildingsTraining/MapServer");
                map.addLayer(baseMap);

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

                // Navigation toolbar
                navTools = new esri.toolbars.Navigation(map);
                addNavigationTools();

                // Drawing toolbar
                addDrawingWidget();
             }

            dojo.addOnLoad(Init);
         </script>
    </head>

    <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 id="drawingFloater" class="dojoxFloatingPane dijitContentPane dojoxFloatingPaneFg" style="z-index: 100; visibility:hidden; position: absolute; top: 0px; left: 50px; width: 249px; height: 179px; opacity: 1;">
                    <div id="drawingDiv"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Markup meaning your actual HTML for your page. Can you post your HTML for your page?

Re: Measure and draw tool cursor problem

derekswingley1 — Sun, 12 Dec 2021 02:38:20 GMT

First thing to do is remove width and height from your map content pane and specify it's region as center like so:

<div id="map" 
    data-dojo-type="dijit.layout.ContentPane" 
    data-dojo-props="region:'center'"> 
</div>

Re: Measure and draw tool cursor problem

DanielLi — Thu, 01 Mar 2012 21:00:23 GMT

Ok. I've made the change. Still no luck so far.

Re: Measure and draw tool cursor problem

derekswingley1 — Thu, 01 Mar 2012 21:19:18 GMT

I don't have a silver bullet for you. Can you post a simple page that can be used to reproduce this? If you could put it on jsfiddle, that would be even better.

Re: Measure and draw tool cursor problem

DanielLi — Mon, 19 Mar 2012 21:58:31 GMT

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

Re: Measure and draw tool cursor problem

DanielLi — Tue, 17 Apr 2012 18:45:37 GMT

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.

Re: Measure and draw tool cursor problem

ChuanHung — Mon, 13 Aug 2012 17:52:52 GMT

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.

Re: Measure and draw tool cursor problem

ChuanHung — Mon, 13 Aug 2012 18:29:51 GMT

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.

Re: Measure and draw tool cursor problem

AlexGole1 — Wed, 14 May 2014 22:06:15 GMT

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.

Re: Measure and draw tool cursor problem

GISiste — Fri, 29 Jan 2016 17:54:03 GMT

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.