Links
Creating a kiosk link
Go to "Kiosks" and choose "+Add Kiosk".
Name the kiosk and choose the floor where the kiosk is. The system will choose the place automatically and fills in the latitude and longitude. Then choose desired zoom, pitch (the angle of how the map is displayed, recommendation 26) and bearing (which direction you want the map to be displayed in the kiosk).
Adding bounds: Put the map to the zoom level you want it to be in the kiosk. Create a POI to the left corner and get the coordinates by clicking the POI and going to RAW GEOJSON (these go to the first bounds). Then create another POI to the right corner and get the coordinates for that POI (these will be the second bounds).
Example: [[55.29035960943065,25.226712652593804],[55.29293009106567,25.22823702656723]]
Press submit and you have your kiosk created. The link of the kiosk is: https://maps.proximi.io/MyMap/?kiosk=nameofthekiosk
Sharing kiosk links
The format of sharing links works like this:
The link format is as following: https://maps.proximi.io/MyMap/?startFeature=e4bd63d9-c46c-4db8-ber1-dd07e08g9c23
This link format also supports external IDs that have been added under the "remote ID" field of the POI.
Fixed destination - POI
Add the Point of Interest that you want to use as the fixed starting point on the Proximi.io Management Portal. Copy the POI ID by using this button:
The link format is as following: https://maps.proximi.io/MyMap/?remote_id=e4bd63d9-c46c-4db8-ber1-dd07e08g9c23
Entire route
Add both the remote_id and the startFeature:
https://maps.proximi.ae/MyMap/?remote_id=de721309-e8d1-4d62-9147-f9afdd154c38&startFeature=3083b7fb-6f4c-4430-abea-f39e6ea6e490
QR codes
If you want to use direct QR codes, you can follow this method:
From Proximi.io:
You can screenshot the QR codes from the Proximi.io map directly.
Tips for taking high quality screenshot on Chrome:
- Go to Developer Tools via clicking the settings (three dots) -> More Tools -> Developer Tools
Go to settings
Select "Devices" and add a new custom device. Use your screen's dimensions and add a suitable device pixel ratio. 4 or 8 give good results, depending on how large screenshots you need.
Close the settings and click on the "Toggle Device Toolbar" icon. Then select your new device from the dropdown menu.
Click on the three dots and select "Capture screenshot". The resulting screenshot will be saved on your computer.
From Chrome
Chrome has a built-in QR code generator. You can find it under the menu (three dots) -> "Cast, save and share" -> "Create QR code"
You can then download the resulting QR code
Iframes
The simplest way to integrate to your website is through an iframe. Use this format, otpimize to your website:
<iframe width="100%" height="1100px" frameborder="0" src="https://maps.proximi.io/URL" allow="geolocation 'self' *" style="max-height: calc(100vh - 100px);"></iframe>
PostMessage API
There is also a built-in postMessage api that allows you to set destination dynamically. Tt's possible to run window.postMessage({type: 'SET_DESTINATION', id: "feature_id"}). You can use id, title or remote_id as the ID. It's also possible to call that function from browser developer console for testing
Other URL parameters
https://maps.proximi.io/yourmap?content=route Opens a direct view to route creation window
https://maps.proximi.io/yourmap?allowSave=true Save button to send route data to mobile
Sending data back to mobile app via PostMessages
In React Native it should work like this:
import { WebView } from "react-native-webview";
import React from "react";
export default function MyWebviewScreen() {
return (
<WebView
source={{ uri: "https://maps.globalvillage.ae" }}
onMessage={(event) => {
console.log("Message from WebView:", event.nativeEvent.data);
// handle data here
}}
/>
);
}
android native
class NativeBridge(private val handler: (String) -> Unit) {
@JavascriptInterface
fun postMessage(message: String) {
handler(message)
}
}
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(
NativeBridge { message ->
Log.d("WebView", "Message from JS: $message")
// handle the JS message
},
"Android" // important name!
)
ios native
import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {
override func viewDidLoad() {
super.viewDidLoad()
let contentController = WKUserContentController()
contentController.add(self, name: "iosHandler")
let config = WKWebViewConfiguration()
config.userContentController = contentController
let webView = WKWebView(frame: view.bounds, configuration: config)
view.addSubview(webView)
let url = URL(string: "https://maps.globalvillage.ae")!
webView.load(URLRequest(url: url))
}
// Receive messages from JS
func userContentController(
_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage
) {
print("JS sent message:", message.body)
// handle the message
}
}