Getting Started with JavaScript Maps SDK

Contents

With the JavaScript Maps SDK, you can embed interactive, highly customizable maps into web, mobile, and desktop applications. Our maps are built on commercial vehicle-specific data from Trimble MAPS, which allows you to plan and visualize safe, legal, and efficient routes for all types of vehicles, around the world. With features ranging from traffic data to weather alerts and road conditions, our Maps SDK is ideal for any application that demands maps for work.

The Maps SDK is available via two JavaScript libraries:

  • A library to render interactive maps in WebGL using vector map tile data—the latest generation of interactive mapping. This library is recommended for new users, as it provides better speed, capabilities, and customization than older mapping platforms. The documentation in this section covers our vector map tile offering. You can read more about the benefits of vector maps in our developer portal Features Guide.

  • Our classic library (formerly known as ALK Maps), which renders maps using raster tiles. This library is constantly updated with new images and new map data for existing users. It may be an option for select new users building maps for older devices with limited display capabilities. For documentation for our Maps SDK version with raster tiles, please visit this page.

Quickstart #

You will need an API Key to get started. After that it is just a few simple lines of code to show a map.

CDN Example #

Include the JavaScript and CSS files in the <head> of your HTML file.

<link href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.css" rel="stylesheet">
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.js"></script>

Include the following code in the <body> of your HTML file. This code instantiates a new Map object and defines the html element that will contain it.

<script>
  TrimbleMaps.APIKey = "YOUR_KEY_HERE";

  var myMap = new TrimbleMaps.Map({
    container: "myMap",
    center: new TrimbleMaps.LngLat(-96, 35),
    zoom: 3
  });
</script>

Module Bundler Example #

Install the npm package.

npm install --save @trimblemaps/trimblemaps-js

Include the JavaScript and CSS files in the <head> of your HTML file. This code instantiates a new Map object. Update the code to include the id for the div you would like the map rendered inside of.

<link href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.css" rel="stylesheet">
import TrimbleMaps from "@trimblemaps/trimblemaps-js";

TrimbleMaps.APIKey = "YOUR_KEY_HERE";

const myMap = new TrimbleMaps.Map({
  container: "myMap",
  center: new TrimbleMaps.LngLat(-96, 35),
  zoom: 3
});

The Map constructor takes an options object. The only required option attribute is the container.

The preceding example assumes that your html document contains an element with the id “myMap” as follows

<div id="myMap" style="height: 600px; width: 800px;"></div>
Last updated May 17, 2021.