Skip to main content

Examples

Contents
  • 3D Model
    NEW
    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 Point on Route

    Animate a point along a route using Turf.js.

  • Basic Map
    Basic Map

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

  • Basic Map (Europe)
    Basic Map (Europe)

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

  • Cluster Points
    Cluster Points

    Configure the map to cluster nearby points and show a count of the clustered points at higher zoom levels.

  • Content Layers
    Content Layers

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

  • Context Menu
    Context Menu

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

  • Custom HTML Marker
    Custom HTML Marker

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

  • Custom Layers
    Custom Layers

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

  • Custom Places
    Custom Places

    Add your own places to a 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.

  • Draggable Marker Popup
    Draggable Marker Popup

    Add a draggable marker that displays a pop-up message, when clicked, to the map.

  • Draw Tool
    Draw Tool

    Add a tool for drawing markers and polygons.

  • Energy Layers
    Energy Layers

    Include the Energy Layers add-on and associated control in a map.

  • Export Map Addon
    Export Map Addon

    The Export Map addon allows is used to print a copy of the map

  • Feature Intersections
    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 by Text

    Filter symbols and their associated name by text input.

  • GeoJSON Point
    GeoJSON Point

    Add a point to the map using GeoJSON.

  • Heat Map
    Heat Map

    Visualize data with a heat map.

  • Hide Show Markers
    Hide Show Markers

    Hide or show markers at given zoom levels.

  • Highlight Selected Features
    Highlight Selected Features

    Select Places to highlight by holding shift and dragging a selection box over them.

  • Interactive Routes
    Interactive Routes

    By default, routes are static. If you would like 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.

  • Live Feature Update
    Live Feature Update

    Shows the progression of a GPS track by adding new GPS points to a feature in a line layer. This feature could be used for visualizing real-time data sources.

  • Map Controls
    Map Controls

    Add navigation and scale controls to the map.

  • Map Menu
    Map Menu

    Add a Style or Layer menu to the map.

  • Map Styles
    Map Styles

    Map styles provide the visual styling for the map.

  • Map Styles Marker
    Map Styles Marker

    With TrimbleMaps.Marker objects on the map, change map styles by calling the setStyle method.

  • Map Styles Symbol
    Map Styles Symbol

    Map styles with a symbol style marker layer on a styledata event.

  • Marker and Popup
    Marker and Popup

    Add a marker to the map and show a pop-up when the marker is clicked.

  • Markers Routes
    Markers Routes

    Click the map to find addresses and then run routes.

  • Marker Styles
    Marker Styles

    Marker styles change when you mouse over them.

  • Mouse Position
    Mouse Position

    Track the location (GPS coordinates) of the mouse pointer as it moves around the map.

  • Rich Text
    Rich Text

    Display rich text labels using a format expression. Each input of the format expression should contain either a string literal or expression.

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

    The primary route events are 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, and the route status label changes.

  • Route Custom Stops
    NEW
    Route Custom Stops

    If more control over route stops styling is desired, instead of using the update function, construct a route with showStops set to false, then add custom stops icons using the addStopIcon function and style them with the styleStopIcons function.

  • Route Event Stop Inserting
    NEW
    Route Event Stop Inserting

    When a route is altered by dragging, the mouse down location could be on one or more route legs. A client app could utilize a stopInserting event listener to insert the stop on a specific leg.

  • Route Line Only
    NEW
    Route Line Only

    Show the route line only (no stop icons) when constructing a route by setting the showStops option to false.

  • Route Modifiers
    Route Modifiers

    The route modifier layer allows you to indicate on a map roads that are configured for your company as avoids or favors.

  • Route Options
    Route Options

    There are a variety of options available to customize the route.

  • Route Styling
    NEW
    Route Styling

    When a routing layer is constructed, the default route color, origin, destination, and stop icons will be used when routeColor, originIcon, destinationIcon, stopIcon route options are not provided.

  • Routing
    Routing

    Display a route on the map.

  • Style Modifications
    Style Modifications

    Make modifications to an existing map style.

  • Toll Detail Report
    NEW
    Toll Detail Report

    This example demonstrates how to get a Europe Toll Detail Report in a route with route options trlType, trlCount, trlMaxHt, trlMaxWt, trlMaxAxles, isHybrid, emiType, minPoll.

  • Truck Restrictions
    NEW
    Truck Restrictions

    The truck restrictions layer allows you to display truck restrictions on the map.

  • Truck Stops Layer Filter
    Truck Stops Layer Filter

    Hide and show truck stop icons and labels. Change icon sizes. A pop up shows truck stop properties.

  • Weather
    Weather

    Weather layers allow you to display weather radar and satellite cloud data as overlays on the map.

  • Weather Alerts
    Weather Alerts

    The weather alerts layer allows you to display weather alerts data on the map. (North America only)

  • Last updated November 28, 2023.
    Contents