Latest Contributions by ReneRubalcava

If you wrap most of your code in a view.when, you can use the views spatial reference to create your point. const point = new Point({ x: -9810308.361037346, y: 5136801.597252877, spatialReference: view.spatialReference }); The default spatial reference of geometries is WGS84, so you need to specify when using something else.

If you are just using them for type annotations, you can use the `import type` syntax. import type Map from "@arcgis/core/Map"; It's safer, as this import won't be in the output JavaScript. Most bundlers "should" omit unused imports, but honestly, this can vary. I could have sworn the TS compiler was smart enough to do this anyway, but either way, the "import type" syntax would cover your bases.

Ah. For stuff like this, you can use Layer.fromPortalItem. It's useful to load an entire FeatureService or any layer where you have the item, but don't know the layer type. You can do something like this. Layer.fromPortalItem({ portalItem: { id: "4601abb43d564387a785aeaaba8d7486", } }).then(async (layer) => { // Will be a GroupLayer // await layer.load(); // layer.layers -> [a, b] has two layers in the group // pull out layer you are interested in // and add only that layer. // map.add(layer.layers.at(1)); // add the whole GroupLayer map.add(layer); }); Here is a codepen.

Hosted layer views look the same as regular layers to a user. They have an item id and url, so you can use them in the same way you would any other layer.

You might want to look at building your own custom UI element that covers what you need. You can use the NavigationToggleViewModel to handle the logic and build a custom UI around that. You can do it in your framework of choice or a vanilla HTML/JS element.

So I had some time and a crazy idea. You could return a Features widget in the CustomContent of your popup and turn your innerGraphics into pseudo graphics the Features widget could use. It requires some set up, but it works. https://codepen.io/odoe/pen/xxNdQMQ?editors=0010 const fieldContent = new FieldsContent({ outFields: ["*"], fieldInfos: [ { fieldName: "crashId", label: "Crash ID" }, { fieldName: "groupId", label: "Group ID" } ] }); const customContentWidget = new CustomContent({ outFields: ["*"], creator: ({ graphic }) => { const { innerGraphics } = graphic.attributes; const graphics = innerGraphics.map((attributes) => { return new Graphic({ geometry: null, attributes, popupTemplate: { title: "Inner Crash ID: {crashId}", content: [ { type: "fields", outFields: ["*"], fieldInfos: [ { fieldName: "crashId", label: "Inner Crash ID" }, { fieldName: "groupId", label: "Inner Group ID" }, { fieldName: "symbolType", label: "Symbol" }, { fieldName: "direction", label: "Direction" }, { fieldName: "severity", label: "Severity" }, { fieldName: "narrative", label: "Narrative" } ] } ] } }); }); console.log(graphics); const features = new Features({ features: graphics, visible: true, visibleElements: { actionBar: false, closeButton: false, collapseButton: false, } }); return features; } }); const graphicObj = { geometry: { spatialReference: { wkid: 4326 }, x: -72.93538699999993, y: 41.332516000000055, type: "point" // add geometry type }, symbol: null, attributes: { crashId: 1, symbolType: "Sideswipe, Same Direction", groupId: 25, direction: null, date: null, innerGraphics: [ { crashId: 222, symbolType: "Sideswipe, Same Direction", groupId: 20, direction: 0, date: 1682173620000, severity: "O", narrative: "" }, { crashId: 333, symbolType: "Front to Rear", groupId: 14, direction: 0, date: 1674143040000, severity: "O", narrative: "" }, { crashId: 111, symbolType: "Front to Rear", groupId: 22, direction: 0, date: 1697535840000, severity: "O", narrative: "Narrative unavailable for this crash." } ] }, popupTemplate: { title: "Crash ID: {crashId}", outFields: ["*"], content: [fieldContent, customContentWidget] } }; view.graphics.add(graphicObj);

This is going to require using CustomContent and writing your own UI to display that info. The creator event will give you the graphic and you can return some custom HTML in the function to display your results. I had shown something similar here for weather data.

There is a calcite tutorial on how to do this you can apply to a react application. https://developers.arcgis.com/calcite-design-system/tutorials/build-a-dark-mode-switch/ The main thing to know is this part of the tutorial. const updateDarkMode = () => { // Calcite mode document.body.classList.toggle("calcite-mode-dark"); // ArcGIS Maps SDK theme const dark = document.querySelector("#arcgis-maps-sdk-theme-dark"); const light = document.querySelector("#arcgis-maps-sdk-theme-light"); dark.disabled = !dark.disabled; light.disabled = !light.disabled; // ArcGIS Maps SDK basemap map.basemap = dark.disabled ? "gray-vector" : "dark-gray-vector"; // Toggle ArcGIS Maps SDK widgets mode const widgets = document.getElementsByClassName("esri-ui"); for (let i = 0; i < widgets.length; i++) { widgets.item(i).classList.toggle("calcite-mode-dark"); } }; document.querySelector("calcite-switch").addEventListener("calciteSwitchChange", updateDarkMode);

‎05-22-2024

You will need to add some authentication to your application. In the documentation there is a section in the table of contents you can refer to. https://developers.arcgis.com/javascript/latest/ The links in that dropdown ArcGIS Org Portals - https://developers.arcgis.com/javascript/latest/arcgis-organization-portals/ Access Secure Resources - https://developers.arcgis.com/javascript/latest/secure-resources/ Tutorial - https://developers.arcgis.com/javascript/latest/tutorials/implement-user-authentication/ Sample - https://developers.arcgis.com/javascript/latest/sample-code/identity-oauth-basic/

‎05-20-2024

You can check the searchTerm property https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#searchTerm It just depends on what event you want to check it https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#events-summary searchWidget.on("suggest-start", () => { console.log("term: ", searchWidget.searchTerm); }); searchWidget.on("suggest-complete", () => { console.log("term: ", searchWidget.searchTerm); });

‎05-03-2024

As long as you have Routing and probably geocoding enabled for your key, should be fine.

‎05-03-2024

The sample works in the sandbox. https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-directions Are you opening the codepen link? If so, the Route service requires an API Key, so you need to provide a key in your own app.

‎05-03-2024

The map and scene components have a map property that you can reference to add layers. https://developers.arcgis.com/javascript/latest/components/storybook/?path=/docs/map-components_component-reference-map--docs In the "next" version, which will be in 4.30, we added a method on the elements for addLayer and addLayers. async function load() { const Layer = await $arcgis.import("esri/layers/Layer"); const url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2"; const layer = await Layer.fromArcGISServerUrl({ url }); // Reference the map component const mapElem = document.querySelector("arcgis-map"); mapElem.addEventListener("arcgisViewReadyChange", () => { // works today // mapElem.map.add(layer); }, { once: true }); // available in next, will be in 4.30 mapElem.addLayer(layer); } load(); Here is a codepen. https://codepen.io/odoe/pen/NWowrmo?editors=0010

‎05-02-2024

By default, mode of Expand is auto, you can set to floating to prevent the drawer from showing on smaller screens. https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html#mode

‎05-01-2024

There's also examples on github https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-react https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/map-components/templates/react Also a number of videos from previous DevSummits https://mediaspace.esri.com/esearch/search?keyword=react

Online Status	Online
Date Last Visited	8 hours ago

My Ideas

Latest Contributions by ReneRubalcava

Re: Rendering a point is not working for WebMap

Re: Sample Angular application using Calcite / ArcGIS Maps SDK 4.29

Re: Add sublayers from a Hosted Feature Layer View

Re: Add Hosted Feature Layer View to map in ArcGIS JavaScript API

Re: Customize NavigationToggle

Re: Representing an array in a popup

Re: Representing an array in a popup

Re: Map Theme Toggle with React

Re: Private shared webmap is not working in ReactJS App.

Re: Hello How can I get the entered text value with searchWidget?

Re: Cannot load route service.

Re: Cannot load route service.

Re: map-component api

Re: Issue: Search Widget with multiple sources in mobile (Portrait)

Re: ESRI's latest Javascript libraries which support ReactJS

Re: Rendering a point is not working for WebMap

Re: Sample Angular application using Calcite / Arc...

Re: Representing an array in a popup

Re: Representing an array in a popup

Re: Hello How can I get the entered text value wit...