adding "Draw by Points" feature in javascript

02-17-2021 01:33 AM
New Contributor


I am trying implement "Draw by Points" feature in my javascript project. But, i could find proper documentation to do this. Can you please help me to create this feature.

Please find the screenshot for the feature(Point should be drawing by specifying input X, Y co-ordinates)

0 Kudos
3 Replies
MVP Regular Contributor

This would just be creating a graphic on the map at the specified coordinate. Check out the Intro to graphics sample app and follow what is done for the point graphic. Instead of hard coding the longitude, latitude of the point, populate those values from the input boxes shown in your screenshot.



You should also check out the sketch widget in case that is a better fit for your app.

New Contributor

Hi Blake,

My actual requirement is to make a point on the Map based on the X,Y values entered. How can i achieve this?

I know how to use Sketch for Polygon, Polyline, etc. But, i want this feature.


Screenshot is the Design given based on which we need to implement.



0 Kudos
MVP Regular Contributor

Sorry if my original message was not clear enough. Here's an outline of what you need to code.

  1. Create toolbar html element (probably div) with input text elements to accept the X and Y values and buttons.
  2. Get the value entered into the text elements when the zoom button is clicked.
  3. Validate the input X,Y values and handle exceptions.
  4. Create a point geometry object, specifying the coordinates as appropriate to the spatial reference.
  5. Create a marker symbol for drawing the point.
  6. Create a graphic and add the geometry and symbol to it.
  7. Add the graphic to the view's graphics layer.

The "Intro to Graphics" sample app demonstrates code for steps 4 - 7.

0 Kudos