Add single marker based on coordinates

508
3
08-04-2022 05:18 AM
by Anonymous User
Not applicable

I'm developing a custom widget on Experience Builder, that would basically have additionnal features than the Search Widget, especially since we have a particular geolocator.

It's all working good, until I want to add a marker to the map to mark the location searched by the user.

I tried to use the sample provided by the documentation and have slightly adapted for EB, but I get a Typescript error when I create the Graphic object ("t is undefined"). I don't get the error without these lines.

What am I missing ?

let graphicB = new Graphic({  // graphic with point geometry
        geometry: new Point({ x: evt.value.x, y: evt.value.y }), // set geometry from user coordinates here
        symbol: new SimpleMarkerSymbol({
          type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
          style: "square",
          color: "blue",
          size: "8px",  // pixels
          outline: {  // autocasts as new SimpleLineSymbol()
            color: [255, 255, 0],
            width: 3  // points
          }
        }) // set symbol here
      });
      let layer = new GraphicsLayer({
        graphics: [graphicB]
      });
      this.state.jimuMapView.map.add(layer);
0 Kudos
3 Replies
KenBuja
MVP Esteemed Contributor

TypeScript doesn't work with autocasting, so you'll have to add a Color and an Outline explicitly

 

      symbol: new SimpleMarkerSymbol({
        style: "square",
        color: new Color([0, 0, 255]),
        size: "8px",
        outline: new SimpleLineSymbol({
          color: new Color([255, 255, 0]),
          width: 3
        })
      })

 

by Anonymous User
Not applicable

Thank you for your answer, I missed that indeed.

Unfortunately, I edited my code but I still get the same error.

0 Kudos
ReneRubalcava
Frequent Contributor

When creating the Point with x/y, you also need to set the spatialReference. If you know the SR matches the the map, you can use view.SpatialReference.

geometry: new Point({
    x: event.value.x, y: event.value.y,
    spatialReference: view.spatialReference // set sr of Point
}),

 

0 Kudos