Reputation: 43

How to change the color of a point in ESRI maps?

I have JavaScript code that I use to drop pins or point on an Esri map. Once I have dropped the pin or a point, I can also get the coordinates of the point/pin. Now I want to change the color of the pin/point. I have used this code, but the color is still white:

<!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]
      });

      var symbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "circle",
        color: "blue",
        size: "8px", // pixels
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 0],
          width: 1 // points
        }
      };

      const sketch = new Sketch({
        layer: layer,
        view: view,
        symbol: symbol,
        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>

In this code, you will notice that I have added the symbol and its properties. I have added the symbol into the sketch constant. But the color id still the same. Please help.

Upvotes: 1

Answers (2)

Below the Radar

Reputation: 7635

You can set the graphic's symbol after it was created.

  var symbol = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    style: "circle",
    color: "blue",
    size: "8px", // pixels
    outline: { // autocasts as new SimpleLineSymbol()
      color: [255, 255, 0],
      width: 1 // points
    }
  };

  sketch.on('create', function(evt) {
    evt.graphic.symbol = symbol;
    console.log("X = ", evt.graphic.geometry.x);
    console.log("Y = ", evt.graphic.geometry.y);
  });

Upvotes: 3

Muhammet Can TONBUL

Reputation: 3538

Sketch has no property with 'symbol' name. But you can

You can do it in the create event like this.

sketch.on('create', function(evt) { evt.graphic.symbol.color = "blue"; console.log("X = ", evt.graphic.geometry.x); console.log("Y = ", evt.graphic.geometry.y); });

<!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]
      });

      var symbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "circle",
        color: "blue",
        size: "8px", // pixels
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 0],
          width: 1 // points
        }
      };

      const sketch = new Sketch({
        layer: layer,
        view: view,
        symbol: symbol,
        availableCreateTools: ["point"]
      });

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

      sketch.on('create', function(evt) {
        evt.graphic.symbol.color = "blue";
        console.log("X = ", evt.graphic.geometry.x);
        console.log("Y = ", evt.graphic.geometry.y);
      });
    });
  </script>
</head>
<body>
<div id="viewDiv" />
</body>

Upvotes: 3

How to change the color of a point in ESRI maps?

Answers (2)

Related Questions