topic Re: Navtool bar in ArcGIS JavaScript Maps SDK Questions

Navtool bar

RichardMoussopo — Fri, 12 Sep 2014 03:54:29 GMT

I have this code for the Zoom in function and it does not work.

 //ToolBar

        navToolbar = new Navigation(map);
        on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

        registry.byId("zoomin").on("click", function () {
            navToolbar.activate(Navigation.ZOOM_IN);
        });

I have all the references...any idea?

Re: Navtool bar

JakeSkinner — Fri, 12 Sep 2014 11:48:55 GMT

Hi Richard,

It may help to post all of your code (JavaScript and HTML) if possible.

Re: Navtool bar

RichardMoussopo — Fri, 12 Sep 2014 13:23:56 GMT

here is my html

<div data-dojo-type="dijit/form/Button" id="intersection" data-dojo-props="iconClass:'intersectionIcon'" title="Roads Intersection"

onclick="dialogIntersection.show();"></div>

<div data-dojo-type="dijit/form/Button" id="measure" data-dojo-props="iconClass:'measureIcon'" title="Measure"

onclick="(measureDialog.open) ? measureDialog.hide() : measureDialog.show();"></div>

<div data-dojo-type="dijit/form/Button" id="AbouttheApp" data-dojo-props="iconClass:'aboutAppIcon'" onclick="DialogAboutApp.show();">About</div>

</div>

and the Javascript

dojo.require("esri.dijit.Measurement");

dojo.require("dijit/form/CheckBox");

var dojoConfig = {

parseOnLoad: true

};

var measureDialog = null;

var measurement = null;

var wgs84;

var map;

var loading;

require([

"esri/map",

"esri/arcgis/utils",

"esri/toolbars/navigation",

"esri/dijit/Measurement",

"dijit/registry",

"dojo/on",

"dojo/parser",

"esri/tasks/query",

"esri/layers/FeatureLayer", "esri/dijit/Legend",

"esri/dijit/Geocoder",

"dojo/store/Memory",

"dojo/_base/array",

"dojo/_base/lang",

"esri/request",

"dojo/json",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/form/Button",

"dijit/form/ComboBox",

"dojo/domReady!"

], function (

Map, utils, Navigation, Measurement, registry, on, parser, Query, FeatureLayer, Legend, Geocoder, Memory, array, lang, esriRequest, json

) {

//Define Fairfield Own Base map

//Define projection and start extent

wgs84 = new esri.SpatialReference({ wkid: 3857 });

startExtent = new esri.geometry.Extent(-9222914.374, 4857710.818, -9154122.569, 4802412.791, wgs84);

// Create map

var navToolbar;

map = new esri.Map("map", { extent: startExtent, nav: false, slider: true, logo:false });

//Need to define their Own proxi for the printing functionalities.

esri.config.defaults.io.proxyUrl = "/proxy";

esri.config.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

esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

// +++ ADD MAP LAYERS:

// SPECIFY THE MAP SERVICE

countyMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(".../MapServer"); //20140612

// printMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://" + theHost + "/webadaptor/rest/services/Flex/20140616_WebPrint/MapServer");

// Valid values are png | png8 | png24 | png32 | jpg | pdf | bmp | gif | svg

countyMapLayer.setImageFormat("jpg");

// ADD THE MAP SERVICE

function init() {

//parser.parse();

loading = dojo.byId("loadingImg");

map.addLayer(countyMapLayer);

dojo.connect(map, "onUpdateStart", showLoading);

dojo.connect(map, "onUpdateEnd", hideLoading);

//Legend

var legendLayers = [];

var quakeLayer = new ArcGISDynamicMapServiceLayer(".../MapServer", {

id: 'quakes'

});

legendLayers.push({ layer: quakeLayer, title: 'Data' });

var Utilities = new ArcGISDynamicMapServiceLayer("...MapServer", {

id: 'fire'

});

map.on('layers-add-result', function () {

var legend = new Legend({

map: map,

layerInfos: legendLayers

}, "legendDiv");

legend.startup();

});

legendLayers.push({ layer: Utilities, title: "Utilities" });

map.addLayers([Utilities, quakeLayer]);

map.on('layers-add-result', function () {

//add check boxes

arrayUtils.forEach(legendLayers, function (layer) {

var layerName = layer.title;

var checkBox = new CheckBox({

name: "checkBox" + layer.layer.id,

value: layer.layer.id,

checked: layer.layer.visible

});

checkBox.on("change", function () {

var targetLayer = map.getLayer(this.value);

targetLayer.setVisibility(!targetLayer.visible);

this.checked = targetLayer.visible;

});

//add the check box and label to the toc

domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");

var checkLabel = domConstruct.create('label', {

'for': checkBox.name,

innerHTML: layerName

}, checkBox.domNode, "after");

domConstruct.place("<br />", checkLabel, "after");

});

//measurement

try {

measureDialog = dijit.byId("dialogMeasurement");

measurement = new esri.dijit.Measurement({

map: map

}, dojo.byId('measurementDiv'));

measurement.startup();

measureDialog.startup();

}

catch (ex) {

alert(ex.toString());

}

function removeGraphic() {

alert("No grpahic found on the map");

}

//ToolBar

navToolbar = new Navigation(map);

on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

registry.byId("zoomin").on("click", function () {

navToolbar.activate(Navigation.ZOOM_IN);

});

}

Re: Navtool bar

RichardMoussopo — Fri, 12 Sep 2014 13:27:41 GMT

I want to also add that the Legend also does not seem to work, same with the measurement too but about the measurement tool, it does work except that it behave weird in such the drawing starts far from the cursor position.

Re: Navtool bar

JakeSkinner — Fri, 12 Sep 2014 16:24:55 GMT

Hi Richard,

It looks like you are trying to combine legacy code with the AMD code. Below is an example that contains a legend, measurement widget, basemap gallery, and a check-box to turn on/off each layer. I would recommend building off of this to get the app you are looking for.

<!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>Sample Map</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 30%;
    }

    #pane1 {
      border: solid #97DCF2 1px;
    }
    #header{
      border: solid #C0C0C0 2px;
      background-color:#C0C0C0
    }
    #HomeButton {
      position: absolute;
      top: 98px;
      left: 26px;
      z-index: 50;
    }
    #legendPane {
      border: solid #97DCF2 1px;
    }
    
    #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;
      }

    .zoominIcon {
        background-image: url(images/nav_zoomin.png);
        width: 16px;
        height: 16px;
      }

      .zoomoutIcon {
        background-image: url(images/nav_zoomout.png);
        width: 16px;
        height: 16px;
      }

      .zoomfullextIcon {
        background-image: url(images/nav_fullextent.png);
        width: 16px;
        height: 16px;
      }

      .zoomprevIcon {
        background-image: url(images/nav_previous.png);
        width: 16px;
        height: 16px;
      }

      .zoomnextIcon {
        background-image: url(images/nav_next.png);
        width: 16px;
        height: 16px;
      }

      .panIcon {
        background-image: url(images/nav_pan.png);
        width: 16px;
        height: 16px;
      }

      .deactivateIcon {
        background-image: url(images/nav_decline.png);
        width: 16px;
        height: 16px;
      }
  </style>
  
  <script src="http://js.arcgis.com/3.10/"></script>
  <script>

    var map;
    require([
      "dojo/parser", "esri/map", "esri/dijit/HomeButton", "esri/toolbars/navigation",
      "esri/layers/FeatureLayer", "dojo/on", "dojo/dom", "dijit/registry",
      "dojo/dom-construct", "esri/dijit/Legend", "dojo/_base/array", "esri/dijit/Measurement",
      "dijit/form/CheckBox",  "esri/dijit/BasemapGallery", "esri/dijit/Geocoder",
      "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/screenUtils", "dijit/Toolbar","dijit/form/Button",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      parser, Map, HomeButton, Navigation,
      FeatureLayer, on, dom, registry,
      domConstruct, Legend, array, Measurement,
      CheckBox, BasemapGallery, Geocoder, 
      Graphic, SimpleMarkerSymbol, screenUtils, Toolbar, Button, 
      BorderContainer, ContentPane, AccordionContainer
    ) {
      parser.parse();
      
      console.log(registry.byId("zoomin"));
      //Create the map
      var map = new Map("map", {
        center: [-80.734, 28.297],
        zoom: 10,
        basemap: "topo"
      });
      //Add a home button
      var home = new HomeButton({
        map:map
      }, "HomeButton");
      home.startup();
      //Add Feature Layers

      var cities = new FeatureLayer(
          "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
      });
      var rivers = new FeatureLayer(
          "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
      });
      var states = new FeatureLayer(
          "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {
          mode: FeatureLayer.MODE_ONDEMAND,
          opacity: 0.5,
          outFields: ["*"]
      });

            //add the legend
      map.on("layers-add-result", function (evt) {
          var layerInfo = array.map(evt.layers, function (layer,
          index) {
              return {
                  layer: layer.layer,
                  title: layer.layer.name
              };
          });
          if (layerInfo.length > 0) {
              var legendDijit = new Legend({
                  map: map,
                  layerInfos: layerInfo
              }, "legendDiv");
              legendDijit.startup();
          }
                //add check boxes
          array.forEach(layerInfo,

          function (layer) {
              var layerName = layer.title;
              var checkBox = new CheckBox({
                  name: "checkBox" + layer.layer.id,
                  value: layer.layer.id,
                  checked: layer.layer.visible,
                  onChange: function (evt) {
                      var clayer = map.getLayer(this.value);
                      clayer.setVisibility(!clayer.visible);
                      this.checked = clayer.visible;
                  }
              });
                    //add the check box and label to the TOC
              domConstruct.place(checkBox.domNode, "toggle",
                  "after");
              var checkLabel = domConstruct.create('label', {
                  'for': checkBox.name,
                  innerHTML: layerName
              }, checkBox.domNode, "after");
              domConstruct.place("<br />", checkLabel,
                  "after");
          });
      });
      map.addLayers([states, rivers, cities]);
      
      //Create the Basemap
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);       
      });
      
      navToolbar = new Navigation(map);
      on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

      registry.byId("zoomin").on("click", function () {
        navToolbar.activate(Navigation.ZOOM_IN);
      });

      registry.byId("zoomout").on("click", function () {
        navToolbar.activate(Navigation.ZOOM_OUT);
      });

      registry.byId("zoomfullext").on("click", function () {
        navToolbar.zoomToFullExtent();
      });

      registry.byId("zoomprev").on("click", function () {
        navToolbar.zoomToPrevExtent();
      });

      registry.byId("zoomnext").on("click", function () {
        navToolbar.zoomToNextExtent();
      });

      registry.byId("pan").on("click", function () {
        navToolbar.activate(Navigation.PAN);
      });

      registry.byId("deactivate").on("click", function () {
        navToolbar.deactivate();
      });

      function extentHistoryChangeHandler () {
        registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }  
      
      var measurement = new Measurement({
          map: map
        }, dom.byId("measurementDiv"));
        measurement.startup();    
     
    });
  </script>

</head>
<body class="tundra">
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
  <div id="header"
       data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <strong>Sample Map</strong>
      <div id="navToolbar" data-dojo-type="dijit/Toolbar">
        <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
        <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
        <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
        <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
        <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
        <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
        <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
      </div>
  </div>
    
  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'left'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="pane1"
           data-dojo-props="title:'Base Maps', selected:false">
        <div id="basemapGallery"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Layers'">
          <span style="padding: 10px 0;">Click to toggle each layer on or off</span>
          <div id="toggle" style="padding: 2px 2px;"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
    </div>
  </div>  
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
       <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 id="HomeButton"></div>
    
  </div>

</div>
</body>

</html>

Re: Navtool bar

RichardMoussopo — Fri, 12 Sep 2014 18:39:12 GMT

Hi Jack,

Thank you, this is exactly what I was looking for. Thank you.

Also, I've you ever worked with dojo/floatingPane? Trying to implement that declaratively...I have the css setup but on button click, the floating won't show up...

Thank you again

Re: Navtool bar

JakeSkinner — Fri, 12 Sep 2014 18:47:37 GMT

I would recommend starting a new thread for that question, and post the code you are using. Also, if you can, mark this thread as 'answered' to help other users in the community.