Getting Started with JavaScript Maps SDK

The JavaScript Maps SDK is a library to render interactive maps in WebGL using vector map tile data. This provides better speed, capabilities, and customization than raster tiles.

If you are looking for documentation for our earlier JavaScript 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/v2/trimblemaps-2.3.1.css" rel="stylesheet">
<script src="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.3.1.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/v2/trimblemaps-2.3.1.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>