topic Re: map.infoWindow zoom to in ArcGIS JavaScript Maps SDK Questions

map.infoWindow zoom to

ToddFagin — Fri, 10 Dec 2021 20:18:42 GMT

I have created a simple map that has two primary functions. First, users can click on the map and receive an info. window with the longitude/latitude of the clicked point. Second, individuals can search the map for a location.

I have discovered something a bit intriguing, though. If an individual first clicks the map to get the coordinates, the info. window does not include "zoom to." However, if one first searches the map, then clicks, the info. window includes zoom to (enabling individuals to hone in on where they clicked). I really like this, but would like to have it there initially, as well, not just after one searchers.

Seems like I am missing something simple. Suggestions would be greatly appreciated.

Thanks,

Todd

<!DOCTYPE HTML>
<html>
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
       <title>Get Coordinates From Map</title>
       <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
       <style>
              html, body, #map {
                padding:0;
                margin:0;
                height:100%;
              }
              #BasemapToggle {
                position: absolute;
                top: 20px;
                right: 20px;
                z-index: 50;
              }
               #search {
                display: block;
                position: absolute;
                z-index: 2;
                top: 20px;
                left: 74px;
             }
             #HomeButton {
              position: absolute;
              top: 95px;
              left: 20px;
              z-index: 50;
            }
            #messages{
             background-color: #fff;
             box-shadow: 0 0 5px #888;
             font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
             font-size: 0.8em;
             max-width: 15em;
             padding: 0.5em;
             position: absolute;
             left: 20px;
             bottom: 20px;
             z-index: 40;
           }
       </style>
       <script src="https://js.arcgis.com/3.20/"></script>
       <script>
          var map;
              require([
                "esri/map", 
                "esri/dijit/BasemapToggle",
                "esri/dijit/Search",
                "esri/dijit/HomeButton", 
                "dojo/domReady!"
              ], function(
                Map, BasemapToggle, Search, HomeButton
              )  {
          
                map = new Map("map", {
                  basemap: "streets",
                  center: [-98.526, 35.467784],
                  logo: false,
                  zoom: 7
            });
                 
           var toggle = new BasemapToggle({
             map: map,
             basemap: "hybrid"
           }, "BasemapToggle");
           toggle.startup();
           
           var search = new Search({
                 map: map
              }, "search");
           search.startup();
           
           var home = new HomeButton({
               map: map
             }, "HomeButton");
            home.startup();
           
           map.on("load", function(){
                 map.infoWindow.resize(250,100);
               });
     
          map.on("click", addPoint);
     
          function addPoint(evt) {
            var latitude = evt.mapPoint.getLatitude();
            var longitude = evt.mapPoint.getLongitude();
            map.infoWindow.setTitle("Coordinates");
            map.infoWindow.setContent(
                 "Longitude: " + longitude.toFixed(3) + 
             "<br>Latitude: " + latitude.toFixed(3)
            );
            map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
           }
     
         });
       </script>
     </head>
     <body>
       <span id="messages">Click map to get coordinates.</span>     
       <div id="map" class="map">
         <div id="BasemapToggle"></div>
         <div id="search"></div>
         <div id="HomeButton"></div>
       </div>
     </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: map.infoWindow zoom to

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:18:45 GMT

Todd,

Here is the code for that:

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Get Coordinates From Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    
    #BasemapToggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 50;
    }
    
    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
    
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
    
    #messages {
      background-color: #fff;
      box-shadow: 0 0 5px #888;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 0.8em;
      max-width: 15em;
      padding: 0.5em;
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 40;
    }

  </style>
  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;
    require([
      "esri/map",
      "esri/dijit/BasemapToggle",
      "esri/dijit/Search",
      "esri/dijit/HomeButton",
      "esri/geometry/Point",
      "esri/graphic",
      "esri/InfoTemplate",
      "esri/symbols/PictureMarkerSymbol",
      "dojo/domReady!"
    ], function(
      Map, BasemapToggle, Search, HomeButton, Point, Graphic, InfoTemplate, PictureMarkerSymbol
    ) {

      map = new Map("map", {
        basemap: "streets",
        center: [-98.526, 35.467784],
        logo: false,
        zoom: 7
      });

      var toggle = new BasemapToggle({
        map: map,
        basemap: "hybrid"
      }, "BasemapToggle");
      toggle.startup();

      var search = new Search({
        map: map
      }, "search");
      search.startup();

      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      map.on("load", function() {
        map.infoWindow.resize(250, 100);
      });

      map.on("click", addPoint);

      var infoTemplate = new InfoTemplate("Coordinates", "Longitude: ${longitude}<br>Latitude: ${latitude}");
      var sym = new PictureMarkerSymbol('http://js.arcgis.com/3.20/esri/dijit/Search/images/search-pointer.png', 36, 36);
      
      function addPoint(evt) {
        map.graphics.clear();
        var latitude = evt.mapPoint.getLatitude();
        var longitude = evt.mapPoint.getLongitude();
        var attrs = {"longitude": longitude.toFixed(3), "latitude": latitude.toFixed(3)};
        var gra = new Graphic(evt.mapPoint, sym, attrs, infoTemplate);
        map.graphics.add(gra);
        map.infoWindow.setFeatures([gra])
        map.infoWindow.show(evt.mapPoint);
      }

    });

  </script>
</head>

<body>
  <span id="messages">Click map to get coordinates.</span>
  <div id="map" class="map">
    <div id="BasemapToggle"></div>
    <div id="search"></div>
    <div id="HomeButton"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: map.infoWindow zoom to

ToddFagin — Wed, 03 May 2017 20:57:10 GMT

Fantastic.

Thank you for the quick reply. Works perfectly.

Todd Fagin

Oklahoma Natural Heritage Inventory/

Oklahoma Biological Survey