POST
|
Anyone have and idea how to get the Feature Navigation ability of a popup to work with custom actions. Even the ESRI sample is buggy. For me my custom action is pushed off the far right edge of the screen. It would be ideal if the Feature Navigation would be in its own row or left aligned in cases like this. This screen grab is from the ESRI demo at Custom popup actions per feature attribute | ArcGIS API for JavaScript 4.11 This is mine (i modified the background color of the span so you could see it)
... View more
05-22-2019
11:21 AM
|
0
|
1
|
296
|
POST
|
I see the problem in IE11 and Chrome on a Windows 7 box. We can replicate it in office on a Windows 10 box as well. The ESRI sample works fine but this problem arose in my larger application so I put together the sample I sent which is just a mashup of two of ESRI's samples so something is definitely not working as very well here.
... View more
04-16-2019
07:55 AM
|
0
|
1
|
512
|
POST
|
I can't seem to get the AreaMeasurement2D not to crash. Try the following code and you'll get a error in the geometry engine when you try the area measurement tool. Any idea what is going on? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>MapImageLayer - create dynamic map layers - 4.11</title> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.11/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #info-div { background-color: white; border-radius: 8px; padding: 8px; opacity: 0.92; } #topbar { background: #fff; padding: 10px; } .action-button { font-size: 16px; background-color: transparent; border: 1px solid #d3d3d3; color: #6e6e6e; height: 32px; width: 32px; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .action-button:hover, .action-button:focus { background: #0079c1; color: #e4e4e4; } .active { background: #0079c1; color: #e4e4e4; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/widgets/Legend", "esri/widgets/DistanceMeasurement2D", "esri/widgets/AreaMeasurement2D", ], function (Map, MapView, MapImageLayer, Legend, DistanceMeasurement2D, AreaMeasurement2D) { var activeWidget; // helper function to create a symbol function createSymbol(color) { return { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: color, outline: { width: 0.5, color: [255, 255, 255, 0.4] }, style: "solid" }; } /***************************************************************** * Create renderers for each block groups sublayer *****************************************************************/ var populationRenderer = { type: "class-breaks", // autocasts as new ClassBreaksRenderer() field: "POP07_SQMI", defaultSymbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "backward-diagonal", outline: { width: 0.5, color: "gray" } }, classBreakInfos: [ { minValue: 0, maxValue: 5100, label: "<5,100", symbol: createSymbol("#e6eecf") }, { minValue: 5100, maxValue: 16200, label: "5,100 - 16,200", symbol: createSymbol("#9bc4c1") }, { minValue: 16200, maxValue: 42200, label: "16,200 - 42,200", symbol: createSymbol("#69a8b7") }, { minValue: 42000, maxValue: 1000000, label: ">42,200", symbol: createSymbol("#3d6a89") } ] }; var renterUnitsRenderer = { type: "class-breaks", // autocasts as new ClassBreaksRenderer() field: "RENTER_OCC", normalizationField: "HSE_UNITS", normalizationType: "field", defaultSymbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "backward-diagonal", outline: { width: 0.5, color: "gray" } }, classBreakInfos: [ { minValue: 0, maxValue: 0.25, label: "< 25%", symbol: createSymbol("#f8e3c2") }, { minValue: 0.25, maxValue: 0.5, label: "25% - 50%", symbol: createSymbol("#e5998c") }, { minValue: 0.5, maxValue: 0.75, label: "50% - 75%", symbol: createSymbol("#d86868") }, { minValue: 0.75, maxValue: 1.0, label: "> 75%", symbol: createSymbol("#9b3557") } ] }; var ageRenderer = { type: "class-breaks", // autocasts as new ClassBreaksRenderer() field: "MED_AGE", defaultSymbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "backward-diagonal", outline: { width: 0.5, color: "gray" } }, classBreakInfos: [ { minValue: 0, maxValue: 30, label: "< 30", symbol: createSymbol("#f6e5cf") }, { minValue: 30, maxValue: 36, label: "30 - 36", symbol: createSymbol("#dd9fbf") }, { minValue: 36, maxValue: 42, label: "36 - 42", symbol: createSymbol("#cc71b4") }, { minValue: 42, maxValue: 100, label: "> 42", symbol: createSymbol("#8c3c88") } ] }; /***************************************************************** * Create a MapImageLayer instance with three sublayers pointing * to a single map service layer. Each layer uses the same data * but dynamically renders the data differently for each layer. *****************************************************************/ var layer = new MapImageLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", title: "Census Demographics", sublayers: [ { id: 0, title: "Population/square mile", renderer: populationRenderer, visible: false, labelingInfo: [ { labelExpression: "[POP2007]", labelPlacement: "always-horizontal", symbol: { type: "text", // autocasts as new TextSymbol() color: "white", haloColor: "#3d6a89", haloSize: 1, font: { size: 10 } }, minScale: 37000 } ], // points to the block groups layer source: { mapLayerId: 1 } }, { id: 1, title: "% Renter Occupied Housing Units", renderer: renterUnitsRenderer, definitionExpression: "POP07_SQMI >= 5100", visible: true, labelingInfo: [ { labelExpression: "[RENTER_OCC]", labelPlacement: "always-horizontal", symbol: { type: "text", // autocasts as new TextSymbol() color: "white", haloColor: "#9b3557", haloSize: 1, font: { size: 10 } }, minScale: 37000 } ], // points to the block groups layer source: { mapLayerId: 1 } }, { id: 2, title: "Median Age", renderer: ageRenderer, definitionExpression: "POP07_SQMI >= 5100", visible: false, labelingInfo: [ { labelExpression: "[MED_AGE]", labelPlacement: "always-horizontal", symbol: { type: "text", // autocasts as new TextSymbol() color: "white", haloColor: "#8c3c88", haloSize: 1, font: { size: 10 } }, minScale: 37000 } ], // points to the block groups layer source: { mapLayerId: 1 } } ] }); /***************************************************************** * Add the layer to a map *****************************************************************/ var map = new Map({ basemap: "gray", layers: [layer] }); var view = new MapView({ container: "viewDiv", map: map, zoom: 13, center: [-80.57, 33.78] }); var legend = new Legend({ view: view }); view.ui.add(legend, "bottom-left"); view.ui.add("info-div", "top-right"); view.when(function () { // set sublayer visibility depending on the selected layer document .getElementById("layer-select") .addEventListener("change", function (event) { var newValue = parseInt(event.target.value); layer.sublayers.forEach(function (sublayer) { sublayer.visible = newValue === sublayer.id; }); }); }); view.ui.add("topbar", "top-right"); document .getElementById("distanceButton") .addEventListener("click", function () { setActiveWidget(null); if (!this.classList.contains("active")) { setActiveWidget("distance"); } else { setActiveButton(null); } }); document .getElementById("areaButton") .addEventListener("click", function () { setActiveWidget(null); if (!this.classList.contains("active")) { setActiveWidget("area"); } else { setActiveButton(null); } }); function setActiveWidget(type) { switch (type) { case "distance": activeWidget = new DistanceMeasurement2D({ view: view }); // skip the initial 'new measurement' button activeWidget.viewModel.newMeasurement(); view.ui.add(activeWidget, "top-right"); setActiveButton(document.getElementById("distanceButton")); break; case "area": activeWidget = new AreaMeasurement2D({ view: view }); // skip the initial 'new measurement' button activeWidget.viewModel.newMeasurement(); view.ui.add(activeWidget, "top-right"); setActiveButton(document.getElementById("areaButton")); break; case null: if (activeWidget) { view.ui.remove(activeWidget); activeWidget.destroy(); activeWidget = null; } break; } } function setActiveButton(selectedButton) { // focus the view to activate keyboard shortcuts for sketching view.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements.classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } } }); </script> </head> <body> <div id="viewDiv"></div> <div id="topbar"> <button class="action-button esri-icon-minus" id="distanceButton" type="button" title="Measure distance between two or more points"></button> <button class="action-button esri-icon-polygon" id="areaButton" type="button" title="Measure area"></button> </div> <div id="info-div"> Select a demographic variable<br /><br /> <select id="layer-select"> <option value="0">Population density</option> <option value="1" selected>Renter occupied units</option> <option value="2">Median age</option> </select> </div> </body> </html>
... View more
04-11-2019
11:03 AM
|
0
|
6
|
707
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|