Using ColorPicker in ArcGIS JavaScript API 4.12

646
5
08-27-2019 11:50 PM
JerryChen
New Contributor III

I can only find ColorPicker in ArcGIS JavaScript API 3.X, but I'm working on a project using 4.12.

I'm trying to implement ColorPicker to my map to allow users to choose colors for Sketch objects.

I've included both 4.12 and 3.29 APIs in my code as well as required "esri/dijit/ColorPicker", then the website just turned into a blank white page. Obviously it doesn't work this way.

So, is there any other way to implement ColorPicker in a API v4.12 project?

0 Kudos
5 Replies
BenElan
Esri Contributor

According to the Functionality matrix, ColorPicker is 'Coming soon' in 4x. Until then, there is not an Esri supported workflow to replicate this functionality.

That being said, you could use something like Spectrum to select a color and create symbology for the SketchViewModel

JerryChen
New Contributor III

Thank you for your reply, but I still get blank page after I include the Spectrum CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

Is there any further requirement to implement Spectrum ColorPicker to ArcGIS API map?

0 Kudos
JerryChen
New Contributor III

The map shows after I put Spectrum CDN above the ESRI API script. But the ColorPicker is still a default text input box, and it's placed outside the map.

I'm so stuck on this. I've tried only the ColorPicker code on CodePen and it works perfectly, but not when I tried to place it on my map. What should I do to get the ColorPicker to work with the ArcGIS API?

0 Kudos
BenElan
Esri Contributor

Hi Jerry,

As I said, this isn't an Esri supported functionality so you will have to write some custom code to get it to work. You will need to change some css to get it over the map. You will also need to get the color selected in JavaScript and use that color to create your SketchViewModel.

Kristian stated that the ArcGIS JavaScript API 4.x will implement a Calcite component for color picking, so alternatively, you can wait for that to be released.

0 Kudos
KristianEkenes
Esri Regular Contributor

Hi Jerry,

The 4.x JS API will not add a ColorPicker widget. Instead, it will be implemented as a Calcite component, which will be used in Esri apps. This is currently being worked on. You can see the issue for tracking this work here: https://github.com/Esri/calcite-components/issues/64

We'll update the Functionality Matrix accordingly.