UPCS.mount Options Explained

UPCS.mount(selector, options) renders the map into an element and returns a handle. After loading https://api.upcs.io/api/embed/upcs-embed.js, the global UPCS object is available.

The call

const map = UPCS.mount('#upcs-map', {
  sessionToken: token,
  height: '500px',
  center: { lat: 31.5204, lng: 74.3587 },
  zoom: 12,
  style: 'streets',
  onReady: function () {},
  onSelect: function (result) {},
  onError: function (err) {}
});

center is an object with lat and lng; the coordinates above are only an example.

Options

Option	Purpose
sessionToken	The session_token from your server. Required.
height	Height of the embedded map, for example 500px.
center	Where the map starts, as { lat, lng }.
zoom	Starting zoom level. The cell grid shows from zoom 18.
style	streets (default), satellite, traffic or biking.
onSelect	Called with the result when the visitor picks a location.
onError	Called when something fails, including an expired session.
onReady	Called when the map has loaded.

Callbacks

onSelect receives JSON with success, upcs_code, latitude, longitude, address, country_code, cell, saved and share_url. See handling the onSelect response.

onError is where you detect session_expired and request a new token; see handling onError and session_expired.

The returned handle

UPCS.mount returns { iframe, destroy() }. Keep it in a variable so you can call destroy() when a single-page app unmounts the component; see embed lifecycle: mount and destroy.

Choosing sensible values

Start with the default streets style and a height that fits your layout on phones as well as desktops. Use satellite when users need to recognise buildings. Set a center near your typical customers so they do not have to pan far.