AnsweredAssumed Answered

Mouse Wheel Zooms in Wrong Place Until Window Resize

Question asked by kesselbaump on Jun 21, 2014
Latest reply on Jun 24, 2014 by kesselbaump
Hello,

My application has a problem where after the map loads, when I use the mouse wheel to zoom in, the map zooms in at a location that is not where the cursor is centered. Also, my info windows pop-up in the wrong place. Both the zoom and the pop ups are happening too far 'south' of the cursor/feature.

Strangely, I can get the problem to disappear if I resize the browser window. After I resize the window, the zoom works as usual and info windows show up right next to their features.

I don't know if this is related, but I also notice the map 'jumps around' during the page load. At the start of the load, the home button, base map switcher and esri logo load higher up on the page, then they jump down to where I want them positioned.

I suspect this has something to do with my CSS, but I can't seem to figure it out. If anyone has any advice for how to solve this issue, it would be greatly appreciated. Below are the respective codes for the page.

HTML:
[HTML]<div class="col-md-12">
        <div class="col-md-6"id="legend"> <h2 class="text-muted">Legend</h2>
            <div id="LayerList"> </div>
        </div>
        <div class="col-md-6" id="Map">
            <div id="HomeButton"> </div>
            <div id="baseMapToggler"> </div>
            <div id="scale"> </div>
        </div>
    </div>[/HTML]

CSS:
#Map {          height: 940px;     width: 75%;     padding-bottom:150px;     margin-left: 250px;     margin-top:-705px; }  #legend {     padding:10px;     left: 25px;     width: 25%; }  #LayerList {     left: 25px;     width: 25%; }


JS:
function(Map, Legend, FeatureLayer, InfoTemplate,  HomeButton, BasemapToggle, Scalebar, dom, domConstruct, on) {         var pointTemplate = new InfoTemplate("<b>${Name}</b><br>${Address}", "${Comment}<br><br>${URL}<br><br>${Picture}");     var otherTemplate = new InfoTemplate("${Name}", "${Comment}");     var Layers = []     var legendLayers = []            var map = new Map("Map", {       autoResize: true,       center: [-86.513039, 39.152544],       zoom: 11,       basemap: "streets"     });  var scalebar = new esri.dijit.Scalebar({   map:map,   scalebarStyle:"ruler",   scalebarUnit:"english", }, dojo.byId("scale"));  var home = new HomeButton({ map: map }, "HomeButton"); home.startup();                      //push several layers into array          var arrayLength = Layers.length; for (var i = 0; i < arrayLength; i++) {     map.addLayer(Layers[i]);     legendLayers.push({ layer: Layers[i], title:Layers[i].id }); };  var myLegend = new Legend({     layerInfos: legendLayers,     map: map     }, "LayerList");     myLegend.startup();  var toggle = new BasemapToggle({   map: map,   basemap: "hybrid" }, "baseMapToggler"); toggle.startup();                       });

Outcomes