AnsweredAssumed Answered

Measurement Widget Help

Question asked by Alkaline182 on Jan 30, 2015
Latest reply on Jan 30, 2015 by jskinner-esristaff

I am trying to insert the measurement widget to a project I am working on.  Below is my project code from another example.  How do I get the measurement tool added to the map?  I have followed the example here:Measurement | ArcGIS API for JavaScript , but I must be doing something wrong since the tool doesn't load.  Sorry I am a new to arcgis javascript and I am probably missing something basic.  Thanks

 

 

 

    <!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>Flickr</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

 

    <style>

      html, body, #map {

        height:100%;

        width:100%;

        margin:0;

        padding:0;

      }

      .esriScalebar{

        padding: 20px 20px; 

      } 

      #map{ 

        padding:0;

      }

      

      .dgrid { border: none; height: 100%; }

      .dgrid-column-0 {

        width: 35px;

      }

      .dgrid-row-odd {

        background: #FFFDF3;

      }

      td div img:hover {

        cursor: pointer;

      }

 

    </style>

 

    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script src="http://js.arcgis.com/3.12/"></script>

    <script>

      var map, grid;

      require([

        "esri/map",

        "esri/layers/FeatureLayer",

        "esri/dijit/PopupTemplate",

        "esri/request",

        "esri/tasks/query",

        "esri/geometry/Point",

        "esri/graphic",

        "dojo/on",

        "dojo/_base/array",

        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",

        "dijit/form/Button", 

        "dojo/parser", "dojo/_base/declare",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

        "dojo/domReady!"

      ], function(

        Map, 

        FeatureLayer, 

        PopupTemplate,

        esriRequest,

        Query,

        Point,

        Graphic,

        on,        

        array,

        Grid, Selection, Memory,

        Button,

        parser, declare

      ) {

        

 

 

 

 

        var featureLayer;

 

        map = new Map("map", {

          basemap: "satellite",

          center: [-46.807, 32.553],

          zoom: 3

        });

 

 

        //create a feature collection for the flickr photos

        var featureCollection = {

          "layerDefinition": null,

          "featureSet": {

            "features": [],

            "geometryType": "esriGeometryPoint"

          }

        };

        featureCollection.layerDefinition = {

          "geometryType": "esriGeometryPoint",

          "objectIdField": "ObjectID",

          "drawingInfo": {

            "renderer": {

              "type": "simple",

              "symbol": {

                "type": "esriPMS",

                "url": "images/flickr.png",

                "contentType": "image/png",

                "width": 15,

                "height": 15

              }

            }

          },

          "fields": [{

            "name": "ObjectID",

            "alias": "ObjectID",

            "type": "esriFieldTypeOID"

          }, {

            "name": "title",

            "alias": "Title",

            "type": "esriFieldTypeString"

          }]

        };

 

        //define a popup template

        var popupTemplate = new PopupTemplate({

          title: "{title}",

          description: "{description}"

        });

 

        //create a feature layer based on the feature collection

        featureLayer = new FeatureLayer(featureCollection, {

          id: 'flickrLayer',

          outFields: ["*"],

          infoTemplate: popupTemplate

        });

 

        //associate the features with the popup on click

        featureLayer.on("click", function(evt) {

          map.infoWindow.setFeatures([evt.graphic]);

        });

        

 

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

          requestPhotos();                   

        });

        //add the feature layer that contains the flickr photos to the map

        map.addLayers([featureLayer]);

 

      function requestPhotos() {

        //get geotagged photos from flickr

        //tags=flower&tagmode=all

        var requestHandle = esriRequest({

          url: "http://api.flickr.com/services/feeds/geo?&format=json",

          callbackParamName: "jsoncallback"

        });

        requestHandle.then(requestSucceeded, requestFailed);

      }

 

      function requestSucceeded(response, io) {        

        //loop through the items and add to the feature layer

        var features = [];

        array.forEach(response.items, function(item) {

          var attr = {};

          attr["description"] = item.description;

          attr["title"] = item.title ? item.title : "Flickr Photo";

 

          var geometry = new Point(item);

 

 

          var graphic = new Graphic(geometry);

          graphic.setAttributes(attr);

          features.push(graphic);          

        });       

        

        var items = array.map(features, function(feature) {

              return feature.attributes;

        });

 

 

 

      

        featureLayer.applyEdits(features, null, null, function(){

 

 

        var dataGrid = declare([Grid, Selection]);

 

          var columns = [{

            label: "",  //wasn't able to inject an HTML <div> with image here

            field: "ObjectID",

            formatter: makeZoomButton

          }, {

            label: "Title",

            field: "title"

          }];

  

          grid = new dataGrid({

            bufferRows: Infinity,

            columns: columns

          }, "grid");

 

 

          var memStore = new Memory({

            data: items,

            idProperty: "ObjectID"

          });

 

 

          window.grid.set("store", memStore);

          window.grid.set("sort", "ObjectID");

  

          grid.on(".field-ObjectID:click", function(e) {

            //retrieve the ObjectId when someone clicks on the magnifying glass

            if (e.target.alt) {

              zoomRow(e.target.alt);

            }

          });

 

 

        });

 

 

 

 

 

 

      }

 

      function requestFailed(error) {

        console.log('failed');

      }

      

      function makeZoomButton(id) {

 

 

          var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";

          zBtn = zBtn + " width='18' height='18'></div>";

          return zBtn;

        }

        

      function zoomRow(id) {

        featureLayer.clearSelection();

        var query = new Query();

        query.objectIds = [id];

        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {

          //zoom to the selected feature

          if(features && features.length > 0){

            var feature = features[0]; //get the first feature

            map.centerAndZoom(feature.geometry, 10);

          }

 

 

        });

      }

 

    });

    </script>

  </head>

  <body class="claro">

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">

      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >

      </div>

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">

      <div id="grid"></div>

     </div>

    </div>

  </body>

 

 

</html>

Outcomes