How to change the color of the marker/point that has been dropped on the map?

1344
3
Jump to solution
02-25-2020 12:59 AM
SiyabongaKubeka
Occasional Contributor

Good day

 

Is it possible to change the colour of the point that I have dropped on the map? Please see my code below:

 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <meta

      name="viewport"

      content="initial-scale=1,maximum-scale=1,user-scalable=no"

    />

    <title>DEA GIS APPLICATION</title>

 

    <link

      rel="stylesheet"

      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"

    />

    <script src="https://js.arcgis.com/4.12/"></script>

 

    <style>

      html,

      body,

      #viewDiv {

        padding: 0;

        margin: 0;

        height: 100%;

        width: 100%;

      }

    </style>

    <script>

      require([

        "esri/widgets/Sketch",

        "esri/Map",

        "esri/layers/GraphicsLayer",

        "esri/views/MapView"

      ], function(Sketch, Map, GraphicsLayer, MapView) {

        const layer = new GraphicsLayer();

 

        const map = new Map({

          basemap: "streets",

          layers: [layer]

        });

 

        const view = new MapView({

          container: "viewDiv",

          map: map,

          zoom: 5,

          center: [90, 45]

        });

 

        const sketch = new Sketch({

          layer: layer,

          view: view,

          availableCreateTools: ["point"]

        });

 

        view.ui.add(sketch, "top-right");

       

        sketch.on('create', function(evt){

                                           console.log("X = ", evt.graphic.geometry.x);

                                           console.log("Y = ", evt.graphic.geometry.y);

                             });

      });

    </script>

  </head>

 

  <body>

    <div id="viewDiv"></div>

  </body>

</html>

 

Regards

Siyabonga Kubeka

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

try.

      sketch.viewModel.watch('state', function (state) {
        if (state === 'ready') {
          sketch.viewModel.pointSymbol = {
            type: "simple-marker",
            style: "circle",
            size: 6,
            color: [255, 0, 0],
            outline: {
              color: [50, 50, 50],
              width: 1
            }
          };
        }
      });

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus
RobertScheitlin__GISP
MVP Emeritus

try.

      sketch.viewModel.watch('state', function (state) {
        if (state === 'ready') {
          sketch.viewModel.pointSymbol = {
            type: "simple-marker",
            style: "circle",
            size: 6,
            color: [255, 0, 0],
            outline: {
              color: [50, 50, 50],
              width: 1
            }
          };
        }
      });
SiyabongaKubeka
Occasional Contributor

Thank you very much Robert, it works.

0 Kudos