Using 3.11 api
Example of non -working behavior at
Manatee County GIS Mobile Server
I am having trouble with doubleclickzoom. it zooms properly, and makes sure where you clicked is visible, but it does not center completely. I want the click location to become the exact center of the map.
I can override the behavior
map.on("dbl-click", lang.hitch(this, function(evt){ map.centerAndZoom(evt.mapPoint, map.getLevel()+1); }));
But then all double click events (draw end, measure end, etc..) cause zoom and center events, which I do not want.
Is there anything i can do so that
map.enableDoubleClickZoom()
actually does a true center? the Api says it should center, but it isnt
https://developers.arcgis.com/javascript/jsapi/map-amd.html#enabledoubleclickzoom
29 views and no responses, any seeing this same behavior?
Here is an example
Fade In/Out Effect Using ArcGIS.com Webmaps
1. Double Click Stockholm.
It zooms, but it does not center the map on stockholm. why not?
Weird, seeing same thing. Never used this feature and tested it in 3.9 and 3.10 and doesn't work there either.
Thanks for the reply I thought I was going crazy. It looks like the zoom event does ensure that the click location stays within the visible extent, but that is definitely not my definition of "center"
Driving my field guys nuts.
Hi Jeff,
By default, the double-click zoom is enabled on any map. Well if you are looking for it to center the map at the point you clicked then it is not something you are looking for.
There is no best way to explain this but enableDoubleClickZoom() property suggests "Permits users to double click on a map to zoom in a level and center the map." In this sense the map centers itself according to position of you mouse pointer. For example, If you are willing to zoom to Stockholm and you double-click on Stockholm, the position of the point you have double-clicked holds at the exact same spot where your mouse pointer is and the map center is adjusted accordingly.( In other words, it keeps the point you have double click in the browser window).
Imagine if you have clicked the Plus and minus button for zooming in which is not related to your mouse pointer and zooms in directly at the center of screen, In this case, if you are looking at Stockholm then that is out of your map window. I hope that explains the center the map.
If you are looking for centering the point that you have clicked then you will need to implement the map.centerAt(evt.mapPoint) property which will give you the desired effect. You would just implement the following lines of code.
map.on("dbl-click",function(evt){
map.centerAt(evt.mapPoint);
//console.log(evt.mapPoint)
});
See if that answers your question.
Thanks,
Akshay Harshe
Esri Technical Support
Thank you for the reply. I see the disconnect. To me, and my users, center the map means "move my click location to the center of the map", i.e. centerAt.
The problem with doing the code you mention is this overrides all dbl-click events. So Draw-end, measure-end, edit, etc.. all would then center.
This is on the hacky end of doing things, but the animation is smooth, at leat in Chrome.
require(["esri/map", "dojo/on", "dojo/domReady!"], function(Map, on) {
var map = new Map("map", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
on(map, "dbl-click", function(e) {
var handle = on.once(map, "zoom", function() {
map.centerAt(e.mapPoint);
});
// timeout in case no zoom happened, so remove it pretty quickly
setTimeout(function() {
handle.remove();
}, 100);
});
});
I think the wording in the docs for enableDoubleClickZoom() are confusing. Maybe something more like "click location maintained within bounds when zoom occurs" or something like that.
I agree the wordings in the documentation are confusing but I am certain that if you want to center at the point a then you would have to use map.centerAt(). you can double click and zoom without adding any functionality.
To tackle the problem of Zooming and centering while Draw-end, measure-end you can partially implement the logic that Rene Rubalcava has suggested (as he mentioned about the time out, I assume the value is 100 millisecond). Since that might not fully work if you manage to double click within a second (unlikely). But in any case you need to add that double click event and center at back again when you are done with the measure operation. Which i why I think it is a good idea to use event like "measure-start" and "measure-end"
e.g
dblclick = map.on("dbl-click",function(evt){
map.centerAt(evt.mapPoint);
console.log(evt.mapPoint)
});
measurement.on("measure-start", function(){
dblclick.remove();
console.log("Event removed");
});
measurement.on("measure-end", function(){
dblclick = map.on("dbl-click",function(evt){
map.centerAt(evt.mapPoint);
console.log(evt.mapPoint);
console.log("Event Started Again");
});
Please have a look at following measure sample and what happens to the dblclick variable you would reference your proxy url to this sample. See if that helps
Thanks,
Akshay
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Measure Tool</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#map {
border:solid 2px #808775;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin:5px;
padding:0px;
}
#titlePane{
width:240px;
}
.claro .dijitTitlePaneTitle {
background: #fff;
font-weight:600;
border: none;
border-bottom:solid 1px #29201A;
border-top:solid 1px #29201A;
}
.claro .dijitTitlePaneTitleHover {
background:#eee;
}
.claro .dijitTitlePaneTitleActive {
background:#808775;
}
.claro .dijitTitlePaneContentOuter {
border-right: none;
border-bottom: none;
border-left: none;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map; var dblclick;
require([
"dojo/dom",
"esri/Color",
"dojo/keys",
"dojo/parser",
"esri/config",
"esri/sniff",
"esri/map",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/Scalebar",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/form/CheckBox",
"dojo/domReady!"
], function(
dom, Color, keys, parser,
esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol
) {
parser.parse();
//This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esriConfig.defaults.io.proxyUrl = "/proxy";
esriConfig.defaults.io.alwaysUseProxy = false;
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-85.743, 38.256],
zoom: 17
});
dblclick = map.on("dbl-click",function(evt){
map.centerAt(evt.mapPoint);
console.log(evt.mapPoint)
});
var sfs = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
null
);
var parcelsLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/M...", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
parcelsLayer.setRenderer(new SimpleRenderer(sfs));
map.addLayers([parcelsLayer]);
//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
var snapManager = map.enableSnapping({
snapKey: has("mac") ? keys.META : keys.CTRL
});
var layerInfos = [{
layer: parcelsLayer
}];
snapManager.setLayerInfos(layerInfos);
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.on("measure-start", function(){
dblclick.remove();
console.log("Event removed");
});
measurement.on("measure-end", function(){
dblclick = map.on("dbl-click",function(evt){
map.centerAt(evt.mapPoint);
console.log(evt.mapPoint);
console.log("Event Started Again");
});
});
measurement.startup();
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
<div id="measurementDiv"></div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks Rene I will try that
I would agree on the wording. Its not doubleclickzoomand center. Its doubleclickzoom and keep click location in same location.
I personally think there is a demand for a true doubleclick and center.