AnsweredAssumed Answered

Cursor offset after adding navigation toolbar

Question asked by ingenue3911 on Jan 21, 2017
Latest reply on Jan 21, 2017 by ingenue3911

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>

Outcomes