Panning with mouse hover

AW1 — Tue, 29 Mar 2011 07:43:20 GMT

Hi,

I'm new to working with the ESRI Java API, and new to Java in general as well. I'm now trying to build a set of custom panning tools that work with mouse hover rather than click. The idea is to have panning areas in the borders of the map gui, and when the user moves the mouse onto these surfaces the map pans in the appropriate direction.

I've been trying to use onmouseover combined with the panleft(); function in the API, but I can't get it to work.

This is what I have used in the Body:

<div onMouseOver="map.panleft();">Left</div>

How should I properly declare the function in the header, and deploy it in the body?

Thanks a lot for any help!

Best regards

Re: Panning with mouse hover

derekswingley1 — Sun, 12 Dec 2021 16:53:19 GMT

This is pretty straightforward. You want to set up an event listener on a dom node (or nodes) and call a method to pan the map. Here's an example, pertinent code in red:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { 
        height: 100%; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
      }
      #map{
        padding:0;
      }
      #panMap {
        position: absolute; 
        left: 10px; 
        bottom: 10px; 
        width: 200px; 
        height: 50px; 
        background-color: #444; 
        color: #fff; 
        z-index: 40;
        padding: 5px;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      var map, resizeTimer;
      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        dojo.connect(map, 'onLoad', function(theMap) { 
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            console.log('resize');
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
        dojo.connect(dojo.byId('panMap'), 'onmouseover', function() {
          map.panLeft();
        });
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
        <div id="panMap">
          mouse over to pan left/west
        </div>
     </div>
    </div>
  </body>
</html>

Note that the event listener is set up after the map loads. Also, JavaScript, not Java 🙂

Re: Panning with mouse hover

AW1 — Wed, 30 Mar 2011 09:43:43 GMT

I got the hang of it.
Thanks a lot!

Cheers

topic Panning with mouse hover in ArcGIS JavaScript Maps SDK Questions

Panning with mouse hover

Re: Panning with mouse hover

Re: Panning with mouse hover