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 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.

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.

First, create a layer to store the object. Specify the layer type as ELT_3DPOINT.

// 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

Skip this step if not using an image.

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.

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.

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

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.

Step 3. Create the POI Object as a JSPoint

Create a POI object as a JSPoint through the Module.

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.

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.

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.