|
POST
|
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
... View more
05-03-2024
08:26 AM
|
0
|
0
|
1231
|
|
POST
|
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
... View more
05-02-2024
02:54 PM
|
0
|
1
|
1096
|
|
POST
|
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
... View more
05-01-2024
08:46 AM
|
0
|
0
|
1082
|
|
POST
|
Ok, move the script tag with the load code to after the arcgis-map tag and before end of body tag. <!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Map components AMD template</title>
<link rel="icon" href="data:;base64,=" />
<style>
html,
body {
background-color: var(--calcite-ui-foreground-2);
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
.my-button {
margin: 0;
position: absolute;
left: 100px;
top: 10px;
}
</style>
<script type="module" src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" />
<link rel="stylesheet" href="https://js.arcgis.com/next/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/next/"></script>
<script type="module" src="https://jsdev.arcgis.com/map-components/next/arcgis-map-components.esm.js"></script>
</head>
<body>
<arcgis-map id="mapElem" item-id="d5dda743788a4b0688fe48f43ae7beb9">
<arcgis-sketch position="top-right"></arcgis-sketch>
</arcgis-map>
<script>
async function load() {
const sketch = document.querySelector("arcgis-sketch");
sketch.addEventListener("arcgisReady", () => {
console.log("sketch ready");
});
sketch.addEventListener("arcgisCreate", (e) => {
console.log("sketch create", e);
});
sketch.addEventListener("arcgisUpdate", (e) => {
console.log("sketch update", e);
});
}
load();
</script>
</body>
</html> You typically want script tags with JS as the last tag in the body so that it loads after contents of the html body load.
... View more
04-30-2024
09:32 AM
|
1
|
1
|
2605
|
|
POST
|
That error looks like you don't have an arcgis-sketch element on the page. If you provide a repro per the doc, could tell better. https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application
... View more
04-30-2024
07:29 AM
|
0
|
3
|
2619
|
|
POST
|
This works in "next", but we made some changes to the event names. https://codepen.io/odoe/pen/yLrbBoR?editors=0011 Event names no longer include the name of the component and they are all prefixed with 'arcgis' in the names. We'll get that added to the breaking changes here. https://github.com/Esri/feedback-js-api-next/blob/main/CHANGELOG.md#components-breaking-changes
... View more
04-29-2024
05:20 PM
|
0
|
5
|
2640
|
|
POST
|
You already have arcgis/core in your package.json, you don't need the webpack plugin or calcite there. The arcgis-plugin does nothing except help copy assets, but you turned that off and you do it manually in your webpack config. As I mentioned, it is probably installing an older version of arcgis/core and calcite and other deps as well and that might be causing some issues. "dependencies": {
// keep this
"@arcgis/core": "^4.28.10",
// remove, probably installs old version
"@arcgis/webpack-plugin": "^4.22.0",
// remove, overrides the arcgis/core dependency
// can't guarantee things won't break when you do this
"@esri/calcite-components": "^2.1.0"
} As far as your webpack config goes, I would just remove use the arcgis plugin. const path = require('path');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const copyPlugin = require('copy-webpack-plugin');
/* creates static resource xml file in ./force-app/main/default/staticresources directory */
const staticResourceCreate = require('static-resource-webpack-plugin');
const staticResourcePath = path.resolve('./claritiGIS/main/default/staticresources');
const ignoreTemplate = path.resolve('./arcGISApp/git-ignore-template.txt');
module.exports = (_, args) => {
const mode = args.mode;
const config = {
mode,
entry: {
index: ['./arcGISApp/index.js', './arcGISApp/index.css']
},
node: false,
output: {
chunkFilename: 'chunks/bundle_[name].js',
path: staticResourcePath + '/ArcGISSDK',
assetModuleFilename: 'assets/[hash][ext][query]'
},
optimization: {
mergeDuplicateChunks: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /nodeModules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new staticResourceCreate({
staticResPath: staticResourcePath
}),
new copyPlugin({
patterns: [
{
from: '**',
context: 'node_modules/@esri/calcite-components/dist/calcite/assets/',
to: staticResourcePath + '/CalciteAssets/assets/'
},
{
from: ignoreTemplate,
to: `${staticResourcePath}/ArcGISSDK/.gitignore`,
toType: 'template'
},
{
from: ignoreTemplate,
to: `${staticResourcePath}/CalciteAssets/.gitignore`,
toType: 'template'
}
]
}),
new miniCssExtractPlugin({
filename: '[name].css',
chunkFilename: 'arcgis_[name].css'
})
]
};
return config;
}; On another note, although you can usually install newer versions of calcite than what is defined in the arcgis/core package.json, it doesn't guarantee that it won't break things. You usually do not need to specify a calcite version when installing arcgis/core, the package manager will install the one it expects to use.
... View more
04-29-2024
04:02 PM
|
0
|
0
|
3264
|
|
POST
|
Sorry for late response. I couldn't build with your gist, but you don't need the arcgis webpack plugin anymore, it's deprecated. It was made for the old amd modules originally and it really was only useful for esm builds to copy assets, but you disabled that, so it wasn't doing anything. It does have a dep on an old version of the SDK though, which might be causing an issue for you.
... View more
04-29-2024
01:14 PM
|
0
|
2
|
3280
|
|
POST
|
The other Accessor you were seeing is because you were mixing cdn and esm classess. When you import the JS Core AMD CDN, you can't import from the ESM CDN. We do provide a helper to import modules in AMD that is closer to ESM imports. Fixed your codepen here. https://codepen.io/odoe/pen/oNOQzMw?editors=0011
... View more
04-19-2024
08:59 AM
|
1
|
0
|
1688
|
|
POST
|
Pushed a fix for that this week, and it went into the "next" version recently. Glad you got the fix.
... View more
04-19-2024
04:06 AM
|
0
|
0
|
1708
|
|
POST
|
Please provide a GitHub repo, stackblitz, or codesandbox that reproduces the issue. Don't know the version of JS SDK or webpack, so that will help. Could be a webpack config issue or how things are loading, but no way to tell.
... View more
04-18-2024
12:30 PM
|
0
|
4
|
3422
|
|
POST
|
Please provide a github repo, stackblitz, or codesandbox that reproduces this issue. As Sam pointed out, no way to pinpoint the problem without it.
... View more
04-16-2024
09:47 AM
|
1
|
0
|
4592
|
|
POST
|
The two CDNs are different. The AMD CDN can be used in production apps. We do recommend using ESM with arcgis/core npm package, but the AMD CDN is still viable for lots of folks. The ESM CDN is available for testing purposes, it's not optimized and will a lot of files. There is an option for the AMD CDN to use a Promise based import, using $arcgis.import. There will be better doc on this with 4.30, but it's mentioned here. https://developers.arcgis.com/javascript/latest/components-programming-patterns/#using-a-proxy Ideally, if you want other users to use this component, that's why I suggested that the web component module not import any maps sdk modules on it's own. You can't mix AMD and ESM CDN. Complex objects and classes can only be set via JS on web components, so you wouldn't be able to have an only HTML solution, you'd need some JS to set props. Attributes can only be strings/numbers/booleans.
... View more
04-11-2024
07:34 AM
|
0
|
1
|
3815
|
|
POST
|
This is cool! I put it into a codepen, just to see how it felt going through the code. Nice work! https://codepen.io/odoe/pen/bGJMJpV This actually looks really good. If I were to do anything different, I might apply the css to your button via an embedded style tag in the shadow dom, but that is just a minor comment. This is a useful pattern to write some web comps that you can still pass to the view ui. If you want to keep this pattern, I would suggest using the AMD CDN, simply for perf purposes. You may also want to pass the class for GraphicsLayer to the component so that it's completely encapsulated, and the component doesn't reference any JS SDK modules directly, if that makes sense. This way it would work for quick apps that you test with the ESM CDN or when you use the AMD CDN. Here is what I meant by encapsulating the JS SDK classes, this way the component is a little more portable. https://codepen.io/odoe/pen/BaExgYb?editors=0010
... View more
04-10-2024
01:03 PM
|
0
|
3
|
3838
|
|
POST
|
It would be the same thing minus the application part. You can expose the view or map on your components for users. You could even build a thin API of methods on your components to handle custom tasks, like zoom to graphics or turn layers on/off. You would probably want to use a build tool like Vite to bundle your components. With Vite you can set the maps sdk as an external dependency. I forget if it's directly in Vite config or as part of the rollup plugin part. But you don't want the maps sdk in your bundles, let the app do that. There is also an option to use any of the web component compilers/frameworks out there like Stencil or Lit, even Svelte can compile to WC.
... View more
04-09-2024
08:17 AM
|
0
|
5
|
3862
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 2 weeks ago | |
| 2 | 2 weeks ago | |
| 1 | 02-27-2026 06:31 AM | |
| 1 | 01-13-2026 02:15 PM | |
| 1 | 12-31-2025 09:05 AM |
| Online Status |
Offline
|
| Date Last Visited |
Sunday
|