JavaScript Maps SDK

Custom Places Add-on

Contents

The Custom Places add-on adds a layer that contains any custom places that have been created in your ContentTools account. It also provides a UI control that allows place sets to be turned on or off.

CDN Example

View a working demo and follow the steps below to create your own. 

<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-customplaces-1.0.7.js"></script>
<!-- Custom Place addon reference JS -->
<link
  href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-customplaces-1.0.7.css"
  rel="stylesheet" />
<!-- Custom Place addon reference CSS -->

TrimbleMaps.APIKey = "YOUR_ACCESS_TOKEN";

const map = (window.map = new TrimbleMaps.Map({
  container: "map",
  zoom: 12.5,
  center: new TrimbleMaps.LngLat(-77.01866, 38.888),
}));

const ctrl = new TrimbleMapsControl.CustomPlaces();

// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`.

map.addControl(ctrl, "top-left");

Module Bundler Example

Install the npm package. 

npm install --save @trimblemaps/trimblemaps-customplaces

Make sure the CSS file is included in the page either by adding it to the <head> of your HTML file or importing it with your bundler.

Next, import and use the JS module in your code.

Note: Since the multiple add-ons are published in separate packages, the modules in each package are exported individually. You will import each module directly rather than using a single namespace variable of TrimbleMapsControl shown above in the CDN example. 

import TrimbleMaps from "@trimblemaps/trimblemaps-js";
import CustomPlaces from "@trimblemaps/trimblemaps-customplaces";

TrimbleMaps.APIKey = "YOUR_KEY_HERE";

const map = new TrimbleMaps.Map({
  container: "map",
  zoom: 12.5,
  center: new TrimbleMaps.LngLat(-77.01866, 38.888),
});

const ctrl = new CustomPlaces();

map.addControl(ctrl, "top-left");

Events

The Custom Places add-on allows the user to show or hide place sets. The application can react to these user interactions by registering handlers for either allcustomplacesvisibilitychange and/or customplacevisibilitychange events. 

myMap.on("allcustomplacesvisibilitychange", function (e) {
  const cpSetId = e.setIds;
  const isVisible = e.isSelected;
  console.log(
    "CP SETS Visibility Changed: ",
    cpSetId,
    "Visibility: " + isVisible,
  );
});
//when single place visibility changes customplacevisibilitychange event gets fired
myMap.on("customplacevisibilitychange", function (e) {
  const cpSetId = e.setId;
  const isVisible = e.isSelected;
  console.log(
    "CP SETS Visibility Changed: ",
    cpSetId,
    "Visibility: " + isVisible,
  );
});
Last updated September 14, 2023.
Contents