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

Measure and draw tool cursor problem

DanielLi

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>

Find more posts tagged with

Accepted answers

All comments

GISiste

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.

AlexGole1

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.

ChuanHung

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.

ChuanHung

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.

DanielLi

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.

DanielLi

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

derekswingley1

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.

DanielLi

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

derekswingley1

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

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

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

DanielLi

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

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

DanielLi

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

All Communities
Recent Posts
Followed Content
Community Help

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