Examples

Basic Map

Initialize a map in an HTML element with Trimble Maps JS SDK.

Basic Map (Europe)

Initialize a European map in an HTML element with Trimble Maps JS SDK.

Map Controls

Add navigation and scale controls to the map.

Map Styles

Map styles provide the visual styling for the map.

Routing

Display a route on the map.

Content Layers

Display content layers such as traffic, weather, and 3D buildings.

GeoJSON Point

Add a point to the map using GeoJSON.

Marker and Popup

Add a marker to the map and show a popup when the marker is clicked.

Cluster Points

Configure the map to cluster nearby points and show a count of the clustered points.

Style Modifications

Make modifications to an existing map style.

Mouse Position

Track the location of the mouse pointer as it moves around the map.

Data Driven Styles

Change styling based on data source values.

Draggable Marker

Add a draggable marker to the map.

Filter Symbols by Text

Filter symbols and their associated name by text input

Animate Point on Route

Animate a point along a route using Turf.js

Single Search

Use TrimbleMaps Single Search API on a map

Draw Tool

Add a tool for drawing markers and polygons

Heat Map

Visualize data with a heat map

Custom HTML Marker

Customize a marker with icon, label, tooltip, SVG icon or SVG content.

Draggable Marker Popup

Add a draggable marker to the map.

Hide Show Markers

Hide or show markers at given zoom levels.

Map Styles Marker

Add navigation and scale controls to the map.

Map Styles Symbol

Map styles with symbol style marker layer on styledata event

Markers Routes

Click map to find addresses and then run routes.

Marker Styles

Marker styles change when mouse over or out.

Truck Stops POI Filter

Hide and show truck stop icons an labels. Change icon sizes. Popup shows truck stop properties.

Interactive Routes

By default, routes are static. If you would like to your users to interact with the routes by moving the location of stop or dragging the routes, you just need to set the isDraggable property of the routing layer in the constructor to true

Road Surface

The road surface layer allows you to display road surface conditions as a map tile overlay. Once this layer is added, it will display a road surface data overlay that is color coded to indicate the flow of condition on the roads currently visible in the map.

Weather

Weather layers allow you to dislay weather radar and satellite clouds data overlayed on the current map.

Weather Alerts

The weather alerts layer allows your to display weather alerts data on the current map.

Context Menu

Demonstrates how to create custom context menu by right clicking in the map. The sample code handles contextmenu event to create / remove a context menu. Context menu uses translate to position it on the map.