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>

derekswingley1 · ‎02-28-2012

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.

DanielLi · ‎02-29-2012

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.

derekswingley1 · ‎02-29-2012

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

DanielLi · ‎02-29-2012

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?

derekswingley1 · ‎02-29-2012

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

DanielLi · ‎02-29-2012

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?

derekswingley1 · ‎02-29-2012

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>

DanielLi · ‎03-01-2012

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

derekswingley1 · ‎03-01-2012

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.