Quick start - Pointr Web SDK¶

To see our Web SDK in work you can Download a Working Project or use our Web Playground.

Prerequisites¶

An HTML file that contains links to pointrwebsdk.js and pointr.css
apiUrl
clientInternalIdentifier
clientSecret

Note

To obtain these credentials please contact your Pointr Project Manager or use the sample credentials in our sample project.

Add the SDK to your own project¶

Add the link for Pointr style, jquery and pointrwebsdk script inside head tag

<head>
  ...
  <link
    href="https://pointr-websdk.azureedge.net/8.14.0/css/pointr.css"
    rel="stylesheet"
  />
  <script
    type="text/javascript"
    src="https://pointr-websdk.azureedge.net/8.14.0/pointrwebsdk.js"
  ></script>
</head>

On document ready, create an object of PointrWebSDK.Options with apiUrl, clientInternalIdentifier and clientSecret.
Create PointrWebSDK.MapWidget(options) object with options you created in previous step.

Display Map¶

Call start function of the MapWidget object

document.addEventListener("DOMContentLoaded", function () {
        const options = new PointrWebSDK.Options({
          container: "pointr-map",
          apiUrl: "https://sample-app-v8-api.pointr.cloud", // Replace with your API URL
          clientInternalIdentifier: "72df7035-cdea-4c19-93b8-6deff5177894", // Replace with your Client Internal Identifier
          clientSecret: "c93f0101-36ed-4129-8f95-558f4cd8e82f", // Replace with your Client Secret Key
          siteInternalIdentifier: 2, // Optional field
        });
        const pointrWeb = new PointrWebSDK.MapWidget(options);
        pointrWeb.start();
      });

This code will add Pointr Web SDK to the container with id “pointr-map” (will create if cannot find).
If everything is running successfully, your site or building maps (along with the points of interest) should be displayed on the browser.

Options¶

Required Options:¶

By minimum, you need to set these options:

apiUrl: URL of your Pointr Cloud instance
clientInternalIdentifier: clientInternalIdentifier provided by Pointr_
clientSecret: clientSecret provided by Pointr

Extra options¶

Option	Type	Default Value	Description
buildingExternalIdentifier	String	null	External ID value of the building to initialize Pointr Web SDK. If this is provided, the map will start displaying that building. It requires siteInternalIdentifier as a prerequisite.
buildingInternalIdentifier	Integer	null	Internal ID value of the building to initialize Pointr Web SDK. If this is provided, the map will start displaying that building. It requires siteInternalIdentifier as a prerequisite.
categories	Array of objects	null	This option is only available on v8.3.x. Please use sdk configuration from dashboard if you’re v8.4.0 or newer version user. A structured object to create a quick directory using predefined categories and filters for easier navigation. For more information check the Quick Directory guideline. Prerequisite: shouldEnableSearch should be true.
container	String	“pointr-map”	ID of the DOM element to insert Pointr maps.
highlightPoiIdentifier	String	null	Point of interest (POI) ID to initialize Web SDK. If provided map will highlight given POI and it will zoom to POI and it will display details of poi. To use highlightPoiIdentifier it is required to add siteInternalIdentifier and buildingInternalIdentifier.
initialZoomLevel	Float	null	Starting zoom level for the map. It should be between mapMaxZoom and mapMinZoom. At low zoom levels, a small set of map tiles covers a large geographical area. At higher zoom levels, a larger number of tiles cover a smaller geographical area.
languageCode	String	“en_US”	Language code application will use if browser language isn’t a supported language.
languageList	Array of strings	[] Note: It means all supported languages	- Available after v8.2.0. (Arabic available after v8.8.0) - All possible language codes: `["en_GB", "en_US", "de", "fr", "el", "es", "hi", "ar", "tr", "pt", "zh_CN", "zh_TW"]` Note: Check here to see all languages.
levelIndex	Integer	null	level index value of the level to initialize Pointr Web SDK. If this is provided, the map will start displaying that level. It requires buildingInternalIdentifier as a prerequisite.
mapMaxZoom	Float	23 Note: Max: 23	Maximum zoom (tile) level supported for the map.
mapMinZoom	Float	1 Note: Min: 1	Minimum zoom (tile) level supported for the map.
navigationDestinationPoi	String	null	POI ID to set destination POI for Directions (navigation).
navigationStartPoi	String	null	POI ID to set the start POI for Directions (navigation).
shouldEnableLanguageSelector	Boolean	false	Available after v8.2.0. Flag to enable / disable language selector view. Language selector doesn’t affect to language on the map it only replaces static texts. When it is enabled it uses browser’s language. If browser’s language isn’t a supported language it starts with languageCode option. If no languageCode is provided it uses default language(English (USA))
shouldEnableNavigation	Boolean	true	Flag to enable / disable routing directions (navigation).
shouldEnablePoiDetails	Boolean	true	Flag to enable / disable POI Details View. Note: You can still get POI details by using the relevant Apis. This flag merely affects whether to display (or not) the default PoiDetailsView component on the screen.
shouldEnableSearch	Boolean	true	Flag to enable / disable SearchView. Note: You can still perform a search by calling the search(…) API. This flag merely affects whether to display (or not) the default SearchView component on the screen.
shouldEnableZoomControls	Boolean	true	Flag to enable / disable Zoom Controls. Note: You can still zoom by using the relevant Apis. This flag merely affects whether to display (or not) the default ZoomSelectorView component on the screen.
shouldStartAccessibilityEnabled	Boolean	false	Flag to enable accessibility toggle.(Available after v8.14.0)
siteExternalIdentifier	String	null	External ID value of the site to initialize Pointr Web SDK. If this is rovided, the map will start displaying that site.
siteInternalIdentifier	Integer	null	Internal ID value of the site to initialize Pointr Web SDK. If this is provided, the map will start displaying that site.

Methods and models on “PointrWebSDK”¶

Methods and Models	Description
MapWidget	Main object on Pointr Web SDK which accepts Options object and provides high-level methods.
Options	Options model class which accepts parameters to start Pointr Web SDK with
LatLng	LatLng model class which accepts dictionary with lat and lng keys
Level	Level model class accepts dictionary with levelIndex, levelTitle, and levelDescription keys
Site	Site model class which accepts dictionary with siteInternalIdentifier, siteExternalIdentifier, and buildings keys
Building	Building model class which accepts dictionary with buildingTitle, buildingExternalIdentifier, buildingInternalIdentifier, siteInternalIdentifier, and levels keys
Feature	A geojson feature model. Accepts properties, geometry, id
Poi	Points of interest model. Accepts data with properties and geometry
NavigationModes	To set navigation modes: DEFAULT, COMFORTABLE, ACCESSIBLE
CircleLayer	Layer for custom drawing. Please check this page
FillExtrusionLayer	Layer for custom drawing. Please check this page
FillLayer	Layer for custom drawing. Please check this page
SymbolLayer	Layer for custom drawing. Please check this page
Popup	Marker Popup.Please check this page

Available Languages and Language Codes¶

English (US): “en_US”
English (UK): “en_GB”
German: “de”
French: “fr”
Greek: “el”
Spanish: “es”
Hindi: “hi”
Turkish: “tr”
Portuguese: “pt”
Chinese (Simplified): “zh_CN”
Chinese (Traditional): “zh_TW”

Known Limitations¶

Pointr Web SDK has a different purpose compared to Pointr Mobile SDK, most of its limitations are tied to the limitations of browsers themselves. As such our two different SDKs have different possible uses.

The first major limitation is the fact that Pointr Maps Platform technology relies on Bluetooth (Low Energy variant) to calculate the Bluedot position, but the HTML standards for Bluetooth are not finished yet, and considered highly experimental, only some browsers accept it. On Apple mobile devices no browsers allow it, thus the Web SDK is not able to do Bluedot location, realtime wayfinding or generating notifications based on positioning.

The second major limitation is that on mobile devices browsers are not allowed to do processing while their User Interface is not visible on the screen, as such the Web SDK doesn’t attempt to do anything on the “background”.

A final limitation is tied to offline capabilities, major browsers (including Chrome and Firefox) removed some features that were needed for offline capabilities, as such Pointr WebSDK has no official support for working offline.

What can be done with WebSDK and where it excels, is display maps on kiosks or websites, and displays static wayfinding routes. This is commonly used as an interactive diagram for visitors to find their path while interacting with a wall-mounted display.

Last update: September 9, 2024