Examples
Contents
3D Model
Show a 3D model on the map using three.js. The model is Trimble-owned content from the SketchUp team. Configuration of the custom layer for a 3D model implements the CustomLayerInterface.
Animate Point on Route
Animate a point along a route using Turf.js
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.
Cluster Points
Configure the map to cluster nearby points and show a count of the clustered points.
Content Layers
Display content layers such as traffic, weather, and 3D buildings.
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.
Custom HTML Marker
Customize a marker with icon, label, tooltip, SVG icon or SVG content.
Custom Layers
Build your own layers to display custom data on a map.
Data Driven Styles
Change styling based on data source values.
Draggable Marker
Add a draggable marker to the map.
Draggable Marker Popup
Add a draggable marker to the map.
Draw Tool
Add a tool for drawing markers and polygons
Feature Intersections
This example displays a map with 25 bounded random points, and one large circle polygon. Any points that intersect with the circle are colored blue, otherwise active features default to pink and inactive features default to light blue.
Filter Symbols by Text
Filter symbols and their associated name by text input
GeoJSON Point
Add a point to the map using GeoJSON.
Heat Map
Visualize data with a heat map
Hide Show Markers
Hide or show markers at given zoom levels.
Interactive Routes
By default, routes are static. If you would like to your users to interact with the routes by moving the location of a stop or dragging the routes, you just need to set the isDraggable property of the routing layer in the constructor to true
Map Controls
Add navigation and scale controls to the map.
Map Menu
Add a Style or Layer menu to the map
Map Styles
Map styles provide the visual styling for the map.
Marker and Popup
Add a marker to the map and show a popup when the marker is clicked.
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.
Mouse Position
Track the location of the mouse pointer as it moves around the map.
Road Surface
The road surface layer allows you to display road surface conditions as a map tile overlay. (North America only)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.
Route Event Handling
The primary route events are the routeloading and route. Inside the constructor, the initial loading event happens before an added event handler. This example demonstrates how to handle route events. Drag a route to alter it, route status label changes.
Route Custom Stops
If more controlling over route stops styling is desirable, instead of using update function, construct a route with showStops setting to false, then adding custom stops icons using addStopIcon function and styling them with styleStopIcons function.
Route Event Stop Inserting
When a route is altered by dragging, mouse down location could be on one or more route legs. Client app could utilize a stopInserting event listener to insert the stop on a selected leg.
Route Line Only
Without showing origin, stops and destination, only show route line when constructing a route with showStops option sets to false.
Route Styling
When a routing layer is constructed, default route color, origin, destination, and stop icons will be used when routeColor, originIcon, destinationIcon, stopIcon route options are not provided.
Routing
Display a route on the map.
Single Search
Use TrimbleMaps Single Search API on a map
Style Modifications
Make modifications to an existing map style.
Toll Detail Report
Demonstrates how to get Europe Toll Detail Report in a route with route options trlType, trlCount, trlMaxHt, trlMaxWt, trlMaxAxles, isHybrid, emiType, minPoll.
Truck Restrictions
The truck restrictions layer allows you to display truck restrictions on the current map.
Truck Stops POI Filter
Hide and show truck stop icons an labels. Change icon sizes. Popup shows truck stop properties.
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. (North America only)