topic Re: doubleclickzoom zooming but not centering in ArcGIS JavaScript Maps SDK Questions

doubleclickzoom zooming but not centering

JeffPace — Fri, 07 Nov 2014 14:52:45 GMT

Using 3.11 api

Example of non -working behavior at

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

Kelly Hutchins‌

Re: doubleclickzoom zooming but not centering

JeffPace — Mon, 10 Nov 2014 13:57:02 GMT

29 views and no responses, any seeing this same behavior?

Re: doubleclickzoom zooming but not centering

JeffPace — Mon, 10 Nov 2014 16:06:30 GMT

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?

Kelly Hutchins‌ David Coley‌

Re: doubleclickzoom zooming but not centering

ReneRubalcava — Mon, 10 Nov 2014 16:18:17 GMT

Weird, seeing same thing. Never used this feature and tested it in 3.9 and 3.10 and doesn't work there either.

Re: doubleclickzoom zooming but not centering

JeffPace — Mon, 10 Nov 2014 18:06:29 GMT

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.

Re: doubleclickzoom zooming but not centering

AkshayHarshe — Tue, 11 Nov 2014 23:03:26 GMT

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

Re: doubleclickzoom zooming but not centering

JeffPace — Wed, 12 Nov 2014 13:57:36 GMT

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.

Re: doubleclickzoom zooming but not centering

ReneRubalcava — Wed, 12 Nov 2014 15:08:33 GMT

This is on the hacky end of doing things, but the animation is smooth, at leat in Chrome.

JS Bin

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.

Re: doubleclickzoom zooming but not centering

JeffPace — Wed, 12 Nov 2014 15:22:32 GMT

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.

Re: doubleclickzoom zooming but not centering

DavidColey — Wed, 12 Nov 2014 18:37:30 GMT

I certainly agree with you Jeff. My guess is true centering would require handling screen dimensions and pixel densitites?

Re: doubleclickzoom zooming but not centering

AkshayHarshe — Fri, 14 Nov 2014 01:31:24 GMT

Jeff Pace,

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>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Measure Tool</title>

<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>

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/MapServer/0", {

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>

<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"

style="width:100%; height:100%;">

<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

</div>

</body>

</html>