Hi,
I've noticed this morning that v4.13 of the JavaScript API has been released. The thing I've been waiting for before I can migrate all my apps is a colorpicker and I see that this page Functionality matrix | ArcGIS API for JavaScript 4.13 has been updated with this:
ColorPicker | Not planned | Instead, this will be available in the Esri/calcite-components project. |
I've had a quick Google rummage and I can't find much out about the calcite components project. Apologies for sounding like a numpty, but can someone explain to me what it is and how I use it?
And if someone can tell me an expected date for the colorpicker, that would be brilliant.
Many thanks,
Sarah Noakes
Cornwall Council.
The calcite-components are a set of web components that are used in various Esri apps. The idea is that non-GIS components, like the color picker will become part of this library. Web components make reusability much simpler for these components.
Here is a demo using the loader component with an ArcGIS JSAPI app.
I can do something like this.
<!DOCTYPE html>
<html>
<head>
...
<style>
...
calcite-loader {
position: absolute;
top: 40%;
left: 50%;
}
</style>
...
<script src="https://unpkg.com/@esri/calcite-components@1.0.0-beta.2/dist/calcite/calcite.js"></script>
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
const loader = document.querySelector("calcite-loader");
...
// when view is ready
view.when(() => {
loader.isActive = false;
});
...
function queryFeatures(screenPoint) {
// set loader active
loader.isActive = true;
...
layer
.queryObjectIds({
...
})
.then(function(objectIds) {
...
})
.then(function(attachmentsByFeatureId) {
...
// set active false
loader.isActive = false;
})
.catch(function(error) {
...
});
}
...
</script>
</head>
<body>
...
<div id="viewDiv">
<calcite-loader text="Fetching data..." is-active></calcite-loader>
</div>
</body>
</html>
You can treat these components like any other DOM element, but they can have properties and even methods that you can interact with.
Doesn't look like there is a set date for the color picker as of yet though, but it is in development.
Hi Rene,
That's really helpful - thank you.
Have a good weekend,
Sarah.