In the last post, we created point graphic with hard code. But it is unwanted situation for some reason like lost ready prototype etc. Today in this post, i will describe how to create point using "point library" with Esri ArcGIS JS API. And we will add this point to map graphically again.
We will learn how to create point using ArcGIS JS API "point library".
You can use any operating system and any ide or editor. I will use "Windows PC" and "Visual Studio Code". And i will use ESRI ArcGIS JS Library from web. But you can install library using bower from github repository.
| -- ESRI ArcGIS JS API 3.23
| -- | -- js
| -- | -- | -- main.js
| -- | -- css
| -- | -- | -- main.css
| -- | -- fonts
| -- | -- | -- font-awesome-4.7.0
| -- | -- | -- | -- css
| -- | -- | -- | -- |-- font-awesome.min.css
| -- | -- | -- | -- fonts
| -- | -- | -- | -- less
| -- | -- | -- | -- scss
| -- | -- index.html
*Only used files in project has been shown. There are other files for dependency.
Firstly we will create point using "ESRI ArcGIS JS API Point" library. We will work in "main.js" file.
We will add point library using require method.
require([
"esri/geometry/Point"
], function (
Point
){...});
Now, we can create point instance. It has take two parameters. First parameter is longitude value and second parameter is latitude value. I will use Istanbul Turkey coordinates. You can take your own coordinates from google maps.
var point = new Point(28.993275, 41.014054);
We will create simple marker symbol to show our points on map.
We will add simple marker symbol library using require method.
require([
"esri/symbols/SimpleMarkerSymbol"
], function (
SimpleMarkerSymbol
){...});
We will create new symbol instance. We will not use any parameters for now. But we will learn how to create special symbol in future posts.
var simpleMarkerSymbol = new SimpleMarkerSymbol();
We learned how to create graphic last post. In this time differently, we will create new graphic instance using two parameters. First parameter is geometry for this example it will be our point. And second parameter is symbol for this example it will be our simple marker symbol.
var pointGraphic = new Graphic(point, simpleMarkerSymbol);
Now, we can add point graphic to graphics layer using add method.
graphicsLayer.add(pointGraphic);
We can see the result by running the "index.html" file.
We learned how to create point geometry and add to map using ArcGIS JS API and Dojo in web.
Thank you for your attention and see you next time!
You can view old post below links.
