doubleclickzoom zooming but not centering

1682
10
11-07-2014 06:52 AM
JeffPace
MVP Alum

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

Kelly Hutchins

Tags (2)
0 Kudos
10 Replies
JeffPace
MVP Alum

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

0 Kudos
JeffPace
MVP Alum

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

0 Kudos
ReneRubalcava
Frequent Contributor

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

0 Kudos
JeffPace
MVP Alum

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.

0 Kudos
AkshayHarshe
Esri Contributor

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

Thanks,
Akshay Harshe
0 Kudos
JeffPace
MVP Alum

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.

0 Kudos
ReneRubalcava
Frequent Contributor

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.

0 Kudos
AkshayHarshe
Esri Contributor

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>

    <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,
Akshay Harshe
JeffPace
MVP Alum

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. 

0 Kudos