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.2.0.css" rel="stylesheet">
<script src="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.2.0.js"></script>

Include the following code in the <body> of your HTML file.

<div id="myMap" style="height: 600px; width: 800px;"></div>

<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.

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

TrimbleMaps.APIKey = "YOUR_KEY_HERE";

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