topic measurement+basemap in ArcGIS JavaScript Maps SDK Questions

measurement+basemap

anjelinaponkerat — Sat, 18 Nov 2017 12:20:10 GMT

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/LocalGovernmentInfrastructureBasemap/MapServer"
});
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/MapServer/0", {
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>

Re: measurement+basemap

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:07:37 GMT

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
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: measurement+basemap

anjelinaponkerat — Sat, 18 Nov 2017 17:48:39 GMT

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

Re: measurement+basemap

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:07:40 GMT

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/LocalGovernmentInfrastructureBasemap/MapServer"
      // });
      // var waterBasemap = new Basemap({
      //   layers: [watertemplateLayer],
      //   title: "water",
      //   thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/96c025140a214d0288581d4f388c2db2/info/thumbnail/ago_downloaded.png"
      // });

      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/MapServer/0", {
        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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍