measurement+basemap

anjelinaponkerat · ‎11-18-2017

Hi

I have a sample code for add measurment tools to my tiled basemap, but it dont work! please help me.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Measure Tool</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/esri/esri.css">
<style>
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#map {
border:solid 2px #808775;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin:5px;
padding:0px;
}
#titlePane{
width:280px;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map;
require([
"dojo/dom",
"esri/Color",
"dojo/keys",
"dojo/parser",

"esri/config",
"esri/sniff",
"esri/map",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",

"esri/dijit/Scalebar",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/form/CheckBox",
"dojo/domReady!"
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/dijit/Basemap",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
], function(
dom, Color, keys, parser,
esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol, BasemapGallery, BasemapLayer, Basemap
) {
parser.parse();
//This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.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
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

map = new Map("map", {
basemap: "satellite",
center: [-85.743, 38.256],
zoom: 17
});

var watertemplateLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
});
var waterBasemap = new Basemap({
layers: [waterTemplateLayer],
title: "water",
thumbnailUrl: "images/water.png"
});

basemaps.push(waterBasemap);

var sfs = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
null
);

var parcelsLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/...", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
parcelsLayer.setRenderer(new SimpleRenderer(sfs));
map.addLayers([parcelsLayer]);

//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
var snapManager = map.enableSnapping({
snapKey: has("mac") ? keys.META : keys.CTRL
});
var layerInfos = [{
layer: parcelsLayer
}];
snapManager.setLayerInfos(layerInfos);

var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
});
</script>
</head>

<body class="calcite">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
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">
<div id="measurementDiv"></div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
</div>
</div>
</div>
</div>
</body>
</html>

RobertScheitlin__GISP · ‎11-18-2017

Anjelina,

I didn't see where you were even trying in your code to add the basemap gallery dijit...

Here is your code with the BaseMap Gallery dijit added and working. I had to comment out your attempt to use a different baseMap and have an explanation in the comments. I can not help you with your issue of measurement being off as thousands of esri users are using the measurement dijit with out issue.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Measure Tool</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/esri/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }

    #map {
      border: solid 2px #808775;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      margin: 5px;
      padding: 0px;
    }

    #titlePane {
      width: 280px;
    }
  </style>
  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map;
    require([
      "dojo/dom",
      "esri/Color",
      "dojo/keys",
      "dojo/parser",
      "esri/config",
      "esri/sniff",
      "esri/map",
      "esri/SnappingManager",
      "esri/dijit/Measurement",
      "esri/layers/FeatureLayer",
      "esri/renderers/SimpleRenderer",
      "esri/tasks/GeometryService",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Scalebar",
      "esri/dijit/BasemapGallery",
      "esri/dijit/BasemapLayer",
      "esri/dijit/Basemap",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/form/CheckBox",
      "dojo/domReady!"
    ], function(
      dom, Color, keys, parser,
      esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer,
      SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol,
      Scalebar, BasemapGallery, BasemapLayer, Basemap
    ) {
      parser.parse();
      //This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
      //for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      esriConfig.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
      esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      map = new Map("map", {
        basemap: "satellite",
        center: [-85.743, 38.256],
        zoom: 17
      });

// You can not add this service as a basemap because it is WKID 4326 and esri base maps are 102100
// You can not mix basemaps with differnt WKIDs
      // var watertemplateLayer = new BasemapLayer({
      //   url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
      // });
      // var waterBasemap = new Basemap({
      //   layers: [watertemplateLayer],
      //   title: "water",
      //   thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/96c025140a214d0288581d4f388c2db2/info/thumbnail/ago..."
      // });

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      // basemapGallery.basemaps.push(waterBasemap);

      var sfs = new SimpleFillSymbol(
        "solid",
        new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
        null
      );
      var parcelsLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/...", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
      });
      parcelsLayer.setRenderer(new SimpleRenderer(sfs));
      map.addLayers([parcelsLayer]);

      //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
      var snapManager = map.enableSnapping({
        snapKey: has("mac") ? keys.META : keys.CTRL
      });
      var layerInfos = [{
        layer: parcelsLayer
      }];
      snapManager.setLayerInfos(layerInfos);
      var measurement = new Measurement({
        map: map
      }, dom.byId("measurementDiv"));
      measurement.startup();
    });
  </script>
</head>

<body class="calcite">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" 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">
          <div id="measurementDiv"></div>
          <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
        </div>
      </div>
      <div style="position:absolute; right:20px; bottom:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', open:true">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

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

View solution in original post

RobertScheitlin__GISP · ‎11-18-2017

Anjelina,

You are missing the basic concept of AMD style programming (as most beginners do). Your require Array order has to be matched exactly by the subsequent function parameter names list. The only items that don't have to be listed in the function parameter names are things you will NOT use in your JS code side but will in your html tags. And you should always have "dojo/domReady!" last in your require array. Notice the order bellow now matches.

The abc’s of AMD | ArcGIS Blog

var map;
require([
  "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
  "esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
  "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
  "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
  "esri/dijit/Scalebar",
  "esri/dijit/BasemapGallery",
  "esri/dijit/BasemapLayer",
  "esri/dijit/Basemap",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/TitlePane",
  "dijit/form/CheckBox",
  "dojo/domReady!"
], function(
  dom, Color, keys, parser, esriConfig,
  has, Map,SnappingManager, Measurement,
  FeatureLayer, SimpleRenderer, GeometryService,
  SimpleLineSymbol, SimpleFillSymbol,
  Scalebar, BasemapGallery, BasemapLayer, Basemap
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

anjelinaponkerat · ‎11-18-2017

Hi

Thanks, I have 2 problems:

1- the result of measurement is incorrct. I measure a distance that is 25 kilometers but the tools return 20 km. my map has web mercator projection.

2- I can not use base map gallery with measurement widget in one map!

please help me

RobertScheitlin__GISP · ‎11-18-2017

Anjelina,

I didn't see where you were even trying in your code to add the basemap gallery dijit...

Here is your code with the BaseMap Gallery dijit added and working. I had to comment out your attempt to use a different baseMap and have an explanation in the comments. I can not help you with your issue of measurement being off as thousands of esri users are using the measurement dijit with out issue.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Measure Tool</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/esri/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }

    #map {
      border: solid 2px #808775;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      margin: 5px;
      padding: 0px;
    }

    #titlePane {
      width: 280px;
    }
  </style>
  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map;
    require([
      "dojo/dom",
      "esri/Color",
      "dojo/keys",
      "dojo/parser",
      "esri/config",
      "esri/sniff",
      "esri/map",
      "esri/SnappingManager",
      "esri/dijit/Measurement",
      "esri/layers/FeatureLayer",
      "esri/renderers/SimpleRenderer",
      "esri/tasks/GeometryService",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Scalebar",
      "esri/dijit/BasemapGallery",
      "esri/dijit/BasemapLayer",
      "esri/dijit/Basemap",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/form/CheckBox",
      "dojo/domReady!"
    ], function(
      dom, Color, keys, parser,
      esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer,
      SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol,
      Scalebar, BasemapGallery, BasemapLayer, Basemap
    ) {
      parser.parse();
      //This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
      //for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      esriConfig.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
      esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      map = new Map("map", {
        basemap: "satellite",
        center: [-85.743, 38.256],
        zoom: 17
      });

// You can not add this service as a basemap because it is WKID 4326 and esri base maps are 102100
// You can not mix basemaps with differnt WKIDs
      // var watertemplateLayer = new BasemapLayer({
      //   url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
      // });
      // var waterBasemap = new Basemap({
      //   layers: [watertemplateLayer],
      //   title: "water",
      //   thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/96c025140a214d0288581d4f388c2db2/info/thumbnail/ago..."
      // });

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      // basemapGallery.basemaps.push(waterBasemap);

      var sfs = new SimpleFillSymbol(
        "solid",
        new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
        null
      );
      var parcelsLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/...", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
      });
      parcelsLayer.setRenderer(new SimpleRenderer(sfs));
      map.addLayers([parcelsLayer]);

      //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
      var snapManager = map.enableSnapping({
        snapKey: has("mac") ? keys.META : keys.CTRL
      });
      var layerInfos = [{
        layer: parcelsLayer
      }];
      snapManager.setLayerInfos(layerInfos);
      var measurement = new Measurement({
        map: map
      }, dom.byId("measurementDiv"));
      measurement.startup();
    });
  </script>
</head>

<body class="calcite">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" 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">
          <div id="measurementDiv"></div>
          <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
        </div>
      </div>
      <div style="position:absolute; right:20px; bottom:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', open:true">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

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