### Example Display URL Source: https://developer.mappedin.com/docs/enterprise-apps/mappedin-web/deep-linking An example of a complete URL for the display route, demonstrating various parameters. ```URL https:///#/display?lat=43.4567&lon=-80.5234&floor=abc123&zoom=19&heading=180&tilt=45&showQR=true&showBlueDot=true&showFloorInfo=true&qrId=main-lobby-tv ``` -------------------------------- ### Install Dependencies Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-mapkit-js Install necessary packages for handling GeoJSON, zip files, and Turf.js. ```bash yarn add @types/geojson jszip geojson @turf/buffer @types/adm-zip ``` -------------------------------- ### Install deck.gl Packages Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-deck.gl Install deck.gl core, layers, and related utility packages for GeoJSON and Turf. ```bash yarn add @deck.gl/core @deck.gl/layers @types/geojson jszip @turf/buffer ``` -------------------------------- ### Example MVF Address Configuration Source: https://developer.mappedin.com/docs/mvf/v3/mvf-v3-specification/mappedin-mvf-address Illustrates how to configure the address extension in an MVF object. This example shows a primary address and an address for a specific floor stack. ```json { address: { primary: { display: { displayAddress: "5788 Wunsch Cliffs, Iristown, IA 75553" } }, floorStack: { fs_0000001: { display: { displayAddress: "5788 Wunsch Cliffs, Iristown, IA 75553" } } } } } ``` -------------------------------- ### MVF Package Structure Example Source: https://developer.mappedin.com/docs/mvf/v3/mvf-v3-specification/mvf-core Illustrates the typical file and folder organization within an MVF package, including core extensions. ```text geometry/ abcde1234.geojson abcde1235.geojson floors.geojson manifest.geojson ``` -------------------------------- ### Example CSV for Building and Floor Configuration Source: https://developer.mappedin.com/docs/integrations/workplace-management-and-collaboration/microsoft-places/microsoft-places-configuration Populate this CSV with building and floor information for import. Ensure correct column names and format. ```csv InferredBuildingName,InferredFloorName,PrimarySmtpAddress Corporate Headquarters,1, Corporate Headquarters,2, Corporate Headquarters,Basement, ``` -------------------------------- ### MVFv3 Core Example Source: https://developer.mappedin.com/docs/mvf/v3/mvf-v3-specification/mvf-overview This example demonstrates a basic MVFv3 object structure, including manifest, floors, and geometry. It represents a map with two floors and their respective geometries. ```typescript import type { MVFv3 } from '@mappedin/mvf'; export const CORE_EXAMPLE: MVFv3 = { manifest: { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0], }, properties: { name: 'My Map', version: '3.0.0', time: '2025-01-01T00:00:00.000Z', contents: [ { name: 'manifest.geojson', type: 'file', }, { name: 'floors.geojson', type: 'file', }, { name: 'geometry', type: 'folder', children: [ { name: 'f_00000001.geojson', type: 'file', }, { name: 'f_00000002.geojson', type: 'file', }, ], }, ], }, }, ], }, floors: { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ [0, 0], [1, 0], [1, 1], [0, 1], [0, 0], ], ], }, properties: { id: 'f_00000001', elevation: 0, details: { name: 'Floor 1', }, }, }, { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ [0, 0], [1, 0], [1, 1], [0, 1], [0, 0], ], ], }, properties: { id: 'f_00000002', elevation: 1, details: { name: 'Floor 2', }, }, }, ], }, geometry: { f_00000001: { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ [0, 0], [1, 0], [1, 1], [0, 1], [0, 0], ], }, }, properties: { id: 'g_00000001', }, }, ], }, f_00000002: { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ [0, 0], [1, 0], [1, 1], [0, 1], [0, 0], ], }, }, properties: { id: 'g_00000002', }, }, ], }, }, }; ``` -------------------------------- ### Locations.json Example Source: https://developer.mappedin.com/docs/data-sync/geodata-sync An example of a locations.json file demonstrating the structure of a Location object. This file is an array of Location objects, each with required and optional fields. ```json // locations.json [ { // Required, must be a string beginning with `loc_` and be unique within the MVF. "id": "loc_67a24e09241d315f309f3869", // Required, a standard details object except for name, which is now also required "details": { "name": "Who's Who In The Zoo", "description": "Any child or “child at heart” will be delighted with the selection of stuffed animals, dolls, wind-ups and battery-operated gizmos filling the shelves of Who’s Who in the Zoo. Their boutique is designed specifically for flight lovers and offers a wide selection of airplane and spacecraft models.", "externalId": "405" }, // Required, but can be empty. An array of geometry anchors. Each geometry anchor must have a // `geometryId` property, which is the ID of the geometry on the floor, and a `floorId` property, // which is the ID of the floor. // // These are the physical places this location can be found. If a location is in a room, it should // be anchored to Polygon geometry. If it's more of a point in space, like an AED, it should be // anchored to a Point geometry. // // NOTE: A location can be attached to many geometries, on many floors, and many locations can be // attached to the same geometry. "geometryAnchors": [ { "geometryId": "g_67a24e03241d315f309f313e", "floorId": "f_67a24d8a241d315f309f243e" } ], // Required, but can be empty. An array of category IDs this location belongs to. // See location-categories.json below. "categories": [ "lcat_67a24e08241d315f309f3820", "lcat_67a24e08241d315f309f383d" ], // Required, but can be empty. An array of image objects. Each image object must have a `url` // property, which is the full URL of the image. Pictures are usually photographs of the // location. See Logo for the brand logo. "images": [{ "url": "https://cdn.mappedin.com/5a3827a74bd0ef04d9000000/0d0a9e3afb1f4e662387d3502e76c35cb7785c74.png" }], // Required, but can be empty. An array of objects with a `url` property, which is the full URL of the link, // and a `label` property describing the link. "links": [{ "url": "https://www.whoswhointhezoo.com/collection/offers/", "label": "Offers" }], // Required, but can be empty. An array of social media objects. Each social media object must have a `url` // property, which is the full URL of the social media profile, and `name` which is the name of the social // media platform. // For a geodata import, must be one of "facebook", "twitter", or "instagram". "social": [], // Required, but can be empty (which will be interpreted as using the venue's opening hours). // This is an array of objects meeting a more permissive OpeningHoursSpecification schema.org type. // See https://docs.mappedin.com/mvf/v3/latest/types/_mappedin_mvf.locations.OpeningHoursSpecification.html "openingHours": [ { "@type": "OpeningHoursSpecification", "opens": "07:30", "closes": "20:00", "dayOfWeek": [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ] } ], // Optional. If present, must be an object with a `url` property, which is the full URL of the // website, and a `label` property, which should always be "Website" (other values will be ignored). "website": { "label": "Website", "url": "http://whoswhointhezoo.com/" }, // Optional. If present, must be a string representing the (public) phone number of the location "phone": "403-291-7037", // Optional, but highly recommended. If present, must be a string representing the logo image URL. // This is usually displayed on the card for the location in Mappedin Solutions, and should be // square if possible. "logo": "https://cdn.mappedin.com/5a3827a74bd0ef04d9000000/0d0a9e3afb1f4e662387d3502e76c35cb7785c74.png" // Optional. If an SDK customer needs to pass additional data to the SDK, this is the place // to do it. Talk to your Mappedin representative if you need to use this. "extra": { } } ] ``` -------------------------------- ### Run Microsoft Places Install Script Source: https://developer.mappedin.com/docs/integrations/workplace-management-and-collaboration/microsoft-places/microsoft-places-configuration Execute the DeployPlaces script to set up Microsoft Places. Run as Administrator on Windows or use 'pwsh' on macOS. ```powershell Install-Script -Name DeployPlaces ``` ```powershell DeployPlaces ``` -------------------------------- ### Install PowerShell 7+ on Windows Source: https://developer.mappedin.com/docs/integrations/workplace-management-and-collaboration/microsoft-places/microsoft-places-configuration Use winget to install PowerShell 7+ on Windows. Ensure you are using PowerShell 7+ for compatibility. ```powershell winget install --id Microsoft.PowerShell --source winget ``` -------------------------------- ### Example MVF Node Network Source: https://developer.mappedin.com/docs/mvf/v3/mvf-v3-specification/mvf-nodes Demonstrates a two-node network on a single floor, showing navigation between nodes and linking to destination geometry. ```json { "nodes": { "f_000001": { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [10.0, 10.0] }, "properties": { "id": "n_000001", "neighbors": [ { "id": "n_000002", "extraCost": 10, "flags": [0] } ], "geometryIds": [] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [10.0, 10.0] }, "properties": { "id": "n_000002", "neighbors": [], "geometryIds": ["g_000001"] } } ] } } } ``` -------------------------------- ### Example Navigation Flag Declarations Source: https://developer.mappedin.com/docs/mvf/v3/mvf-v3-specification/mvf-navigation-flags Illustrates a sample set of navigation flag declarations, including 'accessible', 'public', and 'indoors', with their respective index and bit positions. ```json { "accessible": { "index": 0, "bit": 0 }, "public": { "index": 0, "bit": 1 }, "indoors": { "index": 0, "bit": 2 } } ``` -------------------------------- ### Full-Page Mappedin Web Integration Source: https://developer.mappedin.com/docs/enterprise-apps/mappedin-web/integration Example of integrating Mappedin Web as a standalone page. This setup allows the map to occupy the entire browser window. ```html
``` -------------------------------- ### Install PowerShell 7+ on macOS Source: https://developer.mappedin.com/docs/integrations/workplace-management-and-collaboration/microsoft-places/microsoft-places-configuration Install PowerShell 7+ on macOS using Homebrew. This is a prerequisite for running the Microsoft Places install script. ```bash brew install powershell ``` -------------------------------- ### Navigate to Project Directory Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-deck.gl Change the current directory to the newly created Vite project. ```bash cd mappedin-mvf-guide ``` -------------------------------- ### Main Application Logic Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-mapkit-js Sets up MapKit JS, loads MVFv3 data from a zip file, and creates GeoJSON overlays for venue rendering. ```typescript import { Feature } from 'geojson'; import JSZip from 'jszip'; import './styles.css'; import { downloadAndProcessVenue, getAccessToken, hexToRGB, loadFileFromZip } from './utils'; //The Mappedin Map ID to load. const MAP_ID = '64ef49e662fd90fe020bee61'; // See Trial API key Terms and Conditions // https://developer.mappedin.com/docs/demo-keys-and-maps const MAPPEDIN_KEY = 'mik_yeBk0Vf0nNJtpesfu560e07e5'; const MAPPEDIN_SECRET = 'mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022'; // Replace this with your Mapkit JWT token. This token is whitelisted for this domain only. const MAPKIT_TOKEN = 'eyJraWQiOiJDUTNLUTNLNURGIiwidHlwIjoiSldUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJINkMyOTI0UUE1IiwiaWF0IjoxNzQ4NTYyNTM4LCJvcmlnaW4iOiI1MnE5OWYuY3NiLmFwcCJ9.zWH1DI_sM8HhMETQkASSRxr77Uv80d6ND8LGilhdP69oI-l-0RA7AlUfBknlV0YOj8aTpb1BYgdztDpSchclMw'; // Initialize MapKit JS with your JWT token. mapkit.init({ authorizationCallback: function (done) { done(MAPKIT_TOKEN); }, }); const ELEVATION = 0; // The floor elevation to be displayed. // Helper function to create MapKit overlays from GeoJSON features function createGeoJSONOverlay( features: Feature[], style: { strokeColor: string; fillColor: string; lineWidth: number; } ): mapkit.Overlay[] { return features .map(feature => { if (feature.geometry.type === 'Polygon') { const coordinates = feature.geometry.coordinates[0].map( coord => new mapkit.Coordinate(coord[1], coord[0]) ); const polygon = new mapkit.PolygonOverlay(coordinates); polygon.style = new mapkit.Style({ strokeColor: style.strokeColor, fillColor: style.fillColor, lineWidth: style.lineWidth, strokeOpacity: 1.0, fillOpacity: 0.95, }); return polygon; } else if (feature.geometry.type === 'LineString') { const coordinates = feature.geometry.coordinates.map( coord => new mapkit.Coordinate(coord[1], coord[0]) ); const polyline = new mapkit.PolylineOverlay(coordinates); polyline.style = new mapkit.Style({ strokeColor: style.strokeColor, lineWidth: style.lineWidth * 2, strokeOpacity: 1.0, }); return polyline; } // Return null for unsupported geometry types console.warn('Unsupported geometry type:', feature.geometry.type); return null; }) .filter(overlay => overlay !== null) as mapkit.Overlay[]; } // Initialize the visualization with the GoeJSON files in the MVFv3 zip. async function initVisualization(zip: JSZip) { // Load the essential MVF data files from zip const manifestData = await loadFileFromZip(zip, 'manifest.geojson'); const styles = await loadFileFromZip(zip, 'default-style.json'); const floorData = await loadFileFromZip(zip, 'floors.geojson'); // Extract the features array from the FeatureCollection const mapData = floorData.features.map(feature => feature.properties); // Get the current map for the set elevation const floorId = mapData.find(f => f.elevation === ELEVATION).id; // Get geometry data by floor ID const geometryData = await loadFileFromZip(zip, `geometry/${floorId}.geojson`); // Initialize MapKit JS map ``` -------------------------------- ### Get Access Token Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-deck.gl Use the MappedIn API key & secret to get an access token. This token is required for subsequent API calls. ```APIDOC ## getAccessToken ### Description Use the MappedIn API key & secret to get an access token. ### Method POST ### Endpoint https://app.mappedin.com/api/v1/api-key/token ### Parameters #### Request Body - **key** (String) - Required - The API key. - **secret** (String) - Required - The API secret. ### Response #### Success Response (200) - **access_token** (string) - The obtained access token. - **expires_in** (number) - The time in seconds until the token expires. ``` -------------------------------- ### Venue JSON Example Source: https://developer.mappedin.com/docs/data-sync/common-data-objects An example of a Venue object in JSON format, including required and optional properties like name, externalId, address, and operationHours. ```json [ { "name": "Mappedin Demo Mall", "externalId": "mappedin-demo-mall", "address": "460 Phillip St #300", "city": "Waterloo", "state": "Ontario", "postal": "N2L 5J2", "telephone": "519-594-0102", "website": "http://www.mappedin.com", "operationHours": [ { "@type": "OpeningHoursSpecification", "opens": "10:00", "closes": "23:00", "dayOfWeek": ["Sunday"] }, { "@type": "OpeningHoursSpecification", "opens": "09:00", "closes": "22:00", "dayOfWeek": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ] }, { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Saturday"], "validFrom": "2018-06-30", "validThrough": "2018-06-30", "opens": "00:00", "closes": "00:00" } ] } ] ``` -------------------------------- ### Create Vite Project Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-mapkit-js Initialize a new vanilla Vite project with TypeScript. ```bash yarn create vite mappedin-mvf-guide ``` ```bash cd mappedin-mvf-guide ``` -------------------------------- ### Download and Initialize Visualization Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-mapkit-js Handles the asynchronous process of obtaining an access token, downloading the venue data bundle, and initializing the visualization. This is the main entry point for rendering the map. ```typescript getAccessToken(MAPPEDIN_KEY, MAPPEDIN_SECRET) .then(async token => { //Download the MVF Bundle. const zip = await downloadAndProcessVenue(token, MAP_ID); // Initialize visualization with the zip contents. await initVisualization(zip); }) .catch(error => console.error('Error:', error)); ``` -------------------------------- ### Initialize Map and Blue Dot Settings Source: https://developer.mappedin.com/docs/tools/blue-dot-location-generator Sets up constants for demo API keys and initializes variables for map data, map view, and blue dot state. Includes a fake position updater for dynamic updates. ```typescript // See Trial API key Terms and Conditions // https://developer.mappedin.com/docs/demo-keys-and-maps const DEMO_KEY = 'mik_yeBk0Vf0nNJtpesfu560e07e5'; const DEMO_SECRET = 'mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022'; let mapData: MapData; let mapView: MapView; let blueDotEnabled = false; let positions: BlueDotPositionUpdate[] | undefined; const fakePositionUpdater = new DynamicPositionUpdater(); ``` -------------------------------- ### Example CSP Error Message Source: https://developer.mappedin.com/docs/enterprise-apps/mappedin-minimap This is an example of an error message that may appear in the browser console if the required CSP directives are not met. It indicates a violation of the security policy. ```text Refused to create a worker from 'blob:https://YOUR.URL' because it violates the following Content Security Policy directive: "default-src https: ws: data: 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback. ``` -------------------------------- ### Security Wait Times Example Source: https://developer.mappedin.com/docs/data-sync/airport-data-objects Example JSON array representing security checkpoints with their external IDs and wait times in minutes. This data is used for connections on the map. ```json [ { "externalId": "SEC1", "waitTime": 5 }, { "externalId": "SEC2", "waitTime": 15 }, { "externalId": "SEC3", "waitTime": 9 } ] ``` -------------------------------- ### Initialize Deck.gl Visualization with Venue Data Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-deck.gl This snippet loads venue data from a zip file and initializes a Deck.gl instance to render various layers such as rooms, hallways, walls, and desks. It requires the Mappedin SDK and GeoJSON data. ```typescript import type { Color } from '@deck.gl/core'; import { Deck } from '@deck.gl/core'; import { GeoJsonLayer } from '@deck.gl/layers'; import type { Feature } from 'geojson'; import JSZip from 'jszip'; import './style.css'; import { downloadAndProcessVenue, getAccessToken, loadFileFromZip } from './utils'; //The Mappedin Map ID to load. const MAP_ID = '64ef49e662fd90fe020bee61'; // See Trial API key Terms and Conditions // https://developer.mappedin.com/docs/demo-keys-and-maps const MAPPEDIN_KEY = 'mik_yeBk0Vf0nNJtpesfu560e07e5'; const MAPPEDIN_SECRET = 'mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022'; const ELEVATION = 0; // The floor elevation to be displayed. // Initialize the visualization with the GoeJSON files in the MVFv3 zip. async function initVisualization(zip: JSZip) { // Load the essential MVF data files from zip const manifestData = await loadFileFromZip(zip, 'manifest.geojson'); const styles = await loadFileFromZip(zip, 'default-style.json'); const floorData = await loadFileFromZip(zip, 'floors.geojson'); // Extract the features array from the FeatureCollection const mapData = floorData.features.map(feature => feature.properties); // Get the current map for the set elevation const floorId = mapData.find(f => f.elevation === ELEVATION).id; // Get geometry data by floor ID const geometryData = await loadFileFromZip(zip, `geometry/${floorId}.geojson`); function hexToRGB(hex: string): Color { return hex.match(/[0-9a-f]{2}/gi)!.map(x => parseInt(x, 16)) as Color; } // Space data contains traversable areas such as rooms and hallways const roomStyles = styles['Rooms']; const roomLayer = new GeoJsonLayer({ id: 'room-layer', data: geometryData.features.filter((f: Feature) => roomStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getFillColor: hexToRGB(roomStyles.color), stroked: false, }); const hallwayStyles = styles['Hallways']; const hallwayLayer = new GeoJsonLayer({ id: 'hallway-layer', data: geometryData.features.filter((f: Feature) => hallwayStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getFillColor: hexToRGB(hallwayStyles.color), stroked: false, }); const wallStyles = styles['Walls']; const wallLayer = new GeoJsonLayer({ id: 'wall-layer', data: geometryData.features.filter((f: Feature) => wallStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getLineColor: hexToRGB(wallStyles.color), getLineWidth: wallStyles.width, stroked: false, }); const exteriorWallStyles = styles['ExteriorWalls']; const exteriorWallLayer = new GeoJsonLayer({ id: 'exterior-wall-layer', data: geometryData.features.filter((f: Feature) => exteriorWallStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getLineColor: hexToRGB(exteriorWallStyles.color), getLineWidth: exteriorWallStyles.width, stroked: false, }); const deskStyles = styles['Desks']; const deskLayer = new GeoJsonLayer({ id: 'desk-layer', data: geometryData.features.filter((f: Feature) => deskStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getFillColor: hexToRGB(deskStyles.color), stroked: false, }); new Deck({ initialViewState: { longitude: manifestData.features[0].geometry.coordinates[0], latitude: manifestData.features[0].geometry.coordinates[1], zoom: 18.5, }, controller: true, layers: [roomLayer, hallwayLayer, deskLayer, wallLayer, exteriorWallLayer], }); } // Execute everything getAccessToken(MAPPEDIN_KEY, MAPPEDIN_SECRET) .then(async token => { const zip = await downloadAndProcessVenue(token, MAP_ID); // Initialize visualization with the zip contents. await initVisualization(zip); }) .catch(error => console.error('Error:', error)); ``` -------------------------------- ### Baggage Claim Data Example Source: https://developer.mappedin.com/docs/data-sync/airport-data-objects Example JSON structure for a baggage claim location. This includes the location name, type, venue, and an array of baggage claim IDs. ```json { [ { "name": "Baggage Claim 1 (Terminal 3)", "type": "baggage-claim", "venue": "venue1", "airportData": { "baggageClaimId": ["3;1", "3"] } } ] } ``` -------------------------------- ### Example Embed Code for Wix Source: https://developer.mappedin.com/docs/embed-a-map/wix This is an example of the embed code that can be modified to adjust the map's height within a Wix page. Use this when the map appears cut off. ```html ``` -------------------------------- ### Get SVG Download Link Source: https://developer.mappedin.com/docs/rest-apis/svg-export Download a ZIP file containing SVG exports of your map by making a GET request with your JWT. The ZIP file includes an SVG for each floor of the map. ```APIDOC ## Get an SVG Download Link ### Description Retrieve a ZIP file containing SVG exports for a specified map ID. This endpoint requires authentication using a JWT. ### Method GET ### Endpoint `https://app.mappedin.com/api/v1/svg//download` ### Parameters #### Path Parameters - **YOUR_MAP_ID** (string) - Required - The ID of the map you wish to export. #### Headers - **Authorization** (string) - Required - `Bearer ` where `` is the JWT token obtained from the token exchange. ### Response #### Success Response (200) A ZIP file containing SVG files for each floor of the map. ``` -------------------------------- ### Create DeckGL Layers for Walls and Desks Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-deck.gl Creates layers for 'Walls', 'ExteriorWalls', and 'Desks'. Walls and ExteriorWalls use line properties like color and width, while Desks use fill color. Filter data based on style anchors. ```javascript const wallStyles = styles['Walls']; const wallLayer = new GeoJsonLayer({ id: 'wall-layer', data: geometryData.features.filter((f: Feature) => wallStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getLineColor: hexToRGB(wallStyles.color), getLineWidth: wallStyles.width, stroked: false, }); const exteriorWallStyles = styles['ExteriorWalls']; const exteriorWallLayer = new GeoJsonLayer({ id: 'exterior-wall-layer', data: geometryData.features.filter((f: Feature) => exteriorWallStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getLineColor: hexToRGB(exteriorWallStyles.color), getLineWidth: exteriorWallStyles.width, stroked: false, }); const deskStyles = styles['Desks']; const deskLayer = new GeoJsonLayer({ id: 'desk-layer', data: geometryData.features.filter((f: Feature) => deskStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), getFillColor: hexToRGB(deskStyles.color), stroked: false, }); ``` -------------------------------- ### Direct Browser Deployment URL Template Source: https://developer.mappedin.com/docs/enterprise-apps/mappedin-directory Use this URL template to load Mappedin Directory directly in a browser without an installer. Replace placeholder variables with your specific configuration values. ```URL {baseurl}?venue={venue}&kiosk={kiosk}&clientId={clientId}&clientSecret={clientSecret} ``` -------------------------------- ### Location Object Example Source: https://developer.mappedin.com/docs/mvf/v3/mvf-v3-specification/mvf-overview Demonstrates a `Location` object including its ID, geometry anchors, details, and custom data within the `extra` property. This example shows how to represent a physical location with associated information. ```typescript const location: Location = { id: 'loc_00000001', geometryAnchors: [ { geometryId: 'g_00000001', floorId: 'f_00000001', }, ], details: { name: 'Main Conference Room', }, extra: { customData: 'some data', }, categories: [], social: [], images: [], links: [], }; ``` -------------------------------- ### Initialize Venue Visualization Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-mapkit-js This function downloads and processes the venue data, then initializes the visualization by adding various overlays to the map. It styles rooms, hallways, walls, and desks based on predefined styles. ```typescript async function initVisualization(zip: Zip) { const { geometryData, styles } = await processVenue(zip); // Create room overlays. const roomStyles = styles['Rooms']; const roomOverlays = createGeoJSONOverlay( geometryData.features.filter((f: Feature) => roomStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), { strokeColor: 'transparent', fillColor: hexToRGB(roomStyles.color), lineWidth: 0, } ); const hallwayStyles = styles['Hallways']; const hallwayOverlays = createGeoJSONOverlay( geometryData.features.filter((f: Feature) => hallwayStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), { strokeColor: 'transparent', fillColor: hexToRGB(hallwayStyles.color), lineWidth: 0, } ); // Modify the wall styles to be more visible. const wallStyles = styles['Walls']; const wallOverlays = createGeoJSONOverlay( geometryData.features.filter((f: Feature) => wallStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), { strokeColor: '#b2b2b2', lineWidth: wallStyles.buffer * 1.5, fillColor: 'transparent', } ); // Modify the exterior wall styles to be more visible. const exteriorWallStyles = styles['ExteriorWalls']; const exteriorWallOverlays = createGeoJSONOverlay( geometryData.features.filter((f: Feature) => exteriorWallStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), { strokeColor: '#acacac', lineWidth: exteriorWallStyles.buffer * 2, fillColor: 'transparent', } ); const deskStyles = styles['Desks']; const deskOverlays = createGeoJSONOverlay( geometryData.features.filter((f: Feature) => deskStyles.geometryAnchors .map((anchor: { floorId: string; geometryId: string }) => anchor.geometryId) .includes(f.properties!.id) ), { strokeColor: 'transparent', fillColor: hexToRGB(deskStyles.color), lineWidth: 0, } ); // Add all overlays to the map roomOverlays.forEach(overlay => map.addOverlay(overlay)); hallwayOverlays.forEach(overlay => map.addOverlay(overlay)); wallOverlays.forEach(overlay => map.addOverlay(overlay)); exteriorWallOverlays.forEach(overlay => map.addOverlay(overlay)); deskOverlays.forEach(overlay => map.addOverlay(overlay)); } ``` -------------------------------- ### Check-In Counter Data Example Source: https://developer.mappedin.com/docs/data-sync/airport-data-objects Example JSON structure for a check-in counter location. This includes airline name, external ID, type, associated polygons, logo URL, and optional airline code. ```json [ { "name": "Airline Name", "externalId": "location_id_1", "type": "check-in", "polygons": ["check-in-counter-1A", "check-in-counter-1B", "check-in-counter-1C"], "logo": "http://www.example.com/Example-Airline-Logo.jpg", "airportData": { "airlineCode": "AC" } } ] ``` -------------------------------- ### Download and Initialize Venue Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-mapkit-js This code block handles the authentication process using MappedIn keys and secrets, then downloads and processes the venue data. Finally, it calls initVisualization to render the venue on the map. ```typescript // Execute everything getAccessToken(MAPPEDIN_KEY, MAPPEDIN_SECRET) .then(async token => { //Download the MVF Bundle. const zip = await downloadAndProcessVenue(token, MAP_ID); // Initialize visualization with the zip contents. await initVisualization(zip); }) .catch(error => console.error('Error:', error)); ``` -------------------------------- ### React 3D Model Mapper Import Example Source: https://developer.mappedin.com/docs/tools/3d-model-mapper This example demonstrates how to import and display 3D models from an exported JSON file within a React application using the Mappedin React SDK. Ensure you have the necessary API key and secret to load your map. ```tsx import { useEffect, useState } from 'react'; import { MapView, useMapData, useMap, Model } from '@mappedin/react-sdk'; import { airplane, bathtub, shipping_container, car, chair, dryer, tree_pine, floor_lamp, couch_outward_curve, e_vehicle_charger, tree_pine_short, tv, whiteboard, self_checkout, round_table, kitchen_sink, box_cardboard, can_garbage, desk_scalable, washer, refrigerator, can_recycling, plant_2, vending_machine, privacy_booth, plant_1, high_bench, curved_couch, shopping_shelves, kiosk, couch, computer, toilet, stove, hot_tub, truck, bed, fountain, wood_stove, desk_chair, bookshelf, } from '@mappedin/3d-assets'; interface ModelData { id: string; modelId: string; coordinate: { latitude: number; longitude: number; verticalOffset: number; floorId: string; }; rotation: [number, number, number]; scale: [number, number, number]; color: string; verticalOffset: number; } interface ModelsData { models: ModelData[]; version: string; timestamp: number; } // Create a map of model IDs to their corresponding model URLs const modelMap: Record = { airplane, bathtub, shipping_container, car, chair, dryer, tree_pine, floor_lamp, couch_outward_curve, e_vehicle_charger, tree_pine_short, tv, whiteboard, self_checkout, round_table, kitchen_sink, box_cardboard, can_garbage, desk_scalable, washer, refrigerator, can_recycling, plant_2, vending_machine, privacy_booth, plant_1, high_bench, curved_couch, shopping_shelves, kiosk, couch, computer, toilet, stove, hot_tub, truck, bed, fountain, wood_stove, desk_chair, bookshelf, }; function ModelsComponent() { const { mapData, mapView } = useMap(); const [models, setModels] = useState([]); useEffect(() => { // Load the models from the JSON file ``` -------------------------------- ### Get Venue Data Source: https://developer.mappedin.com/docs/embed-a-map/google-sites This JavaScript snippet retrieves venue data, which is a prerequisite for embedding a map. ```javascript const venue = getVenue(); ``` -------------------------------- ### Initialize DeckGL with Map Layers Source: https://developer.mappedin.com/docs/mvf/v3/examples/render-with-deck.gl Creates a new DeckGL instance, setting the initial view state using map manifest data and adding all configured geometry layers. Layers are stacked vertically in the order they are provided. ```javascript new Deck({ initialViewState: { longitude: manifestData.features[0].geometry.coordinates[0], latitude: manifestData.features[0].geometry.coordinates[1], zoom: 18.5, }, controller: true, layers: [roomLayer, hallwayLayer, deskLayer, wallLayer, exteriorWallLayer], }); ```