Community
Select to view content in your preferred language

Problem panning with Firefox and Chrome

683
2
03-05-2013 05:09 AM
Jean-FrancoisDucre-Robitaille
by
New Contributor
‎03-05-2013 05:09 AM
Hi,

I've a problem panning the map with Firefox and Chrome. I drag the mouse using the left button and nothing happens, but it pans when I drag with the scroll button! This doesn't happen with IE. The map is integrated in a rather complex javascript application and I doesn't know where to start to find the problem.

Thanks

Jean-François
0 Kudos
2 Replies
DianaBenedict
by
Occasional Contributor III
‎03-05-2013 06:44 AM
A couple of things that might be of help:

1) make sure to review the following help documentation to refer to the different pan and zoom options
http://help.arcgis.com/en/webapi/javascript/arcgis/jshelp/#intro_navigation
2) I have found that enabling and disabling toolbars such as draw and edit toolbars will enable and disable your pan and zoom functionality.  So you will need to make sure that these toolbars are enabled in the correctly.
3) sometimes what might look functionality not working between various browers is really attributed to the fact that some handle "errors" on the page better than others and in reality there is simply a portion of the code that is causing an error therefore stopping all further execution of your code.

Without any specific code to look at, this is the most help we can offer.
0 Kudos
GokuSan
by
New Contributor II
‎03-09-2023 05:43 AM

Hi.

I have the same problem. Can someone help me? This my code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Circle with Measure</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.43/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.43/"></script>
<script>
var map;


require(["esri/map",
"esri/graphic",
"esri/geometry/Circle",
"esri/geometry/Polyline",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/Color",
"esri/geometry/geometryEngine",
"dojo/domReady!"],


function(Map,
Graphic,
Circle,
Polyline,
SimpleMarkerSymbol,
SimpleFillSymbol,
SimpleLineSymbol,
TextSymbol,
Font,
Color,
geometryEngine) {


map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-120.537, 46.592], // longitude, latitude
zoom: 13
});


var centerPt = null;
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255,0,0]), 2),new Color([255,255,0,0.25])
);
var drawCircle = new Graphic(null, sfs, null, null);
var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2)
var radiusLine = new Graphic(null, sls, null, null);
var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
var ts = new TextSymbol("");
ts.setFont(font);
ts.setColor(new Color([255,0,0]));
ts.setOffset(0,20);
var radiusText = new Graphic(null, ts, null, null);

//onDragStart, record the centerPt
map.on("mouse-drag-start", function(evt) {
try{
map.disablePan();
map.disableMapNavigation();
console.log("drag start. Pan: " + map.isPan + ". Navigation: " + map.isMapNavigation);
map.graphics.add(drawCircle);
map.graphics.add(radiusLine);
map.graphics.add(radiusText);
centerPt = evt;
}catch(e){
console.log(e);
}
});

//onDrag, calculate distance between currentPoint and centerPt
map.on("mouse-drag", function(evt) {
console.log("drag. Pan: " + map.isPan);
var pl = new Polyline(map.spatialReference);
pl.addPath([centerPt.mapPoint, evt.mapPoint]);
var radius = geometryEngine.geodesicLength(pl, "meters");
var circle = new Circle({center: centerPt.mapPoint, radius: radius, geodesic: true, spatialReference: map.spatialReference});;
drawCircle.setGeometry(circle);
radiusLine.setGeometry(pl);
ts.setText(radius.toFixed(1) + " meters" + ". Area: " + geometryEngine.geodesicArea(circle, "square-kilometers") + "km2");
radiusText.setGeometry(centerPt.mapPoint);
//console.log("radius is:" + radius);
});

map.on("mouse-drag-end", function(evt) {
try{
map.enablePan();
map.enableMapNavigation();
console.log("drag end. Pan: " + map.isPan + ". Navigation: " + map.isMapNavigation);
}catch(e){
console.log(e);
}
});
});
</script>
</head>


<body>
<div id="map"></div>
</body>


</html>

 

 

In Firefox, don´t work as expected. In Chrome, OK.

 

0 Kudos