venue-js 1.0.0 → 1.1.0-next.2

package/dist/index.js

@@ -223,7 +223,6 @@ var createPopulator = ({
   const populateDetail = (detail) => Promise.resolve(detail);
   const populateFootprint = (footprint) => Promise.resolve(footprint);
   const populateGeofence = (geofence) => Promise.resolve(geofence);
-  const populateOpening = (opening) => Promise.resolve(opening);
   const populateRelationship = (relationship) => Promise.resolve(relationship);
   const populatePrivilege = (privilege) => Promise.resolve(privilege);
   const populateEvent = (event) => Promise.resolve(event);
@@ -299,8 +298,11 @@ var createPopulator = ({
     const unit = units.find(
       (unit2) => unit2.properties.category === "walkway" && unit2.properties.level_id === kiosk.properties.level_id && (0, import_boolean_within.booleanWithin)(kiosk, unit2)
     );
-    const sections = await internalFilterByType("section");
-    const section = sections.find((section2) => (0, import_boolean_within.booleanWithin)(anchor, section2));
+    let section = null;
+    if (anchor) {
+      const sections = await internalFilterByType("section");
+      section = sections.find((section2) => (0, import_boolean_within.booleanWithin)(anchor, section2));
+    }
     return {
       ...kiosk,
       properties: {
@@ -369,6 +371,18 @@ var createPopulator = ({
       }
     };
   };
+  const populateOpening = async (opening) => {
+    const venue = await internalFindById(opening.properties.venue_id);
+    const level = await internalFindById(opening.properties.level_id);
+    return {
+      ...opening,
+      properties: {
+        venue,
+        level: await populateLevel(level),
+        ordinal: level.properties.ordinal
+      }
+    };
+  };
   const populateSection = async (section) => {
     const venue = await internalFindById(section.properties.venue_id);
     const level = await internalFindById(section.properties.level_id);
@@ -386,17 +400,21 @@ var createPopulator = ({
     const venue = await internalFindById(unit.properties.venue_id);
     const level = await internalFindById(unit.properties.level_id);
     const sections = await internalFilterByType("section");
-    const section = sections.find((section2) => (0, import_boolean_within.booleanWithin)(unit, section2));
-    return {
-      ...unit,
-      properties: {
-        ...unit.properties,
-        venue,
-        ordinal: level.properties.ordinal,
-        level: await populateLevel(level),
-        section: section ? await populateSection(section) : null
-      }
-    };
+    try {
+      const section = unit.geometry.type !== "MultiPolygon" ? sections.find((section2) => (0, import_boolean_within.booleanWithin)(unit, section2)) : null;
+      return {
+        ...unit,
+        properties: {
+          ...unit.properties,
+          venue,
+          ordinal: level.properties.ordinal,
+          level: await populateLevel(level),
+          section: section ? await populateSection(section) : null
+        }
+      };
+    } catch (err) {
+      console.log(`error finding section `, { unit, sections });
+    }
   };
   const populateVenue = (venue) => {
     return Promise.resolve(venue);
@@ -439,6 +457,26 @@ var createPopulator = ({
   };
 };
 
+// src/data/utils/match-filters.ts
+function isInFilter(filter) {
+  return typeof filter === "object" && filter !== null && "$in" in filter && Array.isArray(filter.$in);
+}
+var someIntersect = (a, b) => a.some((v) => b.includes(v));
+function matchFilter(value, filter) {
+  if (Array.isArray(value)) {
+    if (isInFilter(filter)) return someIntersect(value, filter.$in);
+    return value.includes(filter);
+  } else {
+    if (isInFilter(filter)) return filter.$in.includes(value);
+    return value === filter;
+  }
+}
+function matchFilters(item, filters) {
+  return Object.entries(filters).every(([key, filter]) => {
+    return matchFilter(item.properties[key], filter);
+  });
+}
+
 // src/data/getDataClient.ts
 var getDataClient = (options) => {
   const observers = /* @__PURE__ */ new Map();
@@ -514,7 +552,12 @@ var getDataClient = (options) => {
     queryKey: [featureType, "list", params],
     queryFn: async () => {
       const features = await internalFilterByType(featureType);
-      return params.populate === true ? await Promise.all(features.map((f) => populator[featureType](f))) : features;
+      const filters = params.filters ?? {};
+      let result = features;
+      if (params.filters) {
+        result = features.filter((f) => matchFilters(f, filters));
+      }
+      return params.populate === true ? await Promise.all(result.map((f) => populator[featureType](f))) : result;
     },
     ...options2 ?? {}
   });
@@ -557,9 +600,9 @@ var getDataClient = (options) => {
 };
 
 // src/IndoorMap/IndoorMap.ts
-var import_maptalks8 = require("maptalks");
+var import_maptalks_gl = require("maptalks-gl");
 var import_tween2 = __toESM(require("@tweenjs/tween.js"));
-var import_lodash6 = __toESM(require("lodash"));
+var import_lodash7 = __toESM(require("lodash"));
 
 // ../../node_modules/@turf/helpers/dist/esm/index.js
 var earthRadius = 63710088e-1;
@@ -638,7 +681,7 @@ function isNumber(num) {
 
 // src/IndoorMap/IndoorMap.ts
 var import_distance = __toESM(require("@turf/distance"));
-var import_center3 = __toESM(require("@turf/center"));
+var import_center4 = __toESM(require("@turf/center"));
 
 // ../../node_modules/@turf/meta/dist/esm/index.js
 function coordEach(geojson, callback, excludeWrapCoord) {
@@ -760,13 +803,12 @@ function bbox(geojson, options = {}) {
   });
   return result;
 }
-var turf_bbox_default = bbox;
+var index_default = bbox;
 
 // src/IndoorMap/IndoorMap.ts
 var import_transform_scale = __toESM(require("@turf/transform-scale"));
 var import_bbox_polygon = __toESM(require("@turf/bbox-polygon"));
-var import_three9 = require("three");
-var import_maptalks9 = require("maptalks.three");
+var import_three8 = require("three");
 
 // src/IndoorMap/constants.ts
 var defaultLayerOption = { enableAltitude: true };
@@ -1485,10 +1527,8 @@ var GeometryType = {
 var ORDINAL_HEIGHT = 0;
 var VENUE_Z_INDEX = 0;
 var LEVEL_Z_INDEX = 2;
-var UNIT_Z_INDEX = 3;
 var FIXTURE_Z_INDEX = 4;
 var DECORATION_Z_INDEX = 4;
-var KIOSK_Z_INDEX = 5;
 var OPENING_Z_INDEX = 3;
 var SECTION_Z_INDEX = 6;
 var USER_LOCATION_Z_INDEX = 99;
@@ -1576,77 +1616,6 @@ var SPRITE_HIGHLIGHT_MARKER_FEATURE = SPRITE_MARKER_FEATURE.map(
 );
 var OCCUPANT_TEXT_MARKER_CLASSNAME = "mtk-occupant-text-marker";
 var getAltitude = (properties) => Math.max(0, properties.ordinal * ORDINAL_HEIGHT || 0);
-var createRoomUnit = (feature2, style, options) => {
-  const { geometry, id, properties } = feature2;
-  const { allowOverride, inheritFillColorToLine } = options;
-  const symbolStyle = { ...style };
-  if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
-  if (inheritFillColorToLine) symbolStyle.lineColor = symbolStyle.polygonFill;
-  return new GeometryType[geometry.type](geometry.coordinates, {
-    properties: {
-      id,
-      feature_type: "unit",
-      category: properties.category,
-      altitude: getAltitude(properties)
-    },
-    symbol: symbolStyle,
-    defaultSymbol: symbolStyle
-  });
-};
-var createAmenityUnit = (feature2, style, options = {}) => {
-  const { geometry, id, properties } = feature2;
-  const { allowOverride, inheritFillColorToLine } = options;
-  const symbolStyle = { ...style };
-  if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
-  if (inheritFillColorToLine) symbolStyle.lineColor = symbolStyle.polygonFill;
-  const area = new GeometryType[geometry.type](geometry.coordinates, {
-    properties: {
-      id,
-      feature_type: "unit",
-      category: properties.category,
-      altitude: getAltitude(properties)
-    },
-    symbol: symbolStyle,
-    defaultSymbol: symbolStyle
-  });
-  return area;
-};
-var createNonpublicUnit = (feature2, style, options = {}) => {
-  const { geometry, id, properties } = feature2;
-  const { allowOverride, inheritFillColorToLine } = options;
-  const symbolStyle = { ...style };
-  if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
-  if (inheritFillColorToLine) symbolStyle.lineColor = symbolStyle.polygonFill;
-  return new GeometryType[geometry.type](geometry.coordinates, {
-    properties: {
-      id,
-      feature_type: "unit",
-      category: properties.category,
-      altitude: getAltitude(properties)
-    },
-    symbol: {
-      ...style
-    }
-  });
-};
-var createWalkwayUnit = (feature2, style, options) => {
-  const { geometry, id, properties } = feature2;
-  const { allowOverride, inheritFillColorToLine } = options;
-  const symbolStyle = { ...style };
-  if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
-  if (inheritFillColorToLine) symbolStyle.lineColor = symbolStyle.polygonFill;
-  return new GeometryType[geometry.type](geometry.coordinates, {
-    properties: {
-      id,
-      feature_type: "unit",
-      category: properties.category,
-      altitude: getAltitude(properties)
-    },
-    symbol: {
-      ...symbolStyle
-    }
-  });
-};
 var createWaterFixture = (feature2, style, options = {}) => {
   const { geometry, properties } = feature2;
   const { allowOverride, inheritFillColorToLine, zIndex } = options;
@@ -2198,62 +2167,6 @@ var styledFeatureGenerator = (mapTheme) => {
         zIndex: LEVEL_Z_INDEX
       });
     },
-    createUnit: (feature2) => {
-      const {
-        feature_type,
-        properties: { category }
-      } = feature2;
-      const elementStyle = getElementSymbol(`${feature_type}.${category}`);
-      const options = getElementOptions(`${feature_type}.${category}`);
-      const zIndex = UNIT_Z_INDEX;
-      switch (feature2.properties.category) {
-        case "room":
-        case "terrace":
-        case "unenclosedarea":
-        case "vegetation":
-        case "unspecified":
-        case "recreation":
-          return createRoomUnit(feature2, elementStyle, options).setZIndex(
-            zIndex
-          );
-        case "firstaid":
-        case "restroom":
-        case "restroom.female":
-        case "restroom.male":
-        case "escalator":
-        case "elevator":
-        case "stairs":
-        case "stairs.emergencyexit":
-        case "parking":
-        case "smokingarea":
-        case "mothersroom":
-        case "privatelounge":
-        case "shuttle":
-        case "fieldofplay":
-          return createAmenityUnit(feature2, elementStyle, options).setZIndex(
-            zIndex
-          );
-        case "nonpublic":
-        case "structure":
-        case "brick":
-        case "concrete":
-        case "drywall":
-        case "glass":
-        case "wood":
-        case "column":
-        case "opentobelow":
-          return createNonpublicUnit(feature2, elementStyle, options).setZIndex(
-            zIndex
-          );
-        case "walkway":
-        case "footbridge":
-          return createWalkwayUnit(feature2, elementStyle, options).setZIndex(
-            zIndex - 1
-          );
-        default:
-          break;
-      }
-    },
     createMarker: (feature2) => {
       try {
         const { geometry, properties } = feature2;
@@ -2438,32 +2351,6 @@ var styledFeatureGenerator = (mapTheme) => {
         symbol
       });
     },
-    createKiosk: (feature2) => {
-      const { geometry, feature_type, properties, id } = feature2;
-      const {
-        properties: { category }
-      } = feature2;
-      const elementStyle = getElementSymbol(`${feature_type}.${category}`);
-      const options = getElementOptions(
-        `${feature_type}.${category}.geometry.options`
-      );
-      const { allowOverride, inheritFillColorToLine } = options;
-      const symbolStyle = { ...elementStyle };
-      if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
-      if (inheritFillColorToLine)
-        symbolStyle.lineColor = symbolStyle.polygonFill;
-      return new GeometryType[geometry.type](geometry.coordinates, {
-        properties: {
-          id,
-          feature_type,
-          category: "kiosk",
-          altitude: getAltitude(properties)
-        },
-        symbol: symbolStyle,
-        defaultSymbol: symbolStyle,
-        zIndex: KIOSK_Z_INDEX
-      });
-    },
     createSection: (feature2) => {
       const { properties, feature_type } = feature2;
       const { category } = properties;
@@ -2836,43 +2723,6 @@ var styledFeatureGenerator = (mapTheme) => {
         markerProperties
       );
     },
-    create3DUnit: async (unit, threeLayer) => {
-      const { id, feature_type, properties } = unit;
-      const { category, ordinal, model3d } = properties;
-      const modelProperty = {
-        id,
-        feature_type,
-        category,
-        ordinal
-      };
-      const center2 = (0, import_center2.default)(unit);
-      const coordinate = import_lodash4.default.get(center2, "geometry.coordinates");
-      const models = await create3DModels(
-        model3d,
-        coordinate,
-        modelProperty,
-        threeLayer
-      );
-      return models;
-    },
-    create3DKiosk: async (kiosk, threeLayer) => {
-      const { id, feature_type, properties } = kiosk;
-      const { ordinal, model3d } = properties;
-      const modelProperty = {
-        id,
-        feature_type,
-        ordinal
-      };
-      const center2 = (0, import_center2.default)(kiosk);
-      const coordinate = import_lodash4.default.get(center2, "geometry.coordinates");
-      const models = await create3DModels(
-        model3d,
-        coordinate,
-        modelProperty,
-        threeLayer
-      );
-      return models;
-    },
     createVenue3DModel: async (venue, threeLayer) => {
       const { id, feature_type, properties } = venue;
       const { category, model3d } = properties;
@@ -2951,52 +2801,6 @@ var styledFeatureGenerator = (mapTheme) => {
       );
       return object;
     },
-    createExtrudedKiosk: (kiosk, threeLayer, options) => {
-      const extrudeHeight = import_lodash4.default.get(options, "height");
-      if (!extrudeHeight) return;
-      const kioskProperty = getFeatureProperties(kiosk);
-      const options3d = {
-        offset: -0.1,
-        altitude: import_lodash4.default.get(options, "altitude", 0)
-      };
-      const color = kioskProperty.defaultColor;
-      if (color === "transparent") return;
-      const material = new import_three5.MeshLambertMaterial({
-        color,
-        transparent: true
-      });
-      const object = createExtrudePolygon(
-        kiosk.geometry,
-        threeLayer,
-        material,
-        extrudeHeight,
-        kioskProperty,
-        options3d
-      );
-      return object;
-    },
-    createExtrudedLevel: (level, threeLayer, options) => {
-      const extrudeHeight = import_lodash4.default.get(options, "height", 0);
-      if (!extrudeHeight) return;
-      const levelProperty = getFeatureProperties(level);
-      const options3d = { offset: 0 };
-      const color = levelProperty?.defaultColor || "#808080";
-      if (color === "transparent" || import_lodash4.default.isEmpty(level?.geometry?.coordinates))
-        return;
-      const material = new import_three5.MeshLambertMaterial({
-        color,
-        transparent: true
-      });
-      const object = createExtrudePolygon(
-        level.geometry,
-        threeLayer,
-        material,
-        extrudeHeight,
-        levelProperty,
-        options3d
-      );
-      return object;
-    },
     createAmbientLight: (config) => {
       const { color: colorString = "0xffffff", intensity = 1 } = config;
       const color = parseInt(colorString, 16);
@@ -3256,175 +3060,252 @@ var CameraManager = class {
   };
 };
 
-// src/IndoorMap/renderer/Element3DRenderer.ts
-var maptalks5 = __toESM(require("maptalks"));
+// src/IndoorMap/renderer/RendererManager.ts
+var import_min = __toESM(require("lodash/min"));
+var import_center3 = require("@turf/center");
+var import_maptalks8 = require("maptalks.three");
+var THREE3 = __toESM(require("three"));
+
+// src/IndoorMap/renderer/3d/Element3DRenderer.ts
+var maptalks4 = __toESM(require("maptalks"));
 var THREE2 = __toESM(require("three"));
-var import_maptalks7 = require("maptalks.three");
+var import_GLTFLoader2 = require("three/examples/jsm/loaders/GLTFLoader");
+var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
 var import_buffer2 = __toESM(require("@turf/buffer"));
-var import_three8 = require("three");
 
-// src/IndoorMap/object3d/Escalator.ts
-var maptalks4 = __toESM(require("maptalks"));
-var import_maptalks6 = require("maptalks.three");
+// src/IndoorMap/renderer/3d/element3DRendererOptions.ts
+var element3DRendererOptions = {
+  unit: {
+    default: { color: "#ffffff", height: 4 },
+    byCategory: {
+      walkway: { color: "#cccccc", height: 0.1 },
+      terrace: { color: "#cccccc", height: 0.1 },
+      unenclosedarea: { color: "#cccccc", height: 0.2 },
+      nonpublic: { color: "#999999", height: 0.3 },
+      escalator: { height: 0.2 },
+      room: { color: "#ffffff", height: 2, bottomHeight: 0.12 }
+    }
+  },
+  kiosk: {
+    default: { color: "#666666", height: 0.6, bottomHeight: 0.12 }
+  },
+  fixture: {
+    default: { color: "#ffffff", height: 0.5 },
+    byCategory: {
+      water: { color: "#ACD7EC", height: 0.1 },
+      vegetation: { color: "#91C499", height: 0.5 }
+    }
+  }
+};
+
+// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
+var import_maptalks6 = require("maptalks");
 var THREE = __toESM(require("three"));
-var import_d3plus_shape2 = require("d3plus-shape");
-var import_lodash_es2 = require("lodash-es");
-var defaultRectAngleToCalc2 = (0, import_lodash_es2.range)(-90, 90, 2);
-var Escalator = class extends import_maptalks6.BaseObject {
-  layer;
-  constructor(feature2, opts, layer) {
+var import_maptalks7 = require("maptalks.three");
+var import_lodash6 = require("lodash");
+
+// src/IndoorMap/renderer/utils/interpolateStops.ts
+var interpolateStops = ({ stops }, zoom) => {
+  if (zoom <= stops[0][0]) return stops[0][1];
+  if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
+  for (let i = 0; i < stops.length - 1; i++) {
+    const [z1, v1] = stops[i];
+    const [z2, v2] = stops[i + 1];
+    if (zoom >= z1 && zoom <= z2) {
+      const t = (zoom - z1) / (z2 - z1);
+      return v1 + t * (v2 - v1);
+    }
+  }
+};
+
+// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
+var OPTIONS4 = {
+  // Texture options
+  text: "",
+  textAlign: "center",
+  color: "#ffffff",
+  fontFamily: "sans-serif",
+  fontSize: 28,
+  fontWeight: 400,
+  background: "rgba(0, 0, 0, 0.2)",
+  lineHeight: 32,
+  padding: 8,
+  strokeColor: "#000000",
+  strokeWidth: 6,
+  strokeStyle: "round",
+  // Sprite options
+  /* Overall scale multiplier  */
+  scale: 1,
+  altitude: 0,
+  opacity: 1
+};
+var TextSpriteMarker = class extends import_maptalks7.BaseObject {
+  #altitudeOffset = 0;
+  constructor(coordinate, options, layer, properties = {}) {
+    options = import_maptalks6.Util.extend({}, OPTIONS4, options, { layer });
     super();
-    this._initOptions({});
-    this.layer = layer;
+    this._coordinate = new import_maptalks6.Coordinate(coordinate);
+    this._initOptions(options);
     this._createGroup();
-    const startAltitude = feature2.properties.ordinal * HEIGHT_METER;
-    const endAltitude = startAltitude + 0.5 * HEIGHT_METER;
-    this.buildMesh(feature2.geometry.coordinates[0], {
-      startAltitude,
-      endAltitude
+    this.properties = { ...properties };
+    const sprite = this._createSprite();
+    this.getObject3d().add(sprite);
+    this._updatePosition();
+    this.type = "TextSpriteMarker";
+  }
+  getOptions() {
+    return super.getOptions();
+  }
+  _createSprite() {
+    const options = this.getOptions();
+    const texture = this._createTextTexture(options.text, options);
+    const material = new THREE.SpriteMaterial({
+      map: texture,
+      transparent: true,
+      alphaTest: 0.1
     });
-    if (opts.props) this.setProperties(opts.props);
+    const sprite = new THREE.Sprite(material);
+    const w = texture.image.width;
+    const h = texture.image.height;
+    const base = 1 / 16;
+    const normalizedScale = options.scale / this.getMap().getGLRes();
+    sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
+    this.#altitudeOffset = Math.max(
+      h * base * options.scale * 0.5,
+      0.05
+      // minimum lift in world units
+    );
+    return sprite;
   }
-  buildMesh(coordinates, { startAltitude, endAltitude }) {
-    const rect = (0, import_d3plus_shape2.largestRect)(coordinates, {
-      cache: true,
-      angle: defaultRectAngleToCalc2
+  _createTextTexture(text, options = {}) {
+    const {
+      padding,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      lineHeight,
+      background,
+      color,
+      textAlign,
+      strokeColor,
+      strokeWidth,
+      maxWidth
+    } = options || {};
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const paragraphs = String(text).split("\n");
+    const wrappedLines = [];
+    paragraphs.forEach((paragraph) => {
+      if ((0, import_lodash6.isNil)(maxWidth) || isNaN(maxWidth)) {
+        wrappedLines.push(paragraph);
+        return;
+      }
+      const words = paragraph.split(/\s+/);
+      let currentLine = "";
+      words.forEach((word) => {
+        const testLine = currentLine ? currentLine + " " + word : word;
+        const testWidth = ctx.measureText(testLine).width;
+        if (testWidth > maxWidth && currentLine) {
+          wrappedLines.push(currentLine);
+          currentLine = word;
+        } else {
+          currentLine = testLine;
+        }
+      });
+      if (currentLine) {
+        wrappedLines.push(currentLine);
+      }
     });
-    const [p0, p1, p2, p3] = rect.points;
-    const startHeight = this.layer.altitudeToVector3(
-      startAltitude,
-      startAltitude
-    ).x;
-    const endHeight = this.layer.altitudeToVector3(endAltitude, endAltitude).x;
-    const anchorV = this.layer.coordinateToVector3(
-      new maptalks4.Coordinate(p0[0], p0[1]),
-      startHeight
-    );
-    const toLocal = (coord, alt) => {
-      const v = this.layer.coordinateToVector3(
-        new maptalks4.Coordinate(coord[0], coord[1]),
-        alt
-      );
-      return v.sub(anchorV);
-    };
-    const v0 = toLocal(p0, startHeight);
-    const v1 = toLocal(p1, endHeight);
-    const v2 = toLocal(p2, endHeight);
-    const v3 = toLocal(p3, startHeight);
-    const geom = new THREE.BufferGeometry();
-    const positions = new Float32Array([
-      v0.x,
-      v0.y,
-      v0.z,
-      v1.x,
-      v1.y,
-      v1.z,
-      v2.x,
-      v2.y,
-      v2.z,
-      v0.x,
-      v0.y,
-      v0.z,
-      v2.x,
-      v2.y,
-      v2.z,
-      v3.x,
-      v3.y,
-      v3.z
-    ]);
-    geom.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    const uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1]);
-    geom.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
-    geom.computeVertexNormals();
-    const mat = new THREE.MeshLambertMaterial({
-      color: 11184810,
-      // top
-      emissive: 0,
-      side: THREE.DoubleSide
-      // visible from both sides (escalators are thin)
+    const lines = wrappedLines.length ? wrappedLines : [""];
+    const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
+    const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
+    const finalHeight = lineHeight * lines.length + padding * 2;
+    canvas.width = finalWidth;
+    canvas.height = finalHeight;
+    const ctx2 = canvas.getContext("2d");
+    ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx2.textAlign = textAlign;
+    if (background && background !== "transparent") {
+      ctx2.fillStyle = background;
+      ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    lines.forEach((line, i) => {
+      const y = padding + lineHeight * (i + 0.8);
+      let x = padding;
+      if (textAlign === "center") x = canvas.width / 2;
+      if (textAlign === "right" || textAlign === "end")
+        x = canvas.width - padding;
+      if (strokeWidth > 0) {
+        ctx2.lineWidth = strokeWidth;
+        ctx2.lineJoin = "round";
+        ctx2.miterLimit = 2;
+        ctx2.strokeStyle = strokeColor;
+        ctx2.strokeText(line, x, y);
+      }
+      ctx2.fillStyle = color;
+      ctx2.fillText(line, x, y);
     });
-    this._createMesh(geom, mat);
-    this.getObject3d().position.copy(anchorV);
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.needsUpdate = true;
+    texture.minFilter = THREE.LinearFilter;
+    return texture;
+  }
+  _updatePosition() {
+    const options = this.getOptions();
+    const layer = options.layer;
+    if (!layer) return;
+    const altitude = (options.altitude || 0) + this.#altitudeOffset;
+    const z = layer.altitudeToVector3(altitude, altitude).x;
+    const position = layer.coordinateToVector3(this._coordinate, z);
+    (0, import_lodash6.set)(this.properties, "default.position", position);
+    this.getObject3d().position.copy(position);
+  }
+  _animation() {
+    const layer = this.getLayer();
+    if (!this.isAdd || !layer) return;
+    if (this._visible === true) {
+      const zoom = layer.map.getZoom();
+      const object3d = this.getObject3d();
+      const { opacity } = this.getOptions();
+      let opacityValue;
+      if (typeof opacity === "number") {
+        opacityValue = opacity ?? 1;
+      } else if (Array.isArray(opacity.stops)) {
+        opacityValue = interpolateStops(opacity, zoom);
+      } else {
+        throw new Error(`Unknown opacity value ${opacity}`);
+      }
+      const visible = opacityValue > 0.5;
+      object3d.visible = visible;
+    }
+  }
+  setText(text) {
+    const options = this.getOptions();
+    options.text = text;
+    const newSprite = this._createSprite();
+    const group = this.getObject3d();
+    group.children.forEach((child) => group.remove(child));
+    group.add(newSprite);
+    this._updatePosition();
+  }
+  setAltitude(altitude) {
+    const bottomHeight = this.options.bottomHeight ?? 0;
+    return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
   }
 };
 
-// src/IndoorMap/renderer/Element3DRenderer/utils/svg2material.ts
-var import_three7 = require("three");
-var svgToDataURL = (svgString, scaleFactor = 1) => {
-  const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
-  const url = URL.createObjectURL(svgBlob);
-  const img = new Image();
-  return new Promise((resolve, reject) => {
-    img.onload = function() {
-      const newWidth = img.width * scaleFactor;
-      const newHeight = img.height * scaleFactor;
-      const canvas = document.createElement("canvas");
-      canvas.width = newWidth;
-      canvas.height = newHeight;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, newWidth, newHeight);
-      const pngDataUrl = canvas.toDataURL("image/png");
-      resolve(pngDataUrl);
-    };
-    img.onerror = function(error) {
-      reject(error);
-    };
-    img.src = url;
-  });
-};
-var createSVGPathFromMarkerSymbol2 = (style) => {
-  const {
-    markerWidth = 24,
-    markerDx = 0,
-    markerDy = 0,
-    // markerFill,
-    markerPath,
-    fill = "#000000"
-  } = style;
-  const scale2 = markerWidth / 24;
-  const strokeWidth = 2;
-  const halfStrokeWidth = 0.5 * strokeWidth;
-  if (Array.isArray(markerPath)) {
-    return markerPath.map(
-      ({ path, fill: fill2 }) => `<path d="${path}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${fill2}" stroke="#ffffff" stroke-width="${strokeWidth}" />`
-    );
-  }
-  return `<path d="${markerPath}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${fill}" />`;
-};
-var createSpriteMaterialByLabelSymbol2 = (labelSymbol) => {
-  const material = new import_three7.SpriteMaterial();
-  try {
-    const [base, icon] = labelSymbol ?? [{}, {}];
-    const { markerWidth: baseWidth = 24 } = base;
-    const { markerWidth: iconWidth = 24 } = icon;
-    const viewBoxDimension = Math.max(baseWidth, iconWidth);
-    const baseSVG = createSVGPathFromMarkerSymbol2(base);
-    const iconSVG = icon ? createSVGPathFromMarkerSymbol2(icon) : "";
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${viewBoxDimension}" height="${viewBoxDimension}">${baseSVG}${iconSVG}</svg>`;
-    const textureLoader = new import_three7.TextureLoader();
-    const scaleFactor = 200 / 24;
-    svgToDataURL(svg, scaleFactor).then((png) => {
-      const texture = textureLoader.load(png, () => {
-        material.map = texture;
-        material.needsUpdate = true;
-      });
-    });
-  } catch (error) {
-    console.warn(`Error createSpriteMaterialByLabelSymbol: `, labelSymbol);
-  }
-  return material;
-};
-
-// src/IndoorMap/renderer/Element3DRenderer.ts
-var DEFAULT_POLYGON_OPTION = {
-  color: "#FFFFFF",
-  offset: 0,
-  altitude: 0
+// src/IndoorMap/renderer/3d/Element3DRenderer.ts
+var DEFAULT_POLYGON_OPTION = {
+  color: "#FFFFFF",
+  offset: 0,
+  altitude: 0
 };
 var HEIGHT_METER = 4;
+var MULTIORDINAL_HEIGHT_METER = 9;
 var getGeometryOption = (feature2, options) => {
   try {
-    const option = options[feature2.feature_type];
+    const option = options[feature2.feature_type] ?? element3DRendererOptions[feature2.feature_type];
     const category = feature2.properties.category;
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
   } catch (err) {
@@ -3435,34 +3316,20 @@ var Element3DRenderer = class extends EventTarget {
   options;
   map;
   threeLayer;
-  materialByColorMap;
-  materialByKey;
+  dracoLoader;
   lineMaterial;
+  materialByColorMap;
+  markerRenderer;
   // Renderer is Ready
   isReady = false;
-  constructor(map, options) {
+  constructor(map, options, layer) {
     super();
     this.options = options;
     this.map = map;
-    this.threeLayer = new import_maptalks7.ThreeLayer("elements", {
-      forceRenderOnMoving: true,
-      forceRenderOnRotating: true
-    });
-    const _this = this;
-    this.threeLayer.prepareToDraw = function(gl, scene, camera) {
-      const ambientLight = new THREE2.AmbientLight(16777215, 0.3);
-      scene.add(ambientLight);
-      const dirColor = 16777215;
-      const dllight = new THREE2.DirectionalLight(dirColor, 0.8);
-      dllight.position.set(0, -10, 10).normalize();
-      scene.add(dllight);
-      const hemi = new THREE2.HemisphereLight(16777215, 4473924, 0.4);
-      scene.add(hemi);
-      this.isReady = true;
-      _this.dispatchEvent(new CustomEvent("threelayer:ready"));
-    };
+    this.dracoLoader = new import_DRACOLoader.DRACOLoader();
+    this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
     this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
-    this.threeLayer.addTo(this.map);
+    this.threeLayer = layer;
     this.render();
   }
   animation() {
@@ -3477,80 +3344,56 @@ var Element3DRenderer = class extends EventTarget {
     if (!this.materialByColorMap) this.materialByColorMap = /* @__PURE__ */ new Map();
     const existingMaterial = this.materialByColorMap.get(color);
     if (existingMaterial) return existingMaterial;
-    const created = new import_three8.MeshLambertMaterial({ color, transparent: true });
+    const created = new THREE2.MeshLambertMaterial({ color, transparent: true });
     created.toneMapped = false;
     this.materialByColorMap.set(color, created);
     return created;
   }
-  getOrCreateIconMaterial(key) {
-    if (!this.materialByKey) this.materialByKey = /* @__PURE__ */ new Map();
-    const existingMaterial = this.materialByKey.get(key);
-    if (existingMaterial) return existingMaterial;
-    const baseSymbol = {
-      markerType: "path",
-      markerPath: [
-        {
-          path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
-          fill: "#ff0000"
-        }
-      ],
-      markerPathWidth: 24,
-      markerPathHeight: 24
-    };
-    const markerSymbol = {
-      markerType: "path",
-      markerPath: [],
-      // TODO: Get Path by featureType.category
-      // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
-      markerPathWidth: 24,
-      markerPathHeight: 24,
-      markerWidth: 24,
-      markerHeight: 24,
-      markerDy: 1.5,
-      markerDx: 1.5
-    };
-    const created = createSpriteMaterialByLabelSymbol2([
-      baseSymbol,
-      markerSymbol
-    ]);
-    this.materialByKey.set(key, created);
-    return created;
-  }
   createGeometry = (feature2) => {
-    const options = getGeometryOption(feature2, this.options);
-    const offset = options?.offset ?? 0;
+    const {
+      offset = 0,
+      height: heightOptions,
+      bottomHeight: bottomHeightOptions,
+      color: colorOptions,
+      ...options
+    } = getGeometryOption(feature2, this.options);
+    const _this = this;
     const createPolygon = (geometry, feature3) => {
       const [outerRing, ...innerRings] = geometry.coordinates;
       const offsetFeature = offset !== 0 ? (0, import_buffer2.default)(geometry, offset, { units: "meters" }) : feature3;
-      const color = options.color ?? feature3.properties.style.polygonFill ?? "#ffffff";
+      const color = feature3.properties.style.polygonFill ?? colorOptions ?? "#ffffff";
       if (color === "transparent") return;
       const material = this.getOrCreateMaterialByColor(color);
       const altitude = feature3.properties.ordinal * HEIGHT_METER;
-      const bottomHeight = options.bottomHeight ?? 0;
-      const polygon = this.threeLayer.toExtrudePolygon(
+      const height = feature3.properties.height ?? heightOptions ?? HEIGHT_METER;
+      const bottomHeight = feature3.properties.bottomHeight ?? bottomHeightOptions ?? 0;
+      const extrudedPolygon = this.threeLayer.toExtrudePolygon(
         offsetFeature,
-        { asynchronous: true, ...options, altitude },
+        { asynchronous: true, ...options, height, bottomHeight, altitude },
         material
       );
+      extrudedPolygon.on("click", (e) => {
+        console.log(e.target.options.polygon.id);
+      });
       const topLineStrings = [
-        new maptalks5.LineString(outerRing),
-        ...innerRings.map((innerRing) => new maptalks5.LineString(innerRing))
+        new maptalks4.LineString(outerRing),
+        ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
       ];
       const topLines = this.threeLayer.toLines(
         topLineStrings,
-        { altitude: altitude + options.height + 1e-3, bottomHeight, interactive: false },
+        { altitude, bottomHeight: bottomHeight + height + 1e-3, interactive: false },
         this.lineMaterial
       );
       const bottomLineStrings = [
-        new maptalks5.LineString(outerRing),
-        ...innerRings.map((innerRing) => new maptalks5.LineString(innerRing))
+        new maptalks4.LineString(outerRing),
+        ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
       ];
       const bottomLines = this.threeLayer.toLines(
         bottomLineStrings,
         { altitude, bottomHeight, interactive: false },
         this.lineMaterial
       );
-      return [polygon, topLines, bottomLines];
+      return [extrudedPolygon, topLines, bottomLines];
     };
     try {
       switch (feature2.geometry.type) {
@@ -3573,49 +3416,111 @@ var Element3DRenderer = class extends EventTarget {
       console.log(`error createGeometry`, { feature: feature2, options });
     }
   };
-  createMarker = (coordinates, ordinal, label) => {
-    const options = {
-      scale: 0.05,
-      altitude: ordinal * HEIGHT_METER,
-      // highlight: highlightOptions,
-      interactive: true
-    };
-    const material = this.getOrCreateIconMaterial(
-      "amenity.escalator"
-    );
-    const marker = new SpriteMarker(
-      coordinates,
-      options,
-      material,
-      this.threeLayer,
-      {}
+  async createEscalator(f, coordinate, options) {
+    const { direction: dir, angle } = options;
+    const model = await this.loadModel3d({
+      url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/new_escalator.glb",
+      properties: {
+        rotation: {
+          x: 0.5 * Math.PI,
+          // Rotate the model up (new_escalator.glb)
+          y: 0,
+          z: 0
+        },
+        position: { x: 0, y: 0, z: 0 },
+        scale: 0.01
+      }
+    });
+    model.rotation.y += dir === "up" ? Math.PI + angle : angle;
+    const box = new THREE2.Box3().setFromObject(model);
+    const pivotPoint = dir === "up" ? new THREE2.Vector3(0, 0, 0) : new THREE2.Vector3(
+      1 * (box.min.x + box.max.x),
+      1 * (box.min.y + box.max.y),
+      0.6 * box.max.z
     );
-    this.threeLayer.addMesh([marker]);
-    return marker;
-  };
+    const pivot = new THREE2.Group();
+    pivot.add(model);
+    model.position.sub(pivotPoint);
+    model.updateMatrixWorld(true);
+    const altitude = f.properties.ordinal * HEIGHT_METER;
+    const baseObjectModel = this.threeLayer.toModel(pivot, {
+      coordinate,
+      altitude
+    });
+    this.threeLayer.addMesh(baseObjectModel);
+    return baseObjectModel;
+  }
+  async createTree(coordinate, ordinal) {
+    const model = await this.loadModel3d({
+      url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/arbol.glb",
+      properties: {
+        rotation: {
+          x: 0.5 * Math.PI,
+          // Rotate the model up (new_escalator.glb)
+          y: 0,
+          z: 0
+        },
+        position: { x: 0, y: 0, z: 0 },
+        scale: 0.01
+      }
+    });
+    const altitude = ordinal * HEIGHT_METER;
+    const baseObjectModel = this.threeLayer.toModel(model, {
+      coordinate,
+      altitude
+    });
+    this.threeLayer.addMesh(baseObjectModel);
+    return baseObjectModel;
+  }
   createElement(f) {
     switch (f.feature_type) {
-      case "unit": {
-        switch (f.properties.category) {
-          case "escalator": {
-            const mesh = new Escalator(
-              f,
-              {
-                startAltitude: 0,
-                endAltitude: 0.06
-              },
-              this.threeLayer
-            );
-            this.threeLayer.addMesh([mesh]);
-            return [mesh];
-          }
-        }
-        break;
-      }
       default:
         return null;
     }
   }
+  showElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER);
+      element.show();
+    });
+  }
+  hideElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      try {
+        element.hide();
+      } catch (err) {
+        console.log(`cannot hide`, err, element);
+      }
+    });
+  }
+  async loadModel3d(model3d) {
+    const loader = new import_GLTFLoader2.GLTFLoader();
+    loader.setDRACOLoader(this.dracoLoader);
+    const { url, properties: modelProperties } = model3d;
+    const gltf = await loader.loadAsync(url);
+    const model = gltf.scene;
+    model.rotation.x = modelProperties.rotation.x;
+    model.rotation.y = modelProperties.rotation.y;
+    model.position.x = modelProperties.position.x;
+    model.position.y = modelProperties.position.y;
+    model.position.z = modelProperties.position.z;
+    const scale2 = modelProperties.scale;
+    model.scale.set(scale2, scale2, scale2);
+    return model;
+  }
+  createMarker = (coordinates, ordinal, text) => {
+    const options = {
+      // scale: 0.05,
+      // altitude: ordinal * HEIGHT_METER,
+      text
+      // interactive: true,
+    };
+    const marker = new TextSpriteMarker(coordinates, options, this.threeLayer);
+    this.threeLayer.addMesh([marker]);
+    return marker;
+  };
+  removeMarker = () => {
+  };
   render() {
     this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
     if (this.threeLayer._needsUpdate) {
@@ -3625,9 +3530,34 @@ var Element3DRenderer = class extends EventTarget {
   }
 };
 
-// src/IndoorMap/renderer/Element2DRenderer.ts
-var maptalks6 = __toESM(require("maptalks"));
-var OCCUPANT_TEXT_MARKER_CLASSNAME2 = "mtk-occupant-text-marker";
+// src/IndoorMap/renderer/2d/Element2DRenderer.ts
+var maptalks5 = __toESM(require("maptalks"));
+
+// src/IndoorMap/renderer/2d/element2DRendererOptions.ts
+var element2DRendererOptions = {
+  unit: {
+    default: { symbol: { polygonFill: "#cccccc" } },
+    byCategory: {
+      room: { symbol: { polygonFill: "#fff" } },
+      walkway: { symbol: { polygonFill: "#efefef", lineColor: "#dadada", lineWidth: 2 } },
+      terrace: { symbol: { polygonFill: "#efefef" } },
+      unenclosedarea: { symbol: { polygonFill: "#fff" } },
+      nonpublic: { symbol: { polygonFill: "#999999" } }
+    }
+  },
+  kiosk: {
+    default: {}
+  },
+  fixture: {
+    default: { symbol: { polygonFill: "#ffffff" } },
+    byCategory: {
+      water: { symbol: { polygonFill: "#ACD7EC" } },
+      vegetation: { symbol: { polygonFill: "#91C499" } }
+    }
+  }
+};
+
+// src/IndoorMap/renderer/2d/Element2DRenderer.ts
 var DEFAULT_POLYGON_OPTION2 = {
   zIndex: 0,
   symbol: {
@@ -3637,6 +3567,7 @@ var DEFAULT_POLYGON_OPTION2 = {
     lineWidth: 2
   }
 };
+var MULTIORDINAL_HEIGHT_METER2 = 10;
 var getGeometryProperties = (feature2) => ({
   // Core
   type: "Feature",
@@ -3646,11 +3577,11 @@ var getGeometryProperties = (feature2) => ({
   // Extra
   feature_type: feature2.feature_type,
   category: feature2.properties.category,
-  name: feature2.properties.name.en
+  name: feature2.properties.name?.en
 });
 var getGeometryOption2 = (feature2, options) => {
   try {
-    const option = options[feature2.feature_type];
+    const option = options[feature2.feature_type] ?? element2DRendererOptions[feature2.feature_type];
     const category = feature2.properties.category;
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION2;
   } catch (err) {
@@ -3667,18 +3598,17 @@ var Element2DRenderer = class extends EventTarget {
     super();
     this.options = options;
     this.map = map;
-    this.elementLayer = new maptalks6.VectorLayer("elements");
+    this.elementLayer = new maptalks5.VectorLayer("elements");
     this.elementLayer.addTo(this.map);
-    this.markerLayer = new maptalks6.VectorLayer("markers");
+    this.markerLayer = new maptalks5.VectorLayer("markers");
     this.markerLayer.addTo(this.map);
     this.isReady = true;
-    this.dispatchEvent(new CustomEvent("renderer:ready"));
   }
   createGeometry = (imdfFeature) => {
     const feature2 = getGeometryProperties(imdfFeature);
     const { symbol, ...options } = getGeometryOption2(imdfFeature, this.options);
     const altitude = feature2.properties.ordinal * 10;
-    const geometry = maptalks6.Geometry.fromJSON({
+    const geometry = maptalks5.Geometry.fromJSON({
       feature: feature2,
       symbol,
       options: {
@@ -3689,42 +3619,235 @@ var Element2DRenderer = class extends EventTarget {
     });
     if (Array.isArray(geometry)) {
       geometry.forEach((g) => g.addTo(this.elementLayer));
-      return new maptalks6.GeometryCollection(geometry);
+      return new maptalks5.GeometryCollection(geometry);
     } else {
       geometry.addTo(this.elementLayer);
       return geometry;
     }
   };
-  createMarker = (coordinates, ordinal, label) => {
-    const createStyledUIMarkerElement2 = ({ style: style2, textContent, className }) => {
-      const element = document.createElement("div");
-      for (const key in style2) {
-        element.style[key] = style2[key];
-      }
-      element.className = className;
-      element.textContent = textContent;
-      return element.outerHTML;
-    };
-    const style = {};
+  async createEscalator(f, coordinates) {
+    return Promise.resolve(null);
+  }
+  async createTree(f, coordinates) {
+    return Promise.resolve(null);
+  }
+  createElement = (imdfFeature) => {
+    switch (imdfFeature.feature_type) {
+      default:
+        return null;
+    }
+  };
+  showElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER2);
+      element.show();
+    });
+  }
+  hideElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.hide();
+    });
+  }
+};
+
+// src/IndoorMap/renderer/2d/Marker2DRenderer.ts
+var maptalks6 = __toESM(require("maptalks"));
+var Marker2DRenderer = class extends EventTarget {
+  isReady = false;
+  map;
+  markerLayer;
+  constructor(map) {
+    super();
+  }
+  createMarker = (coordinates, ordinal, content) => {
     const marker = new maptalks6.ui.UIMarker(coordinates, {
-      content: createStyledUIMarkerElement2({
-        style,
-        textContent: label,
-        className: OCCUPANT_TEXT_MARKER_CLASSNAME2
-      }),
+      content,
       collision: true,
-      collisionFadeIn: true
-      // altitude: getAltitude(f.properties) + markerHeight,
+      collisionFadeIn: true,
+      altitude: 0
     });
     marker.addTo(this.map);
     return marker;
   };
-  createElement = (imdfFeature) => {
-    switch (imdfFeature.feature_type) {
-      default:
-        return null;
-    }
+  removeMarker = (marker) => {
+    marker.remove();
   };
+  showMarkers(elements, ordinalDiff = 0) {
+  }
+  hideMarkers(elements, ordinalDiff = 0) {
+  }
+};
+
+// src/IndoorMap/renderer/3d/Marker3DRenderer.ts
+var maptalks7 = __toESM(require("maptalks"));
+
+// src/IndoorMap/renderer/utils/svg2material.ts
+var import_three7 = require("three");
+var svgToDataURL = (svgString, scaleFactor = 1) => {
+  const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(svgBlob);
+  const img = new Image();
+  return new Promise((resolve, reject) => {
+    img.onload = function() {
+      const newWidth = img.width * scaleFactor;
+      const newHeight = img.height * scaleFactor;
+      const canvas = document.createElement("canvas");
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, newWidth, newHeight);
+      const pngDataUrl = canvas.toDataURL("image/png");
+      resolve(pngDataUrl);
+    };
+    img.onerror = function(error) {
+      reject(error);
+    };
+    img.src = url;
+  });
+};
+var createSVGPathFromMarkerSymbol2 = (style) => {
+  const {
+    markerWidth = 24,
+    markerDx = 0,
+    markerDy = 0,
+    // markerFill,
+    markerPath,
+    fill = "#000000"
+  } = style;
+  const scale2 = markerWidth / 24;
+  const strokeWidth = 2;
+  const halfStrokeWidth = 0.5 * strokeWidth;
+  if (Array.isArray(markerPath)) {
+    return markerPath.map(
+      ({ path, fill: fill2 }) => `<path d="${path}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${fill2}" stroke="#ffffff" stroke-width="${strokeWidth}" />`
+    );
+  }
+  return `<path d="${markerPath}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${fill}" />`;
+};
+var createSpriteMaterialByLabelSymbol2 = (labelSymbol) => {
+  const material = new import_three7.SpriteMaterial();
+  try {
+    const [base, icon] = labelSymbol ?? [{}, {}];
+    const { markerWidth: baseWidth = 24 } = base;
+    const { markerWidth: iconWidth = 24 } = icon;
+    const viewBoxDimension = Math.max(baseWidth, iconWidth);
+    const baseSVG = createSVGPathFromMarkerSymbol2(base);
+    const iconSVG = icon ? createSVGPathFromMarkerSymbol2(icon) : "";
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${viewBoxDimension}" height="${viewBoxDimension}">${baseSVG}${iconSVG}</svg>`;
+    const textureLoader = new import_three7.TextureLoader();
+    const scaleFactor = 200 / 24;
+    svgToDataURL(svg, scaleFactor).then((png) => {
+      const texture = textureLoader.load(png, () => {
+        material.map = texture;
+        material.needsUpdate = true;
+      });
+    });
+  } catch (error) {
+    console.warn(`Error createSpriteMaterialByLabelSymbol: `, labelSymbol);
+  }
+  return material;
+};
+
+// src/IndoorMap/renderer/3d/Marker3DRenderer.ts
+var HEIGHT_METER2 = 4;
+var MULTIORDINAL_HEIGHT_METER3 = 9;
+var Marker3DRenderer = class extends EventTarget {
+  isReady = false;
+  threeLayer;
+  map;
+  materialByKey;
+  constructor(map, options, layer) {
+    super();
+    this.map = map;
+    this.threeLayer = layer;
+  }
+  createTextMarker = (position, ordinal, label, options) => {
+    const combinedOptions = {
+      altitude: ordinal * HEIGHT_METER2,
+      text: label,
+      ...options ?? {}
+    };
+    const [lng, lat] = position;
+    const marker = new TextSpriteMarker(new maptalks7.Coordinate(lng, lat), combinedOptions, this.threeLayer);
+    this.threeLayer.addMesh([marker]);
+    return marker;
+  };
+  createImageMarker = () => {
+  };
+  createMarker = (coordinates, ordinal, label, options) => {
+    return this.createTextMarker(coordinates, ordinal, label, options);
+  };
+  removeMarker = (marker) => {
+    marker.remove();
+  };
+  showMarkers(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER3);
+      element.show();
+    });
+  }
+  hideMarkers(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      try {
+        element.hide();
+      } catch (err) {
+        console.log(`cannot hide`, err, element);
+      }
+    });
+  }
+  /** Marker */
+  getOrCreateIconMaterial(key) {
+    if (!this.materialByKey) this.materialByKey = /* @__PURE__ */ new Map();
+    const existingMaterial = this.materialByKey.get(key);
+    if (existingMaterial) return existingMaterial;
+    const baseSymbol = {
+      markerType: "path",
+      markerPath: [
+        {
+          path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
+          fill: "#ff0000"
+        }
+      ],
+      markerPathWidth: 24,
+      markerPathHeight: 24
+    };
+    const markerSymbol = {
+      markerType: "path",
+      markerPath: [],
+      // TODO: Get Path by featureType.category
+      // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
+      markerPathWidth: 24,
+      markerPathHeight: 24,
+      markerWidth: 24,
+      markerHeight: 24,
+      markerDy: 1.5,
+      markerDx: 1.5
+    };
+    const created = createSpriteMaterialByLabelSymbol2([
+      baseSymbol,
+      markerSymbol
+    ]);
+    this.materialByKey.set(key, created);
+    return created;
+  }
+};
+
+// src/IndoorMap/renderer/utils/angleBetweenLineString.ts
+var getLineCenter = (line) => {
+  let x = 0, y = 0;
+  for (const [lx, ly] of line) {
+    x += lx;
+    y += ly;
+  }
+  const len = line.length;
+  return [x / len, y / len];
+};
+var angleBetweenLineStrings = (line1, line2) => {
+  const [x1, y1] = getLineCenter(line1);
+  const [x2, y2] = getLineCenter(line2);
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return Math.atan2(dy, dx);
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
@@ -3735,25 +3858,48 @@ var RendererManager = class extends EventTarget {
   #dataClient;
   /** Elements: Responsible for converting feature info elements and add to map */
   elementRenderer;
+  markerRenderer;
   elementsMap;
   elementsByOrdinal;
-  constructor(map, options) {
+  currentOrdinals;
+  markersMap;
+  markersByOrdinal;
+  constructor(map, dataClient, options) {
     super();
     this.map = map;
     this.options = options;
     this.elementsMap = /* @__PURE__ */ new Map();
     this.elementsByOrdinal = /* @__PURE__ */ new Map();
-    this.elementRenderer = options.type === "2D" ? new Element2DRenderer(map, options.elements) : new Element3DRenderer(map, options.elements);
-  }
-  set dataClient(value) {
-    this.#dataClient = value;
-    if (this.elementRenderer.isReady) {
-      this.#createElements();
-    } else {
-      this.elementRenderer.addEventListener("threelayer:ready", (e) => {
-        this.dispatchEvent(new CustomEvent("renderermanager:ready"));
-        this.#createElements();
+    this.markersMap = /* @__PURE__ */ new Map();
+    this.markersByOrdinal = /* @__PURE__ */ new Map();
+    this.#dataClient = dataClient;
+    if (options.type === "3D") {
+      const threeLayer = new import_maptalks8.ThreeLayer("elements", {
+        forceRenderOnMoving: true,
+        forceRenderOnRotating: true
       });
+      const _this = this;
+      threeLayer.prepareToDraw = function(gl, scene, camera) {
+        const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
+        scene.add(ambientLight);
+        const dirColor = 16777215;
+        const dllight = new THREE3.DirectionalLight(dirColor, 0.8);
+        dllight.position.set(0, -10, 10).normalize();
+        scene.add(dllight);
+        const hemi = new THREE3.HemisphereLight(16777215, 4473924, 0.4);
+        scene.add(hemi);
+        _this.elementRenderer = new Element3DRenderer(map, options.elements, threeLayer);
+        _this.markerRenderer = new Marker3DRenderer(map, {}, threeLayer);
+        if (typeof options.onRendererReady === "function") {
+          options.onRendererReady();
+        }
+        _this.#createElements();
+      };
+      threeLayer.addTo(this.map);
+    } else {
+      this.elementRenderer = new Element2DRenderer(map, options.elements);
+      this.markerRenderer = new Marker2DRenderer(map);
+      this.#createElements();
     }
   }
   getElementsByOrdinal = (ordinal) => {
@@ -3761,19 +3907,46 @@ var RendererManager = class extends EventTarget {
     if (!exist) this.elementsByOrdinal.set(ordinal, []);
     return this.elementsByOrdinal.get(ordinal);
   };
+  getMarkersByOrdinal = (ordinal) => {
+    const exist = this.markersByOrdinal.get(ordinal);
+    if (!exist) this.markersByOrdinal.set(ordinal, []);
+    return this.markersByOrdinal.get(ordinal);
+  };
+  addElementsToManager = (id, elements, ordinal) => {
+    this.elementsMap.set(id, elements);
+    elements.forEach((el) => {
+      this.getElementsByOrdinal(ordinal).push(el);
+    });
+    const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
+    if (inOrdinal) {
+      this.elementRenderer.showElements(elements, ordinal);
+    } else {
+      this.elementRenderer.hideElements(elements, ordinal);
+    }
+  };
+  addMarkersToManager = (id, markers, ordinal) => {
+    this.markersMap.set(id, markers);
+    markers.forEach((el) => {
+      this.getMarkersByOrdinal(ordinal).push(el);
+    });
+    const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
+    if (inOrdinal) {
+      this.markerRenderer.showMarkers(markers, ordinal);
+    } else {
+      this.markerRenderer.hideMarkers(markers, ordinal);
+    }
+  };
   async #createElements() {
     const levels = await this.#dataClient.filterByType("level", {
       populate: true
     });
+    const relationships = await this.#dataClient.filterByType("relationship");
     const fixtures = await this.#dataClient.filterByType("fixture", { populate: true });
     fixtures.forEach((fixture) => {
       const element = this.elementRenderer.createGeometry(fixture);
       if (element) {
         const _elements = Array.isArray(element) ? element : [element];
-        _elements.forEach((el) => {
-          this.elementsMap.set(fixture.id, el);
-          this.getElementsByOrdinal(fixture.properties.level.properties.ordinal).push(el);
-        });
+        this.addElementsToManager(fixture.id, _elements, fixture.properties.level.properties.ordinal);
       }
     });
     const units = await this.#dataClient.filterByType("unit", {
@@ -3785,10 +3958,7 @@ var RendererManager = class extends EventTarget {
       const element = this.elementRenderer.createGeometry(unit);
       if (element) {
         const _elements = Array.isArray(element) ? element : [element];
-        _elements.forEach((el) => {
-          this.elementsMap.set(unit.id, el);
-          this.getElementsByOrdinal(unit.properties.level.properties.ordinal).push(el);
-        });
+        this.addElementsToManager(unit.id, _elements, unit.properties.level.properties.ordinal);
       }
     });
     const kiosks = await this.#dataClient.filterByType("kiosk", {
@@ -3798,32 +3968,85 @@ var RendererManager = class extends EventTarget {
       const element = this.elementRenderer.createGeometry(kiosk);
       if (element) {
         const _elements = Array.isArray(element) ? element : [element];
-        _elements.forEach((el) => {
-          this.elementsMap.set(kiosk.id, el);
-          this.getElementsByOrdinal(kiosk.properties.level.properties.ordinal).push(el);
-        });
+        this.addElementsToManager(kiosk.id, _elements, kiosk.properties.level.properties.ordinal);
       }
     });
+    const escalators = units.filter((u) => u.properties.category === "escalator");
+    for (const escalator of escalators) {
+      try {
+        const escalatorRelationships = relationships.filter((r) => (r.properties?.intermediary || []).some((inter) => inter.id === escalator.id));
+        if (escalatorRelationships.length === 0) {
+          throw new Error("Cannot find escalator relationship");
+        }
+        if (escalatorRelationships.length > 1) {
+          throw new Error("Found more than one relationship");
+        }
+        const thisOrdinal = escalator.properties.ordinal;
+        const relationship = escalatorRelationships[0];
+        const bothOpeningIds = [relationship.properties.origin.id, relationship.properties.destination.id];
+        const bothOpenings = await Promise.all(
+          bothOpeningIds.map((id) => this.#dataClient.findById("opening", id, { populate: true }))
+        );
+        const thisLevelOpening = bothOpenings.find((opening) => opening.properties.ordinal === thisOrdinal);
+        const thatLevelOpening = bothOpenings.find((opening) => opening.properties.ordinal !== thisOrdinal);
+        const angle = angleBetweenLineStrings(thisLevelOpening.geometry.coordinates, thatLevelOpening.geometry.coordinates);
+        const direction = thisOrdinal < thatLevelOpening.properties.ordinal ? "up" : "down";
+        const escalatorEntryPoint = (0, import_center3.center)(thisLevelOpening).geometry.coordinates;
+        const element = await this.elementRenderer.createEscalator(escalator, escalatorEntryPoint, { direction, angle });
+        if (element) {
+          const _elements = Array.isArray(element) ? element : [element];
+          this.addElementsToManager(escalator.id, _elements, escalator.properties.ordinal);
+        }
+      } catch (err) {
+        console.log(`cannot create escalator`, err);
+      }
+    }
+    this.changeLevelByOrdinal(this.currentOrdinals);
     this.dispatchEvent(new CustomEvent("renderermanager:elements_created"));
   }
   changeLevelByOrdinal(targetOrdinal) {
-    for (const [ordinal, elements] of this.elementsByOrdinal) {
-      const inOrdinal = targetOrdinal === null ? true : Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
-      if (inOrdinal) {
-        elements.forEach((element, i) => {
-          element.show();
-        });
-      } else {
-        elements.forEach((element) => {
-          element.hide();
-        });
+    this.currentOrdinals = targetOrdinal;
+    if (targetOrdinal === null) {
+      const baseOrdinal = 0;
+      for (const [ordinal, elements] of this.elementsByOrdinal) {
+        this.elementRenderer.showElements(elements, ordinal - baseOrdinal);
+      }
+      for (const [ordinal, markers] of this.markersByOrdinal) {
+        this.markerRenderer.showMarkers(markers, ordinal - baseOrdinal);
+      }
+    } else {
+      const baseOrdinal = Array.isArray(targetOrdinal) ? (0, import_min.default)(targetOrdinal) : targetOrdinal;
+      for (const [ordinal, elements] of this.elementsByOrdinal) {
+        const inOrdinal = Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
+        if (inOrdinal) {
+          this.elementRenderer.showElements(elements, ordinal - baseOrdinal);
+        } else {
+          this.elementRenderer.hideElements(elements, ordinal - baseOrdinal);
+        }
+      }
+      for (const [ordinal, markers] of this.markersByOrdinal) {
+        const inOrdinal = Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
+        if (inOrdinal) {
+          this.markerRenderer.showMarkers(markers, ordinal - baseOrdinal);
+        } else {
+          this.markerRenderer.hideMarkers(markers, ordinal - baseOrdinal);
+        }
       }
     }
   }
-  createMarker(coordinate, ordinal, label) {
-    const marker = this.elementRenderer.createMarker(coordinate, ordinal, label);
-    this.elementsMap.set(label, marker);
-    this.getElementsByOrdinal(ordinal).push(marker);
+  /** 
+   * ========================================================================
+   * Markers
+   * ======================================================================== */
+  createMarker(coordinate, ordinal, text, options) {
+    const marker = this.markerRenderer.createMarker(coordinate, ordinal, text, options);
+    const markerId = `${this.markersMap.size + 1}`;
+    this.addMarkersToManager(markerId, [marker], ordinal);
+  }
+  clearMarkers() {
+    for (const [markerId, marker] of this.markersMap) {
+      this.markerRenderer.removeMarker(marker);
+    }
   }
 };
 
@@ -3892,13 +4115,14 @@ var IndoorMap = class extends EventTarget {
       onMapLoading,
       pixelRatio,
       locale
-    } = import_lodash6.default.merge({}, defaultOptions, options);
-    this.map = new import_maptalks8.Map(elementId, {
+    } = import_lodash7.default.merge({}, defaultOptions, options);
+    this.map = new import_maptalks_gl.Map(elementId, {
       attribution: false,
       center: INITIAL_CENTER,
       zoom: INITIAL_ZOOM,
       clickTimeThreshold: 600,
-      baseLayer: new import_maptalks8.TileLayer("base", {
+      centerCross: options.centerCross ?? false,
+      baseLayer: new import_maptalks_gl.TileLayer("base", {
         urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
         subdomains: ["a", "b", "c", "d"],
         opacity: 1,
@@ -3909,13 +4133,7 @@ var IndoorMap = class extends EventTarget {
       }),
       layers: []
     });
-    this.rendererManager = new RendererManager(this.map, options.renderer);
-    this.rendererManager.addEventListener("renderermanager:ready", (e) => {
-      this.dispatchEvent(new CustomEvent("renderer:ready"));
-    });
-    this.rendererManager.addEventListener("renderermanager:elements_created", (e) => {
-      this.dispatchEvent(new CustomEvent("renderer:elements_created"));
-    });
+    this.rendererManager = new RendererManager(this.map, options.dataClient, options.renderer);
     this.camera = new CameraManager(this.map);
     this.locale = locale;
     this.pixelRatio = pixelRatio;
@@ -3928,12 +4146,14 @@ var IndoorMap = class extends EventTarget {
   set dataClient(value) {
     this.#dataClient = value;
     this.#dataClient.filterByType("venue").then((venues) => {
-      const venueCenters = (0, import_center3.default)(featureCollection(venues));
+      const venueCenters = (0, import_center4.default)(featureCollection(venues));
       const [x, y] = venueCenters.geometry.coordinates;
-      const center2 = new import_maptalks8.Coordinate(x, y);
+      const center2 = new import_maptalks_gl.Coordinate(x, y);
       this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
     });
-    this.rendererManager.dataClient = this.#dataClient;
+  }
+  on(eventName, handler) {
+    this.map.on(eventName, handler);
   }
   /**
    * Events
@@ -3941,7 +4161,7 @@ var IndoorMap = class extends EventTarget {
   handleMapClick = ({ coordinate }) => {
     const { x, y } = coordinate;
     console.log(
-      `[Coordinates]: x: ${import_lodash6.default.round(x, 8)} y: ${import_lodash6.default.round(
+      `[Coordinates]: x: ${import_lodash7.default.round(x, 8)} y: ${import_lodash7.default.round(
         y,
         8
       )}, [Bearing]: ${this.map.getBearing()}, [Pitch]: ${this.map.getPitch()}`
@@ -4050,69 +4270,37 @@ var IndoorMap = class extends EventTarget {
     const scene = this.threeLayer.getScene();
     if (scene) {
       scene.children = scene.children.filter(
-        (children) => children instanceof import_three9.PerspectiveCamera
+        (children) => children instanceof import_three8.PerspectiveCamera
       );
     }
   }
-  #createLayers() {
-    const map = this.map;
-    if (!this.ordinals || this.ordinals.length === 0) return;
-    LAYERS.forEach((layerKey) => {
-      const layerID = layerKey;
-      const option = LAYER_OPTIONS[layerKey];
-      const layer = new import_maptalks8.VectorLayer(layerID, option);
-      map.addLayer(layer);
-    });
-    const threeLayer = new import_maptalks9.ThreeLayer("t_building", {
-      forceRenderOnMoving: true,
-      forceRenderOnRotating: true
-    });
-    this.threeLayer = threeLayer;
-    threeLayer.addTo(this.map);
-  }
-  #initMapElements() {
-    this.#createLayers();
-    const threeLayer = this.threeLayer;
-    if (threeLayer) {
-      this.threeLayer.prepareToDraw = async (gl, scene, camera) => {
-        await this.#createElements();
-      };
-    }
-  }
   handleClickElement = (e) => {
     if (this.#isClicked) return;
     this.#isClicked = true;
     const onClickElement = this.#onClickElement;
-    if (!import_lodash6.default.isFunction(onClickElement)) return;
+    if (!import_lodash7.default.isFunction(onClickElement)) return;
     this.#onClickElement(e);
     this.#isClicked = false;
   };
   setCenter(center2, padding) {
     this.map.setCenter(center2, padding);
   }
-  async #createElements() {
+  async #legacy_createElements() {
     const {
       // 2D
       createVenue,
-      createLevel,
-      createUnit,
       createOpening,
       createSection,
       createFixture,
-      createKiosk,
       createOccupant,
       createDecoration,
       // 3D
       create3DFootprint,
       create3DGroundLabel,
       create3DBillboard,
-      create3DUnit,
-      create3DKiosk,
       createVenue3DModel,
       createExtrudedUnit,
-      createExtrudedLevel,
       create3DFixture,
-      createExtrudedKiosk,
       create3DAmenityMarker,
       create3DOccupantAmenityMarker,
       create3DOpeningMarker,
@@ -4128,7 +4316,7 @@ var IndoorMap = class extends EventTarget {
       const {
         ambientLight: ambientLightConfig = {},
         directionalLight: directionalLightConfig = {}
-      } = import_lodash6.default.get(this.#mapConfig, "light", {
+      } = import_lodash7.default.get(this.#mapConfig, "light", {
         ambientLight: {},
         directionalLight: {}
       });
@@ -4140,16 +4328,16 @@ var IndoorMap = class extends EventTarget {
     for (const feature2 of this.#features) {
       try {
         const { feature_type: featureType, properties, id } = feature2;
-        const layerName = import_lodash6.default.get(
+        const layerName = import_lodash7.default.get(
           LAYER_FEATURE_TYPE_OBJ,
           featureType,
           featureType
         );
         const layer = this.map.getLayer(layerName);
         let geometry;
-        const category = import_lodash6.default.get(feature2, "properties.category");
-        const extrudeConfig = import_lodash6.default.get(this.#mapConfig, "extrude");
-        const textMarkerType = import_lodash6.default.get(
+        const category = import_lodash7.default.get(feature2, "properties.category");
+        const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
+        const textMarkerType = import_lodash7.default.get(
           this.#mapConfig,
           "text_marker_type",
           "ui-marker"
@@ -4169,53 +4357,6 @@ var IndoorMap = class extends EventTarget {
             });
             break;
           }
-          case "level": {
-            const extrudedLevel = createExtrudedLevel(
-              feature2,
-              this.threeLayer,
-              featureExtrudeConfig
-            );
-            if (extrudedLevel) {
-              extrudedLevel.on("click", this.handleClickElement);
-              object3ds.push(extrudedLevel);
-            } else {
-              geometry = createLevel(feature2).addTo(layer);
-            }
-            break;
-          }
-          case "unit": {
-            const models = await create3DUnit(feature2, this.threeLayer);
-            models.forEach((model) => {
-              model.on("click", this.handleClickElement);
-              object3ds.push(model);
-              this.#glbObjects.push(model);
-            });
-            const locatedLevel = feature2?.properties?.level;
-            const levelExtrudeConfig = getExtrudeConfigByFeature(
-              extrudeConfig,
-              locatedLevel
-            );
-            const levelHeight = levelExtrudeConfig?.height ?? 0;
-            const option = { ...featureExtrudeConfig, altitude: levelHeight };
-            const hasAddedModel3d = models?.length > 0;
-            if (hasAddedModel3d || !featureExtrudeConfig) {
-              geometry = createUnit(feature2)?.on("click", this.handleClickElement).addTo(layer);
-            } else {
-              const extrudedUnit = createExtrudedUnit(
-                feature2,
-                this.threeLayer,
-                option
-              );
-              extrudedUnit.on("click", this.handleClickElement);
-              extrudedUnit.on("touchstart", (e) => {
-                this.#touchStartTarget = e.target;
-                this.#touchStartPoint = e.containerPoint;
-                this.map.on("touchend", this.handleMapTouchEnd);
-              });
-              object3ds.push(extrudedUnit);
-            }
-            break;
-          }
           case "amenity": {
             if (feature2.properties.is_featured) {
               const billboardObj = create3DBillboard(feature2, this.threeLayer);
@@ -4238,7 +4379,7 @@ var IndoorMap = class extends EventTarget {
           case "opening": {
             switch (category) {
               case "emergencyexit":
-                const { geometry: geometry2 } = (0, import_center3.default)(feature2);
+                const { geometry: geometry2 } = (0, import_center4.default)(feature2);
                 const markerFeature = {
                   ...feature2,
                   geometry: geometry2
@@ -4306,7 +4447,7 @@ var IndoorMap = class extends EventTarget {
                       textMarkerType,
                       extrudeConfig
                     });
-                    if (occupantMarker instanceof import_maptalks8.ui.UIMarker) {
+                    if (occupantMarker instanceof import_maptalks_gl.ui.UIMarker) {
                       occupantMarker.addTo(this.map);
                     } else {
                       occupantMarker?.on("click", this.handleClickElement);
@@ -4343,7 +4484,7 @@ var IndoorMap = class extends EventTarget {
                 extrudeConfig,
                 locatedLevel
               );
-              const levelHeight = import_lodash6.default.get(levelExtrudeConfig, "height", 0);
+              const levelHeight = import_lodash7.default.get(levelExtrudeConfig, "height", 0);
               const option = { ...featureExtrudeConfig, altitude: levelHeight };
               const extrudedFixture = createExtrudedUnit(
                 feature2,
@@ -4354,34 +4495,6 @@ var IndoorMap = class extends EventTarget {
             }
             break;
           }
-          case "kiosk": {
-            const models = await create3DKiosk(feature2, this.threeLayer);
-            models.forEach((model) => {
-              model.on("click", this.handleClickElement);
-              object3ds.push(model);
-              this.#glbObjects.push(model);
-            });
-            const locatedLevel = feature2?.properties?.level;
-            const levelExtrudeConfig = getExtrudeConfigByFeature(
-              extrudeConfig,
-              locatedLevel
-            );
-            const levelHeight = import_lodash6.default.get(levelExtrudeConfig, "height", 0);
-            const option = { ...featureExtrudeConfig, altitude: levelHeight };
-            const hasAddedModel3d = models?.length > 0;
-            if (hasAddedModel3d || !featureExtrudeConfig) {
-              geometry = createKiosk(feature2)?.on("click", this.handleClickElement).addTo(layer);
-            } else {
-              const extrudedKiosk = createExtrudedKiosk(
-                feature2,
-                this.threeLayer,
-                option
-              );
-              extrudedKiosk.on("click", this.handleClickElement);
-              object3ds.push(extrudedKiosk);
-            }
-            break;
-          }
           case "footprint": {
             const objects = await create3DFootprint(
               feature2,
@@ -4392,7 +4505,7 @@ var IndoorMap = class extends EventTarget {
               object.on("click", () => {
                 const {
                   geometry: { coordinates }
-                } = (0, import_center3.default)(feature2);
+                } = (0, import_center4.default)(feature2);
                 this.camera.flyToAndZoomIn(coordinates, { pitch: 45 });
               });
               object3ds.push(object);
@@ -4460,7 +4573,6 @@ var IndoorMap = class extends EventTarget {
         );
       }
     });
-    this.render();
     this.#elements = elements;
     this.#elementsLoaded = true;
     this.#featuresInitted = true;
@@ -4471,39 +4583,6 @@ var IndoorMap = class extends EventTarget {
     const layer = this.map.getLayer(layerName);
     if (layer) layer.clear();
   };
-  #showGeometriesByOrdinal(ordinal) {
-    (0, import_lodash6.default)(this.#elements).filter((element) => !!import_lodash6.default.get(element, "geometry")).forEach(({ featureType, geometry, properties }) => {
-      const show = ordinal === null || properties?.ordinal === ordinal || featureType === "venue";
-      const layerName = import_lodash6.default.get(
-        LAYER_FEATURE_TYPE_OBJ,
-        featureType,
-        featureType
-      );
-      const layer = this.map.getLayer(layerName);
-      if (!layer) return;
-      if (geometry instanceof import_maptalks8.ui.UIMarker)
-        return show ? geometry?.addTo(this.map) : geometry.remove();
-      show ? layer.addGeometry(geometry) : layer.removeGeometry(geometry);
-      if (geometry._animPlayer instanceof import_maptalks8.animation.Player) {
-        const animPlayer = geometry?._animPlayer;
-        show ? animPlayer.play() : animPlayer.cancel();
-      }
-    });
-  }
-  #showThreeObjectByOrdinal = (ordinal) => {
-    const threeLayer = this.threeLayer;
-    const objectsToAdd = [];
-    const objects = this.#object3ds || [];
-    objects?.forEach((baseObject) => {
-      const objectOrdinal = import_lodash6.default.get(baseObject, "properties.ordinal");
-      const featureType = import_lodash6.default.get(baseObject, "properties.feature_type");
-      const isAdd = import_lodash6.default.get(baseObject, "isAdd");
-      const show = Boolean(objectOrdinal === ordinal) || ALWAYS_VISIBLE_FEATURE_TYPES.includes(featureType);
-      if (show) return objectsToAdd.push(baseObject);
-      if (isAdd) return threeLayer.removeMesh(baseObject);
-    });
-    threeLayer.addMesh(objectsToAdd);
-  };
   /**
    * Change Level & animate to path / geometry / view / etc.
    * ================================== */
@@ -4511,10 +4590,10 @@ var IndoorMap = class extends EventTarget {
     this.rendererManager.changeLevelByOrdinal(ordinal);
   }
   getFeatureExtent = (feature2, scaleFactor = 1) => {
-    const [minX, minY, maxX, maxY] = turf_bbox_default(
-      (0, import_transform_scale.default)((0, import_bbox_polygon.default)(turf_bbox_default(feature2)), scaleFactor)
+    const [minX, minY, maxX, maxY] = index_default(
+      (0, import_transform_scale.default)((0, import_bbox_polygon.default)(index_default(feature2)), scaleFactor)
     );
-    return new import_maptalks8.Extent(minX, minY, maxX, maxY);
+    return new import_maptalks_gl.Extent(minX, minY, maxX, maxY);
   };
   getExtentCenter = (extent) => {
     return extent.getCenter();
@@ -4548,19 +4627,19 @@ var IndoorMap = class extends EventTarget {
   };
   getLineStringBearing = (feature2) => {
     const { geometry } = feature2;
-    const path = new import_maptalks8.LineString(geometry.coordinates);
+    const path = new import_maptalks_gl.LineString(geometry.coordinates);
     return getBearingBetweenPoints(
       path.getFirstCoordinate(),
       path.getLastCoordinate()
     );
   };
   //map animation
-  addAnimations(animation2) {
-    this.#animationsToRun.push(animation2);
+  addAnimations(animation) {
+    this.#animationsToRun.push(animation);
   }
   removeAnimationById(id) {
     this.#animationsToRun = this.#animationsToRun.filter(
-      (animation2) => animation2.id !== id
+      (animation) => animation.id !== id
     );
   }
   clearAnimations() {
@@ -4571,21 +4650,21 @@ var IndoorMap = class extends EventTarget {
    * ========================================= */
   // TODO: To consider if we should use setter `set hilightElementIds` instead?
   setHighlightElementIds(targetElementIds, options = {}) {
-    const highlight3DOptions = import_lodash6.default.merge(
+    const highlight3DOptions = import_lodash7.default.merge(
       {},
       DEFAULT_HIGHLIGHT_OPTIONS,
-      import_lodash6.default.get(options, "highlight3DOptions", {})
+      import_lodash7.default.get(options, "highlight3DOptions", {})
     );
-    const highlight2DOptions = import_lodash6.default.merge(
+    const highlight2DOptions = import_lodash7.default.merge(
       {},
       DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
-      import_lodash6.default.get(options, "highlight2DOptions", {})
+      import_lodash7.default.get(options, "highlight2DOptions", {})
     );
     this.setHighlightedObject(targetElementIds, highlight3DOptions);
     return this.setHighlight2DElementIds(targetElementIds, highlight2DOptions);
   }
   setHighlight2DElementIds(targetElementIds, options = {}) {
-    const { defaultMarker, symbolSet } = import_lodash6.default.merge(
+    const { defaultMarker, symbolSet } = import_lodash7.default.merge(
       {},
       DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
       options
@@ -4597,7 +4676,7 @@ var IndoorMap = class extends EventTarget {
       getHilighPolygonalSymbol,
       getHighlightMarkerSymbol
     } = this.#styler;
-    const extrudeConfig = import_lodash6.default.get(this.#mapConfig, "extrude");
+    const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
     const elementToHilights = targetElementIds.map(
       (elemId) => this.#elements[elemId] || this.#elements[`${LAST_USER_LOCATION_ELEMENT_ID_PREFIX}${elemId}`]
     ).filter((elem) => elem);
@@ -4608,7 +4687,7 @@ var IndoorMap = class extends EventTarget {
       if (!hilightLayer) return;
       const defaultSymbol = getHilighPolygonalSymbol(geometry.type);
       const definedSymbol = symbolSet ? getElementSymbol(symbolSet) : null;
-      const symbol = import_lodash6.default.isEmpty(definedSymbol) ? defaultSymbol : definedSymbol;
+      const symbol = import_lodash7.default.isEmpty(definedSymbol) ? defaultSymbol : definedSymbol;
       switch (geometry.type) {
         case "MultiPolygon":
         case "Polygon": {
@@ -4663,9 +4742,9 @@ var IndoorMap = class extends EventTarget {
   }
   clearHighlightElements() {
     this.#clearAllElementOnLayerByName(HIGHLIGHT_LAYER_NAME);
-    (0, import_lodash6.default)(this.#highlightElementIds).map((elemId) => this.#elements[elemId]?.geometry).compact().forEach((geometry) => {
-      if (geometry instanceof import_maptalks8.ui.UIMarker) return;
-      if (geometry instanceof import_maptalks8.Marker) {
+    (0, import_lodash7.default)(this.#highlightElementIds).map((elemId) => this.#elements[elemId]?.geometry).compact().forEach((geometry) => {
+      if (geometry instanceof import_maptalks_gl.ui.UIMarker) return;
+      if (geometry instanceof import_maptalks_gl.Marker) {
         this.showGeometryByElementId(geometry.properties.id);
         return;
       }
@@ -4681,7 +4760,7 @@ var IndoorMap = class extends EventTarget {
     this.#highlightElementIds = [];
   }
   setHighlightedObject(targetObjectIds, options = {}) {
-    const { symbolSet } = import_lodash6.default.merge({}, DEFAULT_HIGHLIGHT_OPTIONS, options);
+    const { symbolSet } = import_lodash7.default.merge({}, DEFAULT_HIGHLIGHT_OPTIONS, options);
     const {
       getElementSymbol,
       getHilighPolygonalSymbol,
@@ -4693,8 +4772,8 @@ var IndoorMap = class extends EventTarget {
     );
     const defaultSymbol = getHilighPolygonalSymbol("Polygon");
     const targetSymbol = symbolSet ? getElementSymbol(symbolSet) : null;
-    const { polygonFill: color } = import_lodash6.default.isEmpty(targetSymbol) ? defaultSymbol : targetSymbol;
-    const amenityHighlightMode = import_lodash6.default.get(
+    const { polygonFill: color } = import_lodash7.default.isEmpty(targetSymbol) ? defaultSymbol : targetSymbol;
+    const amenityHighlightMode = import_lodash7.default.get(
       this.#mapConfig,
       "amenity_highlight_mode",
       ""
@@ -4710,7 +4789,7 @@ var IndoorMap = class extends EventTarget {
       if (obj instanceof SpriteMarker) {
         if (amenityHighlightMode === "2DMarker") {
           const hilight2DLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-          const extrudeConfig = import_lodash6.default.get(this.#mapConfig, "extrude");
+          const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
           obj.hide();
           const { properties: featureProperties } = obj;
           createHighlight2DAmenityMarkerFrom3DMarker(
@@ -4731,7 +4810,7 @@ var IndoorMap = class extends EventTarget {
   }
   clearHighlightObject() {
     this.#highlightObjectControllers.forEach((controller) => {
-      if (import_lodash6.default.isFunction(controller?.clear)) controller.clear();
+      if (import_lodash7.default.isFunction(controller?.clear)) controller.clear();
     });
     this.#highlightObjectIds.forEach((objIds) => {
       const objects = this.threeLayer?.getBaseObjects();
@@ -4770,15 +4849,15 @@ var IndoorMap = class extends EventTarget {
     }
   }
   updateUserLocationSymbolByLocale(locale) {
-    const userLocationGeometry = import_lodash6.default.get(
+    const userLocationGeometry = import_lodash7.default.get(
       this.#elements,
       `${USER_LOCATION_ELEMENT_ID}.geometry`
     );
     if (!userLocationGeometry) return;
     const currentSymbol = userLocationGeometry.getSymbol();
     const localeSymbolToUpdate = currentSymbol.map((symbol) => {
-      const localeSymbol = import_lodash6.default.get(symbol, `${LOCALE_SYMBOL_KEY}.${locale}`) || import_lodash6.default.get(symbol, `${LOCALE_SYMBOL_KEY}.default`);
-      if (!import_lodash6.default.isPlainObject(localeSymbol)) return symbol;
+      const localeSymbol = import_lodash7.default.get(symbol, `${LOCALE_SYMBOL_KEY}.${locale}`) || import_lodash7.default.get(symbol, `${LOCALE_SYMBOL_KEY}.default`);
+      if (!import_lodash7.default.isPlainObject(localeSymbol)) return symbol;
       return {
         ...symbol,
         ...localeSymbol
@@ -4852,14 +4931,14 @@ var IndoorMap = class extends EventTarget {
    * END of User Location
    ****************************/
   showGeometryByElementId = (elementId) => {
-    const geometry = import_lodash6.default.get(
+    const geometry = import_lodash7.default.get(
       this.#elements,
       `${elementId}.geometry`
     );
     if (geometry) geometry.show();
   };
   hideGeometryByElementId = (elementId) => {
-    const geometry = import_lodash6.default.get(this.#elements, `${elementId}.geometry`);
+    const geometry = import_lodash7.default.get(this.#elements, `${elementId}.geometry`);
     if (geometry) geometry.hide();
   };
   setSpriteMarkersOpacity = (opacity = 1) => {
@@ -4906,13 +4985,13 @@ var IndoorMap = class extends EventTarget {
       const line = lineStrings[i];
       const coords = line.geometry.coordinates;
       const prevLine = lineStrings[i - 1];
-      const firstCoord = import_lodash6.default.first(coords);
+      const firstCoord = import_lodash7.default.first(coords);
       const isFirstLine = i === 0;
       if (isFirstLine) {
         accLine.push(...coords);
         continue;
       }
-      const prevLastCoord = import_lodash6.default.last(prevLine.geometry.coordinates);
+      const prevLastCoord = import_lodash7.default.last(prevLine.geometry.coordinates);
       const isNearby = (0, import_distance.default)(point(firstCoord), point(prevLastCoord)) < distance;
       if (!isNearby) {
         const remainingLines = lineStrings.slice(i);
@@ -4933,8 +5012,8 @@ var IndoorMap = class extends EventTarget {
       create3DStepPath
     } = this.#styler;
     const routeMarkerLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-    const linesByOrdinal = (0, import_lodash6.default)(stepGeometries).filter(({ geometry }) => geometry.type === "LineString").groupBy("properties.ordinal").value();
-    const joinedLines = (0, import_lodash6.default)(linesByOrdinal).reduce((acc, lines, key) => {
+    const linesByOrdinal = (0, import_lodash7.default)(stepGeometries).filter(({ geometry }) => geometry.type === "LineString").groupBy("properties.ordinal").value();
+    const joinedLines = (0, import_lodash7.default)(linesByOrdinal).reduce((acc, lines, key) => {
       const joined = this.combineNearbyLineStrings(lines, {
         properties: { ordinal: +key }
       });
@@ -4962,14 +5041,14 @@ var IndoorMap = class extends EventTarget {
                 stepElement = createOriginMarker(stepGeometry).addTo(routeMarkerLayer);
                 break;
               case "destination-marker":
-                const extrudeConfig = import_lodash6.default.get(this.#mapConfig, "extrude");
+                const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
                 if (destinationFeature.feature_type === "occupant") {
-                  const stepId = import_lodash6.default.get(stepGeometry, "id");
+                  const stepId = import_lodash7.default.get(stepGeometry, "id");
                   const normalizedDestinationFeature = {
                     ...destinationFeature,
                     id: stepId
                   };
-                  const logoUrl = import_lodash6.default.get(
+                  const logoUrl = import_lodash7.default.get(
                     normalizedDestinationFeature,
                     "properties.logo.url"
                   );
@@ -5014,15 +5093,15 @@ var IndoorMap = class extends EventTarget {
     const routeMarkerLayer = this.map.getLayer(
       HIGHLIGHT_LAYER_NAME
     );
-    const originMarkerGeometry = import_lodash6.default.get(
+    const originMarkerGeometry = import_lodash7.default.get(
       this.#elements,
       `${ORIGIN_MARKER_ID}.geometry`
     );
-    const destinationMarkerGeometry = import_lodash6.default.get(
+    const destinationMarkerGeometry = import_lodash7.default.get(
       this.#elements,
       `${DESTINATION_MARKER_ID}.geometry`
     );
-    const geometriesToRemove = import_lodash6.default.compact([
+    const geometriesToRemove = import_lodash7.default.compact([
       originMarkerGeometry,
       destinationMarkerGeometry
     ]);
@@ -5033,7 +5112,7 @@ var IndoorMap = class extends EventTarget {
       (obj) => !(obj instanceof NavigationPath)
     );
     const objects = this.#navigationGeometries || {};
-    import_lodash6.default.forEach(objects, (obj) => {
+    import_lodash7.default.forEach(objects, (obj) => {
       if (!obj) return;
       this.#navigationGeometries[obj.properties.id] = null;
       obj.remove();
@@ -5072,10 +5151,10 @@ var IndoorMap = class extends EventTarget {
       zoom: map.getZoom()
     };
     const finalView = {
-      bearing: import_lodash6.default.isNil(targetView.bearing) ? map.getBearing() : targetView.bearing,
-      center: import_lodash6.default.isNil(targetView.center) ? map.getCenter() : targetView.center,
-      pitch: import_lodash6.default.isNil(targetView.pitch) ? map.getPitch() : targetView.pitch,
-      zoom: import_lodash6.default.isNil(targetView.zoom) ? map.getZoom() : targetView.zoom
+      bearing: import_lodash7.default.isNil(targetView.bearing) ? map.getBearing() : targetView.bearing,
+      center: import_lodash7.default.isNil(targetView.center) ? map.getCenter() : targetView.center,
+      pitch: import_lodash7.default.isNil(targetView.pitch) ? map.getPitch() : targetView.pitch,
+      zoom: import_lodash7.default.isNil(targetView.zoom) ? map.getZoom() : targetView.zoom
     };
     map.setView(finalView);
     const projectedTargetCenter = map.coordinateToContainerPoint(finalView.center).add(right / 2 - left / 2, bottom / 2 - top / 2);
@@ -5096,7 +5175,7 @@ var IndoorMap = class extends EventTarget {
       this.threeLayer.redraw();
     }
     if (this.threeLayer) {
-      const objectOpacity = import_lodash6.default.clamp(38 - 2 * this.camera.getZoom(), 0, 1);
+      const objectOpacity = import_lodash7.default.clamp(38 - 2 * this.camera.getZoom(), 0, 1);
       this.#objects.forEach((object) => {
         object.getObject3d().traverse((child) => {
           if (child.isMesh) child.material.opacity = objectOpacity;
@@ -5106,7 +5185,7 @@ var IndoorMap = class extends EventTarget {
       });
       if (this.#billboardObjects) {
         this.#billboardObjects.forEach((object) => {
-          const objectScale = import_lodash6.default.clamp(
+          const objectScale = import_lodash7.default.clamp(
             20 - 1 * this.camera.getZoom(),
             1,
             1.05
@@ -5115,7 +5194,7 @@ var IndoorMap = class extends EventTarget {
         });
       }
       if (this.#isLayersFadingOnZoom) {
-        const layerOpacity = import_lodash6.default.clamp(1 - objectOpacity, 0, 1);
+        const layerOpacity = import_lodash7.default.clamp(1 - objectOpacity, 0, 1);
         LAYERS.forEach((layerKey) => {
           const layer = this.map.getLayer(layerKey);
           if (layer) layer.setOpacity(layerOpacity);
@@ -5190,5 +5269,4 @@ var IndoorMap = class extends EventTarget {
   styledFeatureGenerator
 });
 //! Use outerHTML to return HTML string instead of element object to avoid DOM event warnings from Maptalks.js.
-//! Prevent animating geometry from stopping after being removed and re-added to the layer.
 //# sourceMappingURL=index.js.map