### Complete HTML Example for Indoor 3D Map Source: https://context7.com/wolfwind521/indoor3d/llms.txt A full HTML example demonstrating the setup of the indoor3D map, including necessary script includes, basic styling, map initialization, data loading, and UI configuration. ```html Indoor 3D Map
``` -------------------------------- ### Basic Indoor Map Implementation Source: https://github.com/wolfwind521/indoor3d/blob/master/README.md A minimal setup for initializing an indoor map and loading data. ```html ``` -------------------------------- ### Advanced Indoor Map Configuration Source: https://github.com/wolfwind521/indoor3d/blob/master/README.md A more complex example demonstrating custom container IDs, 3D mode, and UI integration. ```html
``` -------------------------------- ### Map Initialization Parameters Source: https://github.com/wolfwind521/indoor3d/blob/master/README.md Setting up map parameters and creating the map instance. ```javascript var params={mapDiv:"indoor3d",dim:"3d"}; var indoorMap = IndoorMap(params); ``` ```javascript var indoorMap = IndoorMap(); ``` -------------------------------- ### Required Library Includes Source: https://github.com/wolfwind521/indoor3d/blob/master/README.md The necessary JavaScript and CSS files required to initialize the Indoor3D environment. ```html ``` -------------------------------- ### Create IndoorMap Instance Source: https://context7.com/wolfwind521/indoor3d/llms.txt Instantiates an IndoorMap object. Configure the map container, rendering dimension (2D/3D), or specific dimensions. ```javascript var map = new IndoorMap(); ``` ```javascript var params = { mapDiv: "indoor3d", // ID of the container div dim: "2d" // "2d" or "3d" (default: "3d") }; var map = new IndoorMap(params); ``` ```javascript var params = { size: [800, 500] // [width, height] in pixels }; var map = new IndoorMap(params); ``` -------------------------------- ### Load and Configure Map Data Source: https://context7.com/wolfwind521/indoor3d/llms.txt Loads map data from a JSON file and initializes the map. Use the callback to configure map settings after data is loaded. ```javascript var map = new IndoorMap({ mapDiv: "indoor3d", dim: "3d" }); map.load('data/mallMapData.json', function() { // Data loaded, now configure the map map.showAllFloors() .showAreaNames(true) .setSelectable(true); // Add floor switching UI var floorUI = IndoorMap.getUI(map); document.body.appendChild(floorUI); }); ``` -------------------------------- ### IndoorMap Constructor Source: https://context7.com/wolfwind521/indoor3d/llms.txt Initializes a new indoor map instance with optional configuration for the container and rendering dimensions. ```APIDOC ## new IndoorMap(params) ### Description Creates a new indoor map instance. Accepts an optional parameters object to configure the map container and rendering dimension. ### Parameters #### Request Body - **mapDiv** (string) - Optional - ID of the container div. - **dim** (string) - Optional - Rendering mode: "2d" or "3d" (default: "3d"). - **size** (array) - Optional - Array of [width, height] in pixels. ### Request Example { "mapDiv": "indoor3d", "dim": "2d", "size": [800, 500] } ``` -------------------------------- ### Accessing Mall Object Data with IndoorMap Source: https://context7.com/wolfwind521/indoor3d/llms.txt Demonstrates how to access building and floor information using the 'mall' property after the map data has been loaded. This includes retrieving IDs, counts, and specific floor details. ```javascript var map = new IndoorMap({ mapDiv: "indoor3d" }); map.load('data/mallMapData.json', function() { var mall = map.mall; // Get building information var buildingId = mall.getBuildingId(); var defaultFloorId = mall.getDefaultFloorId(); var floorCount = mall.getFloorNum(); // Get floor information var currentFloorId = mall.getCurFloorId(); var currentFloor = mall.getCurFloor(); var specificFloor = mall.getFloor(2); var floorByName = mall.getFloorByName("F1"); // Access raw JSON data var floorJson = mall.getFloorJson(1); console.log("Floor name:", floorJson.Name); console.log("Rooms:", floorJson.FuncAreas.length); console.log("Public points:", floorJson.PubPoint.length); // Access all floors array mall.floors.forEach(function(floor) { console.log("Floor ID:", floor._id); }); }); ``` -------------------------------- ### Map Loading and Parsing Source: https://github.com/wolfwind521/indoor3d/blob/master/README.md Methods for initializing the map data from files or JSON objects. ```APIDOC ## .load(fileName, callback) ### Description Loads a map file. The callback function is executed upon completion. The getUI() function must be called within this callback. ### Parameters - **fileName** (string) - Required - The path or name of the file to load. - **callback** (function) - Required - Function to execute after loading. ## .parse(jsonData) ### Description Parses JSON data directly if the data has already been loaded by other modules. ### Parameters - **jsonData** (object) - Required - The map data object. ``` -------------------------------- ### Initialize and Load Indoor Map Source: https://github.com/wolfwind521/indoor3d/blob/master/index.html Initializes the map container and loads map data from a JSON file. Requires a valid div ID and data source path. ```javascript var params = { mapDiv:"indoor3d", dim:"2d" } var map = IndoorMap(params); map.load('data/testMapData.json', function(){ //map.setTheme(testTheme); map.showAreaNames(true).setSelectable(true); var ul = IndoorMap.getUI(map); document.body.appendChild(ul); }); ``` -------------------------------- ### Implement Floor Switching UI Source: https://context7.com/wolfwind521/indoor3d/llms.txt Retrieve the floor UI component using IndoorMap.getUI and append it to the DOM. CSS can be used to style the generated list elements. ```javascript var map = new IndoorMap({ mapDiv: "indoor3d", dim: "3d" }); map.load('data/mallMapData.json', function() { map.showAllFloors().setSelectable(true); // Get the floor UI (returns a