Examples

Contents
  • Basic Map
    Basic Map

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

  • Basic Map (Europe)
    Basic Map (Europe)

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

  • Map Controls
    Map Controls

    Add navigation and scale controls to the map.

  • Map Styles
    Map Styles

    Map styles provide the visual styling for the map.

  • Routing
    Routing

    Display a route on the map.

  • Content Layers
    Content Layers

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

  • Custom Layers
    Custom Layers

    Build your own layers to display custom data on a map.

  • GeoJSON Point
    GeoJSON Point

    Add a point to the map using GeoJSON.

  • Marker and Popup
    Marker and Popup

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

  • Cluster Points
    Cluster Points

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

  • Style Modifications
    Style Modifications

    Make modifications to an existing map style.

  • Mouse Position
    Mouse Position

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

  • Data Driven Styles
    Data Driven Styles

    Change styling based on data source values.

  • Draggable Marker
    Draggable Marker

    Add a draggable marker to the map.

  • Filter Symbols by Text
    Filter Symbols by Text

    Filter symbols and their associated name by text input

  • Animate Point on Route
    Animate Point on Route

    Animate a point along a route using Turf.js

  • Draw Tool
    Draw Tool

    Add a tool for drawing markers and polygons

  • Heat Map
    Heat Map

    Visualize data with a heat map

  • Custom HTML Marker
    Custom HTML Marker

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

  • Draggable Marker Popup
    Draggable Marker Popup

    Add a draggable marker to the map.

  • Hide Show Markers
    Hide Show Markers

    Hide or show markers at given zoom levels.

  • Map Styles Marker
    Map Styles Marker

    Add navigation and scale controls to the map.

  • Map Styles Symbol
    Map Styles Symbol

    Map styles with symbol style marker layer on styledata event

  • Markers Routes
    Markers Routes

    Click map to find addresses and then run routes.

  • Marker Styles
    Marker Styles

    Marker styles change when mouse over or out.

  • Truck Stops POI Filter
    Truck Stops POI Filter

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

  • Interactive Routes
    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
    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

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

  • Weather Alerts
    Weather Alerts

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

  • Context Menu
    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.

  • Route Event Handling
    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.

  • Toll Detail Report
    v3 Only
    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.

  • 3D Model
    v3 Only
    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.

  • Last updated August 11, 2021.