Measurement Widget Help

BrianPaulson1 · ‎01-30-2015

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>

<!--The viewport meta tag is used to improve the presentation and behavior of the

samples on iOS devices-->

<title>Flickr</title>

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

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>

</div>

</div>

</body>

</html>

JakeSkinner · ‎01-30-2015

Hi Brian,

Here is an update to the code that implements the Measurement widget.

<!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;
      }
      
      #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>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map, grid;
      require([
        "esri/map",
        "esri/dijit/Measurement",
        "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", "dojo/dom",
        "dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, 
        Measurement,
        FeatureLayer, 
        PopupTemplate,
        esriRequest,
        Query,
        Point,
        Graphic,
        on,        
        array,
        Grid, Selection, Memory,
        Button,
        parser, declare, dom
      ) {
        
        parser.parse();
        
        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);
          }  
        });
      }
      
      var measurement = new Measurement({
          map: map
        }, dom.byId("measurementDiv"));
      
      measurement.startup();

    });
    </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 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
      <div id="grid"></div>
     </div>
    </div>
  </body>


</html>

View solution in original post

JakeSkinner · ‎01-30-2015

Hi Brian,

Here is an update to the code that implements the Measurement widget.

<!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;
      }
      
      #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>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map, grid;
      require([
        "esri/map",
        "esri/dijit/Measurement",
        "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", "dojo/dom",
        "dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, 
        Measurement,
        FeatureLayer, 
        PopupTemplate,
        esriRequest,
        Query,
        Point,
        Graphic,
        on,        
        array,
        Grid, Selection, Memory,
        Button,
        parser, declare, dom
      ) {
        
        parser.parse();
        
        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);
          }  
        });
      }
      
      var measurement = new Measurement({
          map: map
        }, dom.byId("measurementDiv"));
      
      measurement.startup();

    });
    </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 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
      <div id="grid"></div>
     </div>
    </div>
  </body>


</html>

TimWitt2 · ‎01-30-2015

Jake Skinner‌ you are no fun I was just about to post

JakeSkinner · ‎01-30-2015

Tim Witt‌, I hate it when that happens. At least it's Friday, and happy hour is only a couple hours away