I am having an issue with the Measurement-Widget in combination with other widgets with the newest ArcGIS API for JavaScript (3.13). With the sandbox, I was able to create a map which includes HomeButton, LocateButton, Scalebar, OverviewMap and BasemapGallery. All this works together. When I start to add the code of the Measurement-Widget, the other widgets disappear. So I removed some code from the -container and sfs, pacelsLayer, snapManager and layerInfos. With or without it, it doesn't matter. When I comment out this part:
//esriConfig.defaults.io.proxyUrl = "/proxy/";
//esriConfig.defaults.io.alwaysUseProxy = false;
//esriConfig.defaults.geometryService = new GeometryService ("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
the other widgets work again, but the Measurement-Widget tools are missing.
I tried also to build the homebutton inside of the following link, but it doesn't work. http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_measurement
The Search/Geocoder-Widget doesn't work too...but there seems that it have a problem with the BasemapGallery.
<!DOCTYPE html>
<html>
<head>
<title>Part VII: Measurement-Widget</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<style>
html, body, #mapDIV {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#HomeButtonDIV {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#LocateButtonDIV {
position: absolute;
top: 135px;
left: 20px;
z-index: 50;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map, home, locate, overviewMapDijit, scalebar, basemapGallery, sfs, parcelsLayer, snapManager, layerInfos, measurement;
require([ "esri/map",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"esri/dijit/OverviewMap",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/arcgis/utils",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojo/dom",
"esri/Color",
"dojo/keys",
"esri/config",
"esri/sniff",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dijit/form/CheckBox",
"dojo/domReady!"],
function(Map, HomeButton, LocateButton, OverviewMap, Scalebar, BasemapGallery, arcgisUtils, parser,
dom, Color, keys, esriConfig, has, SnappingManager, Measurement, FeatureLayer, SimpleRenderer,
GeometryService, SimpleLineSymbol, SimpleFillSymbol
) {
map = new Map("mapDIV", { //unsere DIV-ID
basemap: "osm",
center: [13.734875, 51.034163], //laenge, breite
zoom: 18 //zoomstufe
});
parser.parse();
//esriConfig.defaults.io.proxyUrl = "/proxy/";
//esriConfig.defaults.io.alwaysUseProxy = false;
//esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
home = new HomeButton({
map: map
}, "HomeButtonDIV");
home.startup();
geoLocate = new LocateButton({
map: map
}, "LocateButtonDIV");
geoLocate.startup();
overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
scalebar = new Scalebar({
map: map,
scalebarUnit: "dual",
attachTo: "bottom-left"
});
basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGalleryDIV");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
<!-- //sind die konturen der flaechen beim sandboxtest
sfs = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
null
);
//duerfte der Layer fuer die parzellen sein, die mir angezeigt werden bei der sandbox
parcelsLayer = new FeatureLayer("http://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]);
snapManager = map.enableSnapping({
snapKey: has("mac") ? keys.META : keys.CTRL
});
//keine ahnung wofür das ist
layerInfos = [{
layer: parcelsLayer
}];
snapManager.setLayerInfos(layerInfos); -->
measurement = new Measurement({
map: map
}, dom.byId("measurementDIV"));
measurement.startup();
});
</script>
</head>
<body class="claro">
<div id="mapDIV"></div>
<div id="HomeButtonDIV"></div>
<div id="LocateButtonDIV"></div>
<div style="position:absolute; right:0px; top:252px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:true">
<div data-dojo-type="dijit/layout/ContentPane" style="width:391px; height:221px; overflow:auto;">
<div id="basemapGalleryDIV"></div>
</div>
</div>
</div>
<div style="position:absolute; right:0px; top:544px; z-Index:999;">
<div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false, open:true">
<div data-dojo-type="dijit/layout/ContentPane" style="width:391px; height:221px; overflow:auto;">
<div id="measurementDIV"></div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
</div>
</div>
</div>
</body>
</html>
