Update GeoJSON Data Source

The generated code has an instance of GeoJsonDataSource that visualizes data from the uploaded file. Let's modify it to visualize a custom GeoJSON object. To do this, open the index.ts file and modify it as explained below.

First, add this import of FeatureCollection and MapViewEventNames to the import section of the file:

import { FeatureCollection } from "@here/olp-geojson-datasource";
import { MapViewEventNames } from "@here/harp-mapview";

Then, add the following code to the end of the createGeoJsonDataSource function in the index.ts file, just before the row with return geoJsonDataSource;:

const geoJsonData: FeatureCollection = {
    "type": "FeatureCollection",
    "features":
        [{
            "type": "Feature",
            "geometry":
                {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [114.169, 22.319],
                            [114.175, 22.308],
                            [114.185, 22.300],
                            [114.190, 22.306],
                            [114.185, 22.315],
                            [114.169, 22.319]
                        ]
                    ]
                },
            "properties": {},
        }]
};

if (dataInspector.mapView !== undefined) {
    dataInspector.mapView.addEventListener(MapViewEventNames.DataSourceConnect, event => {
        if (geoJsonDataSource !== undefined && event.dataSourceName === geoJsonDataSource.name) {
            geoJsonDataSource.renderGeoJson(geoJsonData); // visualize the GeoJSON object
        }
    });
}

After refreshing the page, you should see a pentagon shape rendered on the map: