Latest Contributions by JustinBridwell2

I am working on a Web AppBuilder application that uses 3rd party libraries. One of these libraries includes the Moment and Moment-Timezone libraries. On load, I immediately get and error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'tz')'. Researching this; I found an article that point to the source of this problem being due to the moment-timezone-with-data-min.js file loading before the moment-min.js file. I am not sure where to make this change within my app. It looks like the libs get loaded as resources in my `init.js` file and I have placed them in the proper order there. Is there another folder or file with dependencies? I also see that in the libs folder, there is a moment folder and the files are in this order. How can I change this order so they load properly. Or is there another issue I may be overlooking? ... View more

I have placed 2 widgets (baseMapGallery, LayerList) inside a small map in a rather large popup. To keep it from crowding out the view, I am trying to use an Expand to launch it from a small icon button in the top-right corner of the map view. As you can see, there are 2 maps in this popup; each with its own separate div/view, independent of the main map view in the foreground.   Currently, when I try to launch the widgets from the icon button (Expand), it attempts to open in the main map view to the right of the popup. Also, there is nothing showing (no basmaps, no layer list). Here's my current code for the left map panel with the widgets, expand, and a handler: //Left panel map var popupDiv1 = document.createElement("div"); popupDiv1.classList.add("mapViewLeft"); popupDiv1.style.marginBottom = "10px"; var popupView1 = new MapView({ container: popupDiv1, map: map_left, actions: [], //center: view.center, center: [lon, lat], zoom: view.zoom, //scale: // view.scale * // 2 * // Math.max(view.width / 250, view.height / 250), constraints: { rotationEnabled: false }, ui: { components: ["zoom"] } }); var layerList_left = new LayerList({ view: popupView1, listItemCreatedFunction: function (event) { const item = event.item; if (item.layer.type !== "group") { // don't show legend twice item.panel = { content: "legend", open: false }; } } }); bgExpandLayerList_2 = new Expand({ view: popupView1, content: layerList_left.container, expandIconClass: "esri-icon-layer-list" }); var basemapGallery_2 = new BasemapGallery({ view: popupView1, container: document.createElement("div") }); bgExpandBaseMapGallery_2 = new Expand({ view: popupView1, content: basemapGallery.container, expandIconClass: "esri-icon-basemap" }); expandHandle_a = watchUtils.pausable(bgExpandLayerList_2, "expanded", function (newValue, oldValue) { if (newValue === true) { expandHandle_a.pause(); setTimeout(function () { expandHandle_b.resume(); }, 100); } else { expandHandle_a.resume(); } if (bgExpandLayerList_2.expanded) { bgExpandLayerList_2.collapse(); } }); expandHandle_b = watchUtils.pausable(bgExpandBaseMapGallery_2, "expanded", function (newValue, oldValue) { if (newValue === true) { expandHandle_b.pause(); setTimeout(function () { expandHandle_a.resume(); }, 100); } else { expandHandle_b.resume(); } if (bgExpandBaseMapGallery_2.expanded) { bgExpandBaseMapGallery_2.collapse(); } }); popupView1.ui.add(bgExpandLayerList_2, "top-right"); popupView1.ui.add(bgExpandBaseMapGallery_2, "top-right"); I've tried removing the handler and just adding a single widget, but I am still seeing the same problem (opening in the wrong view). Any ideas as to what I am doing incorrectly here? The widget works fine by itself (see right panel map), just not with the Expand. Note: I have a baseMapGallery and LayerList widget in the main view as well that are both working. I have named the variable differently for each. Is there a restriction on adding more than one of the same widget Expand in a web app? ... View more

I am using a popup on my mapView from arcGIS API for Javascript 4.17. When the user opens the popup, I have set the following attributes: view.popup.open({ // Set the popup's title to the coordinates of the clicked location title: "Location Coordinates: [" + lon + ", " + lat + "]", location: event.mapPoint, // Set the location of the popup to the clicked location content: setContentInfo(view.center, view.scale), actions: [risk_snapshot, ble_report, print_report, lidar_report] }); In the popup, I am adding some smaller maps using a function called setContentInfo that returns a "masterDiv" DOM node with the maps. However, I want to add an additional DOM Node outside of that div to the content. The function is essentially setup as below. How can you add multiple items -DOM Nodes to content? function setContentInfo(center, scale) { var popupDiv1 = document.createElement("div"); popupDiv1.classList.add("mapViewLeft"); var popupView1 = new MapView({ container: popupDiv1, map: map, actions: [], center: view.center, zoom: view.zoom, scale: view.scale * 2 * Math.max(view.width / 250, view.height / 250), constraints: { rotationEnabled: false }, ui: { components: [] } }); var popupDiv2 = document.createElement("div"); ... var popupMasterDiv = document.createElement("div"); popupMasterDiv.id = "masterDiv"; popupMasterDiv.style.width = "650px"; popupMasterDiv.style.height = "450px"; var theDiv = document.getElementById("masterDiv"); popupMasterDiv.appendChild(popupDiv1); popupMasterDiv.appendChild(popupDiv2); popupMasterDiv.appendChild(ble_report); // Return a dom node //return popupView.container; return popupMasterDiv; } To test, I have tried adding var test = document.createElement("div"); test.textContent = "Hey"; and then adding popupMasterDiv.appendChild(popupDiv1); popupMasterDiv.appendChild(popupDiv2); popupMasterDiv.appendChild(test); but it puts the "Hey" in the middle of the 2 maps. I also tried adding the above straight to the content like this: content: setContentInfo(view.center, view.scale) + test, But that removes the map content and only displays "Hey" What I want is to add a nice little table in its own div under the maps with something like this. What am I doing wrong here; how can I achieve this: var table1 = "<table id="info"> <tr> <th>Location</th> <th> </th> </tr> <tr> <td>Coordinates</td> <td>Parcel ID</td> </tr> <tr> <td>123.345, -43.432</td> <td>12345</td> </tr> </table>" ... View more

I have an esri popup in my web app MapView: // Add the map to a MapView const view = new MapView({ container: "viewDiv", map: map, center: [-82.9001, 32.1656], zoom: 8, popup: { //actions: [risk_snapshot], actions: [], dockEnabled: true, dockOptions: { buttonEnabled: true, breakpoint: false } } }); ... view.popup.open({ // Set the popup's title to the coordinates of the clicked location title: "Location Coordinates: [" + lon + ", " + lat + "]", location: event.mapPoint, // Set the location of the popup to the clicked location content: setContentInfo(view.center, view.scale), actions: [risk_snapshot] }); I also have a simple Bootstrap Navbar in my app: <nav class="navbar navbar-inverse navbar-dark bg-dark" style="margin-bottom: 5px;"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapibleMenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand" style="color: cornflowerblue;">GA Map Viewer</a> </div> <div class="collapse navbar-collapse" id="collapibleMenu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#" style="color: cornflowerblue;">Home</a></li> </ul> </div> </div> </nav> <div id="viewDiv"></div> For some reason, whenever, I close the popup, the navbar disappears. Any reason why this would happen or suggestions on how to fix it?     ... View more

I am trying to load a module called 'geojson2h3' in my `NodeJS` app with the arcgis api for javascript methods to render the hexagons with the h3 spatial index. After running `npm install geojson2h3` into my node_modules folder, I tried following the initial code instructions given in `Github` to test it out: import geojson2h3 from 'geojson2h3'; const polygon = {     type: 'Feature',     geometry: {         type: 'Polygon',         coordinates: [           [             [-122.47485823276713, 37.85878356045377],             [-122.47504834087829, 37.86196795698972],             [-122.47845104316997, 37.86010614563313],             [-122.47485823276713, 37.85878356045377]          ]        ]     } }; const hexagons = geojson2h3.featureToH3Set(polygon, 10); // -> ['8a2830855047fff', '8a2830855077fff', '8a283085505ffff', '8a283085506ffff'] const feature = geojson2h3.h3SetToFeature(hexagons); // -> {type: 'Feature', properties: {}, geometry: {type: 'Polygon', coordinates: [...]}} This method throws a `SyntaxError: Cannot use import statement outside a module` error. I then tried using the `NodeJS require` method as such: `const geojson2h3 = require('geojson2h3');`, replacing the `import` statement. This throws an `Uncaught Error: undefinedModule` error. The package shows in my `package.json` filer. What did I do wrong here? ... View more

I have a web application that incorporate an  infoTemplate (esriPopup)  when the user clicks on a road feature in the map. This works fine in the main map, but I have additional maps that compare 2 preloaded scenario maps. When the user zooms in to one of the scenario compare maps, they should be able to click one of the road features and the  infoTemplate  is displayed. What I am noticing is there is a slight offset of where the user has to click in order to get the  infoTemplat e to display properly. In other words, the user has to click slightly above the feature layer in order to select it and trigger the  infoTemplate  to display correctly. If the user click directly on the road feature, it displays "No information available".  It's a  .NET  application with most of the client side functionality in an  AMD-style  main.js file. There is an esri.css and Style.css that controls most of the styling. I am refactoring the application and am having trouble even determining where the issue originates from (is it the cursor, the  infoTemplate , or the  roadsLayer  settings?) The infoTemplate for the scenario compare maps looks like this: it = new InfoTemplate("Feature Info"); it.setContent(lang.hitch(map,generateInfoContent)); its = {};its[idx] = { infoTemplate: it, layerUrl: null } map.getLayersVisibleAtScale()[1].setInfoTemplates(its); The method  .getLayersVisibleAtScale()  seems to be an  esri  method of class  map  but I have no clue why this would produce a slick offset in selecting the layer. Any ideas as to how to resolve this? ... View more