Cursor offset after adding navigation toolbar

NhuMai · ‎01-21-2017

I'm having cursor position issues now that I've added a navigation tool bar to my map. This affects not only the window drawn for map zoom, but identifed objects as well.

I've seen this post about popups being in the wrong position, and have attempted to parse before map initialization, but the problem persists. My cursor still traps the wrong position (low and left).

My map and tool bar are created like this (haven't included all modules, but this targets where the issue is) :

Map.js:

var baseMapLayerWorld;

var myLayer;

require([
 "dojo/parser",
 "dojo/on",
 "esri/map",
 "esri/toolbars/navigation",
 "esri/dijit/Search",
 "esri/dijit/Scalebar",
 "dijit/Toolbar",
 "dijit/form/Button",
 "esri/layers/ArcGISTiledMapServiceLayer",
 "esri/layers/ArcGISDynamicMapServiceLayer",
 "esri/layers/FeatureLayer",
 "esri/InfoTemplate",
 "esri/geometry/Extent",
 "dijit/layout/BorderContainer",
 "dijit/layout/ContentPane",
 "dojox/layout/ExpandoPane",
 "dijit/layout/AccordionContainer",
 "dijit/layout/TabContainer",
 "dojo/domReady!"
], function (parser, on, Map, Navigation, Search, Scalebar, Toolbar, Button, ArcGISTiledMapServiceLayer, DynamicMapServiceLayer, FeatureLayer, InfoTemplate, Extent) {

parser.parse();

baseMapLayerWorld = new DynamicMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");
myLayer = new DynamicMapServiceLayer("http://ourserver/arcgis/rest/services/COMMUNE/Public/MapServer");

 var bounds = new Extent({
 "xmin":-17012392,
 "ymin":-2139604,
 "xmax":-16498016,
 "ymax":-1750718,
 "spatialReference":{"wkid":102100}
 });

window.myMap = new Map("map", {
 extent: bounds,
 logo: false
 });

window.myMap.addLayers([baseMapLayerWorld,myLayer]);

var scalebar = new Scalebar({
 map: window.myMap,
 scalebarUnit: "metric",
 attachTo: "top-right",
 scalebarStyle: "line"
 });

dojo.connect(window.myMap, "onExtentChange", showExtent);

var navToolbar;
 navToolbar = new Navigation(window.myMap);

var zoomInButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "zoominIcon",
 onClick: function () {
 //alert("test button clicked")
 navToolbar.activate(Navigation.ZOOM_IN);
 }
 }, "zoomin");
 zoomInButton.startup();

var zoomOutButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "zoomoutIcon",
 onClick: function () {
 //alert("test button clicked")
 navToolbar.activate(Navigation.ZOOM_OUT);
 }
 }, "zoomout");
 zoomOutButton.startup();

var zoomFullExtButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "zoomfullextIcon",
 onClick: function () {
 //alert("test button clicked")
navToolbar.zoomToFullExtent();
 }
 }, "zoomfullext");
 zoomFullExtButton.startup();

var zoomPreviousButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "zoomprevIcon",
 onClick: function () {
 //alert("test button clicked")
 navToolbar.zoomToPrevExtent();
 }
 }, "zoomprev");
 zoomPreviousButton.startup();

var zoomNextButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "zoomnextIcon",
 onClick: function () {
 //alert("test button clicked")
 navToolbar.zoomToNextExtent();
 }
 }, "zoomnext");
 zoomNextButton.startup();

var panButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "panIcon",
 onClick: function () {
 //alert("test button clicked")
 navToolbar.activate(Navigation.PAN);
 }
 }, "pan");
 panButton.startup();

var deactivateButton = new Button({
 label: "test button",
 showLabel: false,
 iconClass: "deactivateIcon",
 onClick: function () {
 //alert("test button clicked")
 navToolbar.deactivate();
 }
 }, "deactivate");
 deactivateButton.startup();





 on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);




window.myMap.on("load", function(){
 require([
 "js/Search",
 "js/Legend",
 "js/Print",
 "js/Identify",
 ], function() {});
 })

function showExtent(extent) {
 var s = "";
 s = "XMin: "+ extent.xmin.toFixed(2) + " "
 +"YMin: " + extent.ymin.toFixed(2) + " "
 +"XMax: " + extent.xmax.toFixed(2) + " "
 +"YMax: " + extent.ymax.toFixed(2);
 //dojo.byId("info").innerHTML = s;
 }

function extentHistoryChangeHandler () {
 // registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
 // registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
 zoomPreviousButton.disabled = navToolbar.isFirstExtent();
 zoomNextButton.disabled = navToolbar.isLastExtent();
 }


});

Map and toolbar were added to html page like this:

<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;width: 100%; height: 100%; margin: 0;">
 <div id="navToolbar" data-dojo-type="dijit/Toolbar" style="background-color:#ffffff;">
 <button type="button" id="zoomin"></button>
 <button type="button" id="zoomout"></button>
 <button type="button" id="zoomfullext"></button>
 <button type="button" id="zoomprev"></button>
 <button type="button" id="zoomnext"></button>
 <button type="button" id="pan"></button>
 <button type="button" id="deactivate"></button>
 </div>

Dojo config like this directly on html page:

 <script>
 var dojoConfig = {
 parseOnLoad: false,
 async: true,
 packages: [
 {
 name: "agsjs",
 "location": '/OurApp/agsjs' // for xdomain load
 }, {
 name: "js",
 "location": '/OurApp/js'
 }]
 };
 </script>

KenBuja · ‎01-21-2017

You have to use map.reposition() after your map div moves. Take a look at this discussion: https://community.esri.com/thread/43662

NhuMai · ‎01-21-2017

Please excuse the formatting of the code below, i can't seem to figure out how to format as code wihin a response..

Makes sense that the offset is due to the addition of the tool bar which had pushed everything down a bit. So, I tried that as well. I'm not sure if I'm putting it in the right place, though.

Both of these haven't worked:

On map load:

window.myMap.on("load", function(){
require([
"js/Navigate",
"js/Search",
"js/Legend",
"js/Print",
"js/Identify",
], function() {
window.myMap.reposition();
});
})

In a separate js/Navigate.js file, after starting up buttons on toolbar:

require([
//"esri/map",
"esri/geometry/Extent",
"esri/toolbars/navigation",
"dojo/on",
//"dojo/parser",
//"dijit/form/Button",
//"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
//"dojo/domReady!"
],
function (Extent, Navigation, on, Toolbar, Button) {

//parser.parse();

var navToolbar;

// map = new Map("map", {
// basemap: "satellite",
// center: [-56.953, 57.472],
// zoom: 3
// });
navToolbar = new Navigation(window.myMap);

var zoomInButton = new Button({
label: "test button",
showLabel: false,
iconClass: "zoominIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.activate(Navigation.ZOOM_IN);
}
}, "zoomin");
zoomInButton.startup();

var zoomOutButton = new Button({
label: "test button",
showLabel: false,
iconClass: "zoomoutIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.activate(Navigation.ZOOM_OUT);
}
}, "zoomout");
zoomOutButton.startup();

var zoomFullExtButton = new Button({
label: "test button",
showLabel: false,
iconClass: "zoomfullextIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.zoomToFullExtent();
}
}, "zoomfullext");
zoomFullExtButton.startup();

var zoomPreviousButton = new Button({
label: "test button",
showLabel: false,
iconClass: "zoomprevIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.zoomToPrevExtent();
}
}, "zoomprev");
zoomPreviousButton.startup();

var zoomNextButton = new Button({
label: "test button",
showLabel: false,
iconClass: "zoomnextIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.zoomToNextExtent();
}
}, "zoomnext");
zoomNextButton.startup();

var panButton = new Button({
label: "test button",
showLabel: false,
iconClass: "panIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.activate(Navigation.PAN);
}
}, "pan");
panButton.startup();

var deactivateButton = new Button({
label: "test button",
showLabel: false,
iconClass: "deactivateIcon",
onClick: function () {
//alert("test button clicked")
navToolbar.deactivate();
}
}, "deactivate");
deactivateButton.startup();

window.myMap.reposition();

on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

function extentHistoryChangeHandler () {
// registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
// registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
zoomPreviousButton.disabled = navToolbar.isFirstExtent();
zoomNextButton.disabled = navToolbar.isLastExtent();
}

});

NhuMai · ‎01-21-2017

Okay, got it--it has to do with the fact that I stuck the toolbar within the map div