### Project Setup Commands
Source: https://developer.mappedin.com/llms-mvfv1.txt
Commands to create a new Vite project with TypeScript, install Leaflet, and set up the development environment. This includes project initialization, dependency installation, and starting the development server.
```bash
yarn create vite mappedin-leaflet
cd mappedin-leaflet
yarn
yarn add leaflet
yarn add -D @types/leaflet @types/geojson
yarn dev
```
--------------------------------
### Project Setup and Dependencies
Source: https://developer.mappedin.com/llms-mvfv3.txt
This section outlines the steps to set up a new project using Vite with TypeScript and install necessary libraries for rendering MVF data with deck.gl. It includes commands for project creation and package installation.
```sh
yarn create vite mappedin-mvf-guide
cd mappedin-mvf-guide
yarn add @deck.gl/core @deck.gl/layers @types/geojson jszip @turf/buffer
```
--------------------------------
### Run Mappedin Installer
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
Instructions for executing the Mappedin Digital Directory installer on a Windows system. The installer handles the setup process for the application.
```shell
mappedin-directory-LATEST-setup.exe
```
--------------------------------
### MVF v3 Download Link Response with Locale Packs
Source: https://developer.mappedin.com/llms-mvfv3.txt
Example JSON response from the Get venue MVF endpoint, including download URLs for MVF and locale packages.
```json
{
"url": "https://path/to/mvf.zip",
"updated_at": "2024-09-07T08:10:07.858Z",
"locale_packs": {
"ar": "https://path/to/ar.zip",
"es": "https://path/to/es.zip",
"th": "https://path/to/th.zip"
}
}
```
--------------------------------
### Install Deck.gl and Related Packages
Source: https://developer.mappedin.com/llms-mvfv3.txt
Installs necessary libraries for the project, including deck.gl, geojson utilities, and types for TypeScript integration.
```sh
yarn add @types/geojson jszip geojson @turf/buffer @types/adm-zip
```
--------------------------------
### Install deck.gl Dependencies
Source: https://developer.mappedin.com/llms-mvfv1.txt
Installs the core deck.gl packages, community layer types, and GeoJSON types required for rendering map data. This command is executed using yarn.
```bash
yarn add @deck.gl/core @deck.gl/layers @danmarshall/deckgl-typings @types/geojson
```
--------------------------------
### Create Mappedin Project with Vite and Install Beta
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Steps to initialize a new project using Vite and install the beta version of Mappedin JS. This is crucial for accessing features compatible with Mappedin JS v6.
```bash
yarn create vite mappedin-quickstart
cd mappedin-quickstart
yarn add @mappedin/mappedin-js@beta
```
--------------------------------
### Install @mappedin/mappedin-js Package
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Instructions for installing the Mappedin JS SDK using either npm or yarn package managers.
```bash
npm install @mappedin/mappedin-js
```
```bash
yarn add @mappedin/mappedin-js
```
--------------------------------
### Install PowerShell 7+
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
Installs the required PowerShell version 7+ using the winget package manager. Using a lower version will result in errors.
```powershell
winget install --id Microsoft.PowerShell.Preview --source winget
```
--------------------------------
### MVF Package Structure Example
Source: https://developer.mappedin.com/llms-mvfv3.txt
Illustrates a typical file and folder organization for an MVF package, including core extensions like geometry, floors, and manifest.
```text
geometry/
abcde1234.geojson
abcde1235.geojson
floors.geojson
manifest.geojson
```
--------------------------------
### Run Development Server
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Command to start the development server for the project, enabling hot-reloading for faster development cycles.
```bash
yarn run dev
```
--------------------------------
### Install @mappedin/events Package
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Provides instructions for installing the @mappedin/events package using either npm or yarn package managers.
```bash
npm install @mappedin/events
```
```bash
yarn add @mappedin/events
```
--------------------------------
### React 3D Model Mapper Import Example
Source: https://developer.mappedin.com/llms-tools.txt
This example demonstrates how to import and display 3D models from a JSON export file within a React application. It requires updating the API key, secret, map ID, and the filename of the uploaded JSON data to match your specific Mappedin setup.
```JavaScript
// Example structure for a React component using Mappedin JS SDK
// Assumes you have installed @mappedin/mappedin-js
import React, { useEffect, useRef } from 'react';
import { Map } from '@mappedin/mappedin-js';
const MapComponent = ({ apiKey, secret, mapId, modelFileName }) => {
const mapContainerRef = useRef(null);
useEffect(() => {
const initializeMap = async () => {
if (!mapContainerRef.current) return;
const map = new Map(mapContainerRef.current, {
venue: mapId,
apiKey: apiKey,
secret: secret,
});
await map.waitForLoad();
// Fetch and import models from a local JSON file
try {
const response = await fetch(`/${modelFileName}`); // Assumes JSON is in public folder
const modelData = await response.json();
await map.importModels(modelData);
console.log('Models imported successfully!');
} catch (error) {
console.error('Error importing models:', error);
}
};
initializeMap();
}, [apiKey, secret, mapId, modelFileName]);
return ;
};
export default MapComponent;
// Usage in another component:
//
```
--------------------------------
### Install Mappedin 3D Assets Library
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Provides commands to install the Mappedin 3D Assets Library, which offers a collection of optimized 3D models for use with Mappedin SDKs. Installation can be done via npm or Yarn.
```bash
npm install @mappedin/3d-assets
```
```bash
yarn add @mappedin/3d-assets
```
--------------------------------
### Vanilla TypeScript 3D Model Mapper Import Example
Source: https://developer.mappedin.com/llms-tools.txt
This example shows how to integrate exported 3D models into a project using vanilla TypeScript and the Mappedin JS SDK. Similar to the React example, you must configure your API key, secret, map ID, and the name of the uploaded JSON file.
```TypeScript
// Example structure for a TypeScript application using Mappedin JS SDK
// Assumes you have installed @mappedin/mappedin-js
import { Map } from '@mappedin/mappedin-js';
async function initializeMap(containerId: string, apiKey: string, secret: string, mapId: string, modelFileName: string): Promise {
const container = document.getElementById(containerId);
if (!container) {
console.error('Map container not found.');
return;
}
const map = new Map(container, {
venue: mapId,
apiKey: apiKey,
secret: secret,
});
await map.waitForLoad();
// Fetch and import models from a local JSON file
try {
const response = await fetch(`/${modelFileName}`); // Assumes JSON is in public folder
const modelData = await response.json();
await map.importModels(modelData);
console.log('Models imported successfully!');
} catch (error) {
console.error('Error importing models:', error);
}
}
// Example usage:
// const MY_API_KEY = 'YOUR_API_KEY';
// const MY_SECRET = 'YOUR_SECRET';
// const MY_MAP_ID = 'YOUR_MAP_ID';
// const MY_MODEL_FILE = 'mappedin-models.json';
//
// initializeMap('map-container', MY_API_KEY, MY_SECRET, MY_MAP_ID, MY_MODEL_FILE);
```
--------------------------------
### Run Microsoft Places Install Script
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
Executes the DeployPlaces script to configure Microsoft Places. Requires an account with Exchange Admin and TenantPlacesManagement roles. The script must be run as Administrator.
```powershell
Install-Script -Name DeployPlaces
DeployPlaces
```
--------------------------------
### Dynamic Focus Installation
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Dynamic Focus is now a separate package. Install it using npm or yarn before initializing it with your MapView instance.
```bash
npm install @mappedin/dynamic-focus
```
```bash
yarn add @mappedin/dynamic-focus
```
--------------------------------
### Run Project with NPM or Yarn
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Instructions on how to start the React Native project using either NPM or Yarn package managers. These commands initiate the development server.
```bash
npm run start
```
```bash
yarn start
```
--------------------------------
### Node.js Express Authentication Proxy Example
Source: https://developer.mappedin.com/llms-embed.txt
Demonstrates how to implement a self-hosted authentication proxy using Node.js and the Express framework. This proxy handles requests from the Mappedin Viewer, obtains an access token from the Mappedin API using provided credentials, and returns it to the viewer. It requires the 'express' and 'cors' packages.
```ts
import express from 'express';
import cors from 'cors';
const app = express();
const port = 443;
app.use(
cors({
origin: '*', // Be more specific in production.
methods: ['POST'],
allowedHeaders: ['Content-Type', 'Authorization'],
})
);
app.post('*', async (req, res) => {
const response = await fetch('https://app.mappedin.com/api/v1/api-key/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
key: 'YOUR_API_KEY',
secret: 'YOUR_API_SECRET',
}),
});
const data = await response.json();
return res.json(data);
});
app.listen(port, () => {
console.log(`Sandbox listening on port ${port}`);
});
```
--------------------------------
### Install @mappedin/dynamic-focus Package
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Instructions for installing the @mappedin/dynamic-focus package using npm or yarn. This package enhances Mappedin JS by enabling dynamic focus across multiple buildings within a venue.
```bash
npm install @mappedin/dynamic-focus
```
```bash
yarn add @mappedin/dynamic-focus
```
--------------------------------
### MVFv3 Core Example in TypeScript
Source: https://developer.mappedin.com/llms-mvfv3.txt
Demonstrates a basic MVFv3 object structure using TypeScript, representing a map with two floors and associated geometry. This example showcases the Core extension's manifest, floors, and geometry properties.
```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'
}
}
]
}
}
};
```
--------------------------------
### Example Location Object with Extras
Source: https://developer.mappedin.com/llms-mvfv3.txt
Illustrates a `Location` object, demonstrating the usage of the `extra` property. This example shows how custom data can be attached to a location, alongside standard properties like `id`, `geometryAnchors`, and `details`.
```ts
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: [],
};
```
--------------------------------
### Example CSV Structure for Mappedin Import
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
This is an example of the CSV file structure expected for importing asset data into Mappedin. It includes headers for PlaceId, DisplayName, Type, ParentId, and other relevant location details. Ensure your exported data conforms to this format.
```CSV
"PlaceId","DisplayName","Type","Identity","Label","PostalCode","CountryOrRegion","State","City","Street","ParentId","GeoCoordinates","Features","Phone","MTREnabled","AudioDeviceName","VideoDeviceName","DisplayDeviceName","IsWheelChairAccessible","ResourceLinks","AlternativeNames","Kind","Category","Tags","Capacity","TimeZone","TimeSegments","ExternalIds","IsManaged","BookingType","ResourceDelegates","Building","Floor","FloorLabel","Localities","HasMap","MailboxOID"
"7a91c534-8e15-42d3-9f2b-6c89d2f3e901","My Office","Building","My Office_7a91c534-8e15-42d3-9f2b-6c89d2f3e901","","N2L4E9","CA","ON","Waterloo","1 Main St.","","{ }",,,,,,,,,"{ }","System.Collections.Generic.List`1[System.String]","","","System.Collections.Generic.List`1[System.String]",,"","System.Collections.Generic.List`1[System.String]","System.Collections.Generic.List`1[System.String]",,,"System.Collections.Generic.List`1[System.String]",,,,"System.Collections.Generic.List`1[System.String]","True",
"2f5d9e67-1b3c-4a82-b5d8-9c4e7f8a2d45","Level 2","Floor","Level 2_2f5d9e67-1b3c-4a82-b5d8-9c4e7f8a2d45","","","","","","7a91c534-8e15-42d3-9f2b-6c89d2f3e901",,"{ ""SortOrder"": ""1"" }",,,,,,,"{ }","System.Collections.Generic.List`1[System.String]","","","System.Collections.Generic.List`1[System.String]",,,"System.Collections.Generic.List`1[System.String]","System.Collections.Generic.List`1[System.String]",,,"System.Collections.Generic.List`1[System.String]",,,,"System.Collections.Generic.List`1[System.String]","True",
```
--------------------------------
### Full Jetpack Compose MPIMapView Example
Source: https://developer.mappedin.com/llms-mappedin-android.txt
A complete example of a Jetpack Compose Composable that integrates MPIMapView. It includes state management for loading, a comprehensive `MPIMapViewListener` implementation, venue loading, and displays a loading indicator until the map is ready.
```kotlin
@Composable
fun MappedinComposable() {
var mapLoaded by remember { mutableStateOf(false) }
val ctx = LocalContext.current
val mapView by remember { mutableStateOf(MPIMapView(ctx)) }
val mapViewListener = object : MPIMapViewListener {
val tag = "MapViewScreen"
override fun onBlueDotPositionUpdate(update: MPIBlueDotPositionUpdate) {
Log.i(tag, "Blue Dot Position Update")
}
override fun onBlueDotStateChange(stateChange: MPIBlueDotStateChange) {
Log.i(tag, "Blue Dot State Change")
}
override fun onDataLoaded(data: MPIData) {
Log.i(tag, "Venue Data Loaded")
}
override fun onFirstMapLoaded() {
Log.i(tag, "First Map Loaded")
mapLoaded = true
}
override fun onMapChanged(map: MPIMap) {
Log.i(tag, "Map Changed")
}
override fun onNothingClicked() {
Log.i(tag, "Nothing Clicked")
}
override fun onPolygonClicked(polygon: MPINavigatable.MPIPolygon) {
Log.i(tag, "Polygon Clicked")
}
override fun onStateChanged(state: MPIState) {
Log.i(tag, "State Changed")
}
}
AndroidView(
factory = {
mapView.layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT,
)
mapView.loadVenue(
MPIOptions.Init(
"5eab30aa91b055001a68e996",
"RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1",
"mappedin-demo-mall",
),
) { Log.e("MappedinComposable", "Error loading map view") }
mapView.listener = mapViewListener
mapView
},
)
if (!mapLoaded) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center,
) {
Row(verticalAlignment = Alignment.CenterVertically) {
CircularProgressIndicator()
}
} }
}
```
--------------------------------
### MVF Node Specification Example
Source: https://developer.mappedin.com/llms-mvfv3.txt
Provides a JSON example of the MVF Node structure, detailing a FeatureCollection of nodes with properties like ID, coordinates, neighbors, and associated geometry IDs. This defines the pathfinding network within a floor.
```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"]
}
}
]
}
}
}
```
--------------------------------
### Install Mappedin 3D Assets Library
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Provides commands to install the Mappedin 3D Assets Library using either NPM or Yarn package managers. This library contains optimized 3D models for use with Mappedin JS.
```bash
npm install @mappedin/3d-assets
```
```bash
yarn add @mappedin/3d-assets
```
--------------------------------
### Mappedin Deep Linking - Wayfinding
Source: https://developer.mappedin.com/llms-embed.txt
Enables users to initiate wayfinding directly from a deep link. Links can specify only a destination or both a departure and destination location.
```APIDOC
Wayfinding Deep Links:
Wayfinding Without a Departure Location:
URL: https://app.mappedin.com/map//directions?location=
Description: Links to a map with wayfinding initiated, prompting the user to select a departure location.
Parameters:
location: The ID or name of the destination location.
Example:
https://app.mappedin.com/map/66686f1af06f04000b18b8fa/directions?location=s_c550a911f7112193
Wayfinding With a Departure Location:
URL: https://app.mappedin.com/map//directions?location=&departure=
Description: Links to a map with wayfinding pre-configured from a specific departure location to a destination.
Parameters:
location: The ID or name of the destination location.
departure: The ID or name of the departure location.
Example:
https://app.mappedin.com/map/66686f1af06f04000b18b8fa/directions?location=s_c550a911f7112193&departure=s_fea8f06e5dc5728d
```
--------------------------------
### Search Query Example
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Shows how to perform a search query using the updated Mappedin.MapData.search() method and the structure of the returned results, which are more organized in v6.
```ts
const results = mapData.Search.query('levis');
// results structure:
// {
// places: SearchResultPlaces[];
// enterpriseLocations?: SearchResultEnterpriseLocations[];
// enterpriseCategories?: SearchResultEnterpriseCategory[];
// }
```
--------------------------------
### MVF Kinds Schema and Example
Source: https://developer.mappedin.com/llms-mvfv3.txt
Explains the Kinds extension, which categorizes geometry within an MVF using a predefined KIND enum. It includes schema details for geometry kinds and a JSON example.
```APIDOC
MVF Kinds Extension:
Adds a 'kinds' property to the MVF, mapping FloorId to GeometryKinds.
GeometryKinds:
Structure: A record of GeometryId to Kind.
Kind:
Type: SafeStringEnum (e.g., 'room', 'hallway', 'wall', 'area', 'unknown').
Description: A high-level categorization for geometry. Applications must handle 'unknown' gracefully if MVF version is not supported.
```
```json
{
"kinds": {
"f_000001": {
"g_000001": "room",
"g_000002": "hallway"
}
}
}
```
--------------------------------
### Connect to Microsoft Places
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
Establishes a connection to the Microsoft Places service. This command is the first step in interacting with Microsoft Places data using PowerShell. Ensure you have the necessary permissions and that PowerShell 7+ is installed.
```PowerShell
Connect-MicrosoftPlaces
```
--------------------------------
### Mappedin Wayfinding URL Parameters
Source: https://developer.mappedin.com/llms-embed.txt
Defines URL parameters for initiating wayfinding from a specific coordinate. It requires a base URL with `/directions`, a `location` ID or name, and a `departure` coordinate.
```APIDOC
Mappedin Wayfinding URL Parameters:
Base URL Structure:
`https://app.mappedin.com/map//directions?location=&departure=,`
Parameters:
- `location`: The ID or name of the destination location within the map.
- `departure`: The starting coordinate for the wayfinding, formatted as `latitude,longitude`.
Example:
`https://app.mappedin.com/map/66686f1af06f04000b18b8fa/directions?location=s_bc5349f37474ed3d&departure=43.64670758391629,-79.38658289339867`
```
--------------------------------
### Camera State and Positioning
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Covers fixes related to the initial camera setup and runtime adjustments, ensuring smooth and accurate camera behavior.
```APIDOC
Camera State Management:
- Description: Resolved issues with initial camera positioning and state. Also fixed issues with camera projection after adjusting zoom levels. Cursor state updates after camera animations are now also fixed.
```
--------------------------------
### Compose MPIMapView Setup with Listener
Source: https://developer.mappedin.com/llms-mappedin-android.txt
Demonstrates how to create an MPIMapView within a Jetpack Compose Composable using `remember` and `mutableStateOf`. It also shows the implementation of the `MPIMapViewListener` interface to handle map events.
```kotlin
@Composable
fun MappedinComposable() {
val ctx = LocalContext.current
val mapView by remember { mutableStateOf(MPIMapView(ctx)) }
val mapViewListener = object : MPIMapViewListener {
val tag = "MapViewScreen"
override fun onDataLoaded(data: MPIData) {
Log.i(tag, "Venue Data Loaded")
}
override fun onFirstMapLoaded() {
Log.i(tag, "First Map Loaded")
}
//Implement the rest of the MPIMapViewListener methods…
}
}
```
--------------------------------
### Enable Search on Map Initialization
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Shows the recommended way to enable the search functionality by configuring it during the map data initialization. This approach ensures search is ready from the start.
```typescript
const mapData = await getMapData({
options,
search: {
enabled: true,
},
});
```
--------------------------------
### Get Turn-by-Turn Directions
Source: https://developer.mappedin.com/llms-mappedin-android.txt
Requests turn-by-turn directions between a departure and destination point. The retrieved instructions can be used to guide users through the map.
```Kotlin
var instructions = listOf()
mapView.getDirections(to = destination, from = departure) {
directions ->
directions?.instructions?.let { instructions = it }
}
```
--------------------------------
### Get Directions (Multi-Destination)
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Demonstrates how to retrieve directions between a start point and multiple destinations using the new MapViewControl.getDirectionsMultiDestination() method in v6, replacing the v5 approach.
```ts
const directions = getDirectionsMultiDestination(start, [dest1, dest2]);
```
--------------------------------
### Omnivex Ink Integration Steps
Source: https://developer.mappedin.com/llms-integrations.txt
Guide for integrating Mappedin maps into Omnivex Ink digital signage. This involves creating an app, adding a web component, embedding the Mappedin URL, adjusting layout, previewing, and publishing.
```Omnivex Ink
1. Create a New App in Omnivex Ink.
2. Add a 'Web' component to the canvas.
3. Paste the Mappedin URL into the Web component's Source property.
4. Adjust canvas dimensions (e.g., 1920x1080 for Landscape).
5. Preview the map integration.
6. Publish the app and schedule content display.
```
--------------------------------
### Initialize Mappedin Web App
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
Sets up the necessary HTML element and the global `window.mappedin` JavaScript object with credentials and venue information to initialize the Mappedin Web App. The map will expand to fit its parent container.
```javascript
```
--------------------------------
### Get Venue Data (TypeScript)
Source: https://developer.mappedin.com/llms-embed.txt
Retrieves venue data, likely for use in embedding or interacting with the Mappedin map. This snippet demonstrates a basic JavaScript/TypeScript function call.
```ts
const venue = getVenue();
```
--------------------------------
### Load Venue with Initialization and Display Options
Source: https://developer.mappedin.com/llms-mappedin-ios.txt
Demonstrates how to load a venue into the MPIMapView using initialization options, including client credentials and venue ID. It also shows how to configure display properties like background color and initial location labeling.
```swift
mapView.loadVenue(options:
MPIOptions.Init(
clientId: "5eab30aa91b055001a68e996",
clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1",
venue: "mappedin-demo-mall"),
showVenueOptions: MPIOptions.ShowVenue(
labelAllLocationsOnInit: true,
backgroundColor: "#ffffff"
))
```
--------------------------------
### Cloudflare Workers: Implement Authentication Proxy
Source: https://developer.mappedin.com/llms-embed.txt
Provides an example of implementing an authentication proxy using Cloudflare Workers. The `fetch` event handler makes a POST request to the Mappedin token endpoint with the API key and secret.
```typescript
export default {
async fetch(request, env, ctx) {
const response = await fetch('https://app.mappedin.com/api/v1/api-key/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
key: '$KEY',
secret: '$SECRET',
}),
});
return response;
},
};
```
--------------------------------
### Mappedin Event Data Structure (JSON)
Source: https://developer.mappedin.com/llms-data-sync.txt
Provides a JSON schema example for representing events or promotions in the Mappedin Digital Directory. It includes essential fields like name, externalId, type, start and end dates, and optional fields such as location, show date, description, and image key.
```JSON
[
{
"name": "Event",
"externalId": "vN7m3kH9rU1Mxxz",
"location": "NqtdVzVkfrCkDtODwnWb",
"type": "event",
"startDate": "1577854816800",
"endDate": "1609347616800",
"showDate": "1577854816800",
"description": "Sample of an event",
"imageKey": "http://www.example.com/Example-event-image-filename-that-changes-if-the-file-changes.jpg"
},
{
"name": "Promotion",
"externalId": "QZd6cuI7raKDFiD",
"type": "promotion",
"startDate": "1577854816800",
"endDate": "1609347616800"
}
]
```
--------------------------------
### Create Vite Project with TypeScript
Source: https://developer.mappedin.com/llms-mvfv3.txt
Command to initialize a new vanilla Vite project using TypeScript. This sets up the basic project structure for developing the application.
```sh
yarn create vite mappedin-mvf-guide
cd mappedin-mvf-guide
```
--------------------------------
### Install Mappedin SDK for React Native (Yarn)
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Installs the Mappedin SDK for React Native (alpha version) and its peer dependencies using Yarn. It's crucial to use the '@alpha' tag for version 6 and to ensure React Native Web is also installed.
```bash
cd my-mappedin-app
yarn add @mappedin/react-native-sdk@alpha
yarn add react react-native react-native-webview
```
--------------------------------
### Install Mappedin SDK for React Native (NPM)
Source: https://developer.mappedin.com/llms-mappedin-react-native.txt
Installs the Mappedin SDK for React Native (alpha version) and its peer dependencies using NPM. It's crucial to use the '@alpha' tag for version 6 and to ensure React Native Web is also installed.
```bash
cd my-mappedin-app
npm install @mappedin/react-native-sdk@alpha
npm install react react-native react-native-webview
```
--------------------------------
### Initialize MPIMapView and Load Venue in ViewController
Source: https://developer.mappedin.com/llms-mappedin-ios.txt
A complete `ViewController` implementation demonstrating the initialization of an `MPIMapView` and the subsequent loading of venue data with specified options when the view controller's view loads.
```swift
import UIKit
import Mappedin
class ViewController: UIViewController {
var mapView: MPIMapView?
override func viewDidLoad() {
super.viewDidLoad()
mapView = MPIMapView(frame: view.frame)
if let mapView = mapView {
self.view.addSubview(mapView)
mapView.loadVenue(options:
MPIOptions.Init(
clientId: "5eab30aa91b055001a68e996",
clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1",
venue: "mappedin-demo-mall"),
showVenueOptions: MPIOptions.ShowVenue(
labelAllLocationsOnInit: true,
backgroundColor: "#ffffff"
))
}
}
}
```
--------------------------------
### Initialize 3D Map with Camera Options
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Demonstrates how to initialize the 3D map using `show3dMap` and set initial camera properties such as bearing, pitch, and zoom level.
```ts
await show3dMap(document.getElementById('mappedin-map'), mapData, {
bearing: 45,
pitch: 45,
zoomLevel: 19,
});
```
--------------------------------
### Venue JSON Example
Source: https://developer.mappedin.com/llms-data-sync.txt
An example of a Venue object represented in JSON format, demonstrating the structure and typical values for its properties.
```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"
}
]
}
]
```
--------------------------------
### Mappedin SDK Initialization and Venue Loading Options
Source: https://developer.mappedin.com/llms-mappedin-android.txt
Details the options available for initializing the Mappedin SDK and loading venue data. MPIOptions.Init requires essential credentials like clientID, clientSecret, and venueSlug. MPIOptions.ShowVenue allows configuration of rendering features such as multiBufferRendering and xRayPath.
```APIDOC
MPIOptions.Init(clientID: String, clientSecret: String, venueSlug: String)
- Initializes the Mappedin SDK with necessary credentials.
- Parameters:
- clientID: Your unique Mappedin client identifier.
- clientSecret: Your Mappedin client secret for authentication.
- venueSlug: The unique slug identifying the venue to load.
MPIOptions.ShowVenue(multiBufferRendering: Boolean = false, xRayPath: Boolean = false)
- Configures how the venue is displayed.
- Parameters:
- multiBufferRendering: Enables multi-buffer rendering, a prerequisite for X-Ray Paths. Defaults to false.
- xRayPath: Enables X-Ray Paths, making paths visible through obstacles. Defaults to false. Requires multiBufferRendering to be true.
loadVenue(initOptions: MPIOptions.Init, showOptions: MPIOptions.ShowVenue, callback: (Error?) -> Unit)
- Loads the specified venue with the given initialization and display options.
- Parameters:
- initOptions: Configuration for SDK initialization.
- showOptions: Configuration for venue display features.
- callback: A function to be called upon completion, receiving an error object if loading fails.
```
--------------------------------
### Run Project Commands
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Provides commands to run the Mappedin JS SDK project with hotloading enabled. It includes instructions for both Yarn and NPM package managers, typically starting a development server at http://127.0.0.1:5173.
```sh
yarn run dev
```
```sh
npm run dev
```
--------------------------------
### Create Vite Project with NPM and Mappedin React SDK (Shell)
Source: https://developer.mappedin.com/llms-mappedin-js.txt
Provides the shell commands to create a new project using Vite with the React TypeScript template and install the Mappedin React SDK using NPM.
```shell
npm create vite@latest mappedin-quickstart -- --template react-ts
cd mappedin-quickstart
npm add @mappedin/react-sdk
```
--------------------------------
### Configure and Load Mappedin Minimap
Source: https://developer.mappedin.com/llms-enterprise-apps.txt
JavaScript configuration object and script tag to initialize the Mappedin Minimap on a web page. The `window.mappedin` object holds essential credentials and venue details required for Minimap to function.
```javascript
window.mappedin = {
clientId: "",
clientSecret: "",
venue: "",
fullMapUrl: "