# Creating POIs
POIs (Points of Interest) are primarily used to mark specific points on a map, maintaining a constant size regardless of distance.
In XDWorld, POIs consist of an image at the top and text at the bottom.
## Creating a POI
POIs can be created using a specific image, with text only, or using both image and text.
POIs are created as [JSPoint](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/object/jspoint) type objects. The visualization of POIs involves the following steps:
1. Create a layer to store the POI
2. Load and create the image for the POI (skip this step if not using an image)
3. Create the POI object as a JSPoint
4. Set properties for the POI
5. Store the POI in the layer for visualization
Below is the complete code for creating a POI object with both an image and text.
Let's look at the details of the code step by step.
```javascript
function createPOI() {
// 1. Create a layer to add the POI object
var layerList = new Module.JSLayerList(true);
var layer = layerList.createLayer("POI_LAYER", Module.ELT_3DPOINT);
// 2-1. Load the image for the POI
var img = new Image();
img.onload = function () {
// 2-2. Create the image for the POI
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(img, 0, 0);
// 3. Create the POI object as a JSPoint
var poi = Module.createPoint("MY_POI");
// 4. Set properties for the POI
poi.setPosition(new Module.JSVector3D(126.924116, 37.52162, 13.315417));
poi.setImage(ctx.getImageData(0, 0, this.width, this.height).data, this.width, this.height);
poi.setText("TEXT");
// 5. Store the POI in the layer for visualization
layer.addObject(poi, 0);
};
img.src = "./MY_POI_IMAGE.png";
}
```
### Step 1. Create a Layer to Store the POI
POI objects must be stored in a specific layer for visualization.
For more information about layers, please refer [here](https://egiscorp.gitbook.io/xdworld_global_manual/introduce/tutorial/tutorial_layer).
First, create a layer to store the object. Specify the layer type as ELT\_3DPOINT.
```javascript
// Create a layer to add the POI object
var layerList = new Module.JSLayerList(true);
var layer = layerList.createLayer("POI_LAYER", Module.ELT_3DPOINT);
```
The created layer will be used again once the JSPoint creation is complete.
### Step 2. Load and Create the Image for the POI
{% hint style="info" %}
Skip this step if not using an image.
{% endhint %}
This step involves creating the image for the POI.
The image is created using a canvas.
You can draw an existing image file on the canvas or directly create an image using the canvas context.
After drawing the image on the canvas, return the image data using the getImageData function and apply the created image to the POI.
```javascript
var img = new Image();
img.onload = function () {
// 2-2. Create the image for the POI
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(img, 0, 0);
// ... (omitted) ...
poi.setImage(ctx.getImageData(0, 0, this.width, this.height).data, this.width, this.height); // Apply the image
};
```
You can also use an image directly drawn on the canvas without needing an image file.
In this case, there's no need to wait for the image file to load asynchronously, so you can create an image like this for simple markers.
```javascript
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 6;
ctx.arc(width * 0.5, height * 0.5, 2, 0, 2 * Math.PI, false);
ctx.closePath();
// ... (omitted) ...
poi.setImage(ctx.getImageData(0, 0, this.width, this.height).data, this.width, this.height); // Apply the image
```
{% hint style="warning" %}
POI objects often use the same image.
In such cases, it's more efficient to create the image data once and apply it to multiple POIs rather than creating the same image data multiple times.
{% endhint %}
### Step 3. Create the POI Object as a JSPoint
Create a POI object as a [JSPoint](https://egiscorp.gitbook.io/xdworld_global_manual/introduce-1/object/jspoint) through the Module.
```javascript
var poi = Module.createPoint("MY_POI");
```
Specify the object key value as a parameter during creation.
The object key value is used to distinguish objects, and the same object key cannot be entered within the same layer.
### Step 4. Set Properties for the POI
Set detailed properties for the POI.
```javascript
poi.setPosition(new Module.JSVector3D(126.924116, 37.52162, 13.315417));
poi.setImage(ctx.getImageData(0, 0, this.width, this.height).data, this.width, this.height);
poi.setText("TEXT");
```
For the POI to be visualized at the specified location, the position (longitude, latitude, altitude) values are essential.
Additionally, if using an image, register the image data created in the previous step, and specify the text string to be displayed if there is one.
### Step 5. Store the POI in the Layer for Visualization
Store the created JSPoint object in the layer created in the previous step for visualization.
```javascript
layer.addObject(poi, 0);
```
## POI Creation Result
After completing all the steps, a POI representing a specific location is created.
The image below renders POIs using text, an image, and both text and image.
Now, you can freely express the locations you want to display using POI objects.
Interested in seeing live code for the POI creation process? Please click [here](https://sandbox.egiscloud.com/code/main.do?id=object_point).
