#Create Custom Marker

// init maplibre-gl map
const maplibreMap = new maplibregl.Map({
	container: 'map'
});
// init mapxus map
const map = new MapxusMap.Map({
	map: maplibreMap,
	appId: "your_appId",
	secret: "your_secret",
	floorId: "2cdd6174730d4431b1aa730eda596ed4",
});

map.rendercomplete(async () => {
	// create marker
	const marker = new MapxusMap.Marker(maplibreMap);
    // set custom marker style
	await marker.setIcon('poi-02');
    // or
    // await marker.setIcon('https://map-service.mapxus.com/bssww/assets/destination-marker.png');
    // marker.setIconSize(0.25);
	marker.create([
		{
			lngLat: [114.1109316, 22.3709052],
            properties: {
				buildingId: 'tsuenwanplaza_hk_369d01',
                ordinal: '0'
			},
            featureId: 1
        },
		{
			lngLat: [114.1113619, 22.3706961],
            properties: {
				buildingId: 'tsuenwanplaza_hk_369d01',
                ordinal: '0'
			},
            featureId: 2
		}
	]);

	// update marker
    marker.updateData({
        remove: [2],
        add: [
			{
                lngLat: [114.12, 22.38],
                properties: {
                    buildingId: 'tsuenwanplaza_hk_369d01',
                    ordinal: '0'
                },
                featureId: 3
            }
        ],
        update: [
            {
	            lngLat: [114.1109316, 22.3709052],
	            properties: {
		            buildingId: 'tsuenwanplaza_hk_369d01',
		            ordinal: '0',
                    greeting: 'Hello World!'
	            },
	            featureId: 1
            }
        ]
    });
});