import { getMapData, show3dMap } from "@mappedin/mappedin-js"; import "@mappedin/mappedin-js/lib/index.css"; async function init() { // See Trial API key Terms and Conditions // https://developer.mappedin.com/docs/demo-keys-and-maps const mapData = await getMapData({ key: "mik_yeBk0Vf0nNJtpesfu560e07e5", secret: "mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022", mapId: "65c0ff7430b94e3fabd5bb8c", }); // SVG image for the label's icon. const icon = ``; // Mapping of space names to specific colors const colorMapping = { "Food Stall": "#FF610A", Restaurant: "#FF610A", "Food Court Store": "#FF610A", Store: "#891244", "Grocery Store": "#891244", "Mall Office": "#891244", Washroom: "#219ED4", }; //Display the default map in the mappedin-map div. const mapView = await show3dMap( document.getElementById("mappedin-map") as HTMLDivElement, mapData ); // Label all spaces with their space name and add styling using a custom appearance and SVG icon. mapData.getByType("space").forEach((space) => { if (space.name) { const color = colorMapping[space.name] || "gray"; // Default to gray if no color is mapped mapView.Labels.add(space, space.name, { appearance: { marker: { foregroundColor: { active: color, inactive: color, }, icon: icon, }, text: { foregroundColor: color, }, }, }); } }); } init();

labels-appearance