Maptoolkit Maps JS Examples

Add zoom, compass, scale, fullscreen, and geolocation controls to a Maptoolkit map using built-in control classes.

Place a default Maptoolkit Marker at a fixed coordinate on an interactive map.

Show a Maptoolkit Popup with custom HTML content at a fixed geographic coordinate.

Animate the Maptoolkit map camera to a new location with a smooth arc-based fly-to transition.

Fit a Maptoolkit map view to a geographic bounding box using fitBounds with optional padding.

Initialize a Maptoolkit map with a custom pitch and bearing to set a tilted or rotated starting view.

Render real 3D terrain elevation on a Maptoolkit map using a raster-dem source and terrain exaggeration.

Add a hillshade layer to a Maptoolkit map to show terrain relief using shaded elevation data.

Render a Maptoolkit vector map as a 3D globe using the globe projection setting.

A Mapbox GL JS map ported to Maps JS and running, with every line that changes marked and the rest shown untouched.

Place a default Maptoolkit Marker at a fixed coordinate on an interactive map.

Show a Maptoolkit Popup with custom HTML content at a fixed geographic coordinate.

Attach a Maptoolkit Popup directly to a Marker so it opens and closes when the marker is clicked.

Create a Maptoolkit Marker that the user can drag to any location, with live coordinate feedback.

Show a Maptoolkit Popup with the clicked coordinates whenever a user clicks anywhere on the map.

Show a Maptoolkit Popup with feature properties when the user hovers over a point on the map.

Load a custom icon image into the map sprite and render it as a symbol layer on a Maptoolkit map.

Create a pulsing animated icon on a Maptoolkit map using a custom image drawn with the Canvas 2D API.

Smoothly animate a Maptoolkit Marker along a path by updating its position on each animation frame.

Select a different icon for each point from a property, so one symbol layer covers every category.

Render real 3D terrain elevation on a Maptoolkit map using a raster-dem source and terrain exaggeration.

Add a hillshade layer to a Maptoolkit map to show terrain relief using shaded elevation data.

Render a multidirectional hillshade layer on a Maptoolkit map to reveal terrain detail from all directions.

Extrude building footprints into 3D on a Maptoolkit map using fill-extrusion layers and height data.

Create a 3D indoor floor plan on a Maptoolkit map by extruding GeoJSON room polygons with fill-extrusion layers.

Combine Maptoolkit raster satellite tiles with 3D terrain elevation for a photorealistic mountain map view.

Draw labelled elevation contour lines on a Maptoolkit map from the contours vector tile source, with heavier index contours.

Place three.js GLTF models on a Maptoolkit map that has 3D terrain enabled, keeping models anchored to the elevated surface.

Load and render a 3D Tiles dataset on a Maptoolkit map using a three.js custom layer.

Place a GLTF 3D model at a geographic location on a Maptoolkit map using a three.js custom layer.

Render a GLTF 3D model with realistic shadow casting on a Maptoolkit map using three.js.

Load one model and draw it at hundreds of positions with instanced rendering, in a single custom layer.

Drive a three.js light from the real solar position for a date, time and location, so the shadow means something.

Calculate a car route and draw it on a Maptoolkit map with turn-by-turn markers.

Drag A or B to reroute, and hover a step to see it on the map.

Search for a place using the Geocoding API and fly to the result on a Maptoolkit map.

Show a draggable isochrone area on a Maptoolkit map using the built-in IsochroneControl.

Show a route with an interactive elevation profile on a Maptoolkit map.

Add a temperature heat map layer from the Weather API to a Maptoolkit map.

Request a hiking route from the Routing API and chart its climb with the Maptoolkit elevation profile widget.

Calculate total ascent, descent and the steepest section of a route from one Elevation API request.

Colour a cycling route by what it runs on, using road surface data from the Route Enhancement API.

Turn a clicked coordinate into a street address with the Geocoding API reverse endpoint, and show it in a popup.

Stack several isochrones as shaded bands to show 5, 10 and 15 minutes on foot from one point.

Test your own points against an isochrone polygon to find which of them are reachable in time.

Clean a recorded GPX trace with the Map Matching API and draw the raw and matched lines together.

Fly the Maptoolkit map camera to a symbol feature's location when the user clicks on it.

Highlight a map feature on hover using Maptoolkit feature state and a data-driven paint expression.

Show a Maptoolkit Popup with the clicked coordinates whenever a user clicks anywhere on the map.

Show a Maptoolkit Popup with feature properties when the user hovers over a point on the map.

Display the longitude and latitude under the cursor in real time as the user moves the mouse over a Maptoolkit map.

Query all rendered Maptoolkit map features under the mouse cursor and display their properties on hover.

Display a Maptoolkit Popup with GeoJSON feature properties when the user clicks on a polygon layer.

Create a draggable GeoJSON point on a Maptoolkit map layer using mousedown, mousemove, and mouseup events.

Place points by clicking a Maptoolkit map and measure the total distance between them using Turf.js.

Move a symbol layer feature to the current mouse position on every mousemove event on a Maptoolkit map.

Detect WebGL support before initializing a Maptoolkit map and show a fallback message when it is unavailable.

Click to draw a polygon and read back its area in hectares, its perimeter and the bearing of each leg.

Draw, edit and delete shapes on the map, and export them as GeoJSON.

Wire a sidebar list to the map in both directions: hover and click either one, and the other responds.

Initialize a Maptoolkit map with a custom pitch and bearing to set a tilted or rotated starting view.

Fit a Maptoolkit map view to a geographic bounding box using fitBounds with optional padding.

Animate the Maptoolkit map camera to a new location with a smooth arc-based fly-to transition.

Continuously rotate the Maptoolkit map camera around a fixed center point using a requestAnimationFrame loop.

Drive Maptoolkit map camera movements by scroll position to create a scroll-linked map storytelling effect.

Instantly jump the Maptoolkit map camera through a sequence of locations using map.jumpTo.

Customize the speed, easing, and duration of Maptoolkit camera transitions using AnimationOptions.

Automatically fit a Maptoolkit map to the bounding box of a GeoJSON LineString using fitBounds.

Lock a Maptoolkit map to a geographic bounding box so users cannot pan or zoom outside the defined area.

Prevent users from rotating a Maptoolkit map so it always stays oriented north-up.

Disable scroll wheel zoom on a Maptoolkit map so mouse scrolling over the map navigates the page instead.

Keep centre, zoom, pitch and bearing in the address bar so a view can be shared, bookmarked and reloaded.

Keep a route or a set of markers framed when the container changes size, using a ResizeObserver.

Render a Maptoolkit vector map as a 3D globe using the globe projection setting.

Render a Maptoolkit globe with a realistic atmospheric haze and sky gradient using the fog style property.

Draw custom WebGL content directly on a Maptoolkit globe using a custom layer and the map's render context.

Control the projection explicitly instead of leaving it to the automatic transition, and see where each one is right.

Update a Maptoolkit map layer's fill color at runtime using UI buttons and setPaintProperty.

Switch the display language of Maptoolkit map labels at runtime by updating the text-field expression on symbol layers.

Apply zoom-dependent color expressions to Maptoolkit building layers using interpolate style expressions.

Set map label text to uppercase, lowercase, or title case on a Maptoolkit map using the text-transform layout property.

Apply a smooth color gradient along a line layer on a Maptoolkit map using a line-gradient style expression.

Combine a line-gradient expression with line-dasharray to render a color-gradated dashed line on a Maptoolkit map.

Style Maptoolkit line layers with variable width and color driven by GeoJSON feature properties.

Insert a fill or line layer below Maptoolkit map labels to keep text legible over your data.

Fill a GeoJSON polygon with a repeating image pattern using a Maptoolkit fill-pattern layer.

Reposition the Maptoolkit attribution control to any corner of the map container using the attributionControl option.

Build a map legend from the same expression stops that colour the layer, so the two cannot drift apart.

Detect the visitor's language once at load and set every symbol layer to the matching name field, with a manual override.

Attach attribution to your own sources so every credit on the map is correct, and keep the line from collapsing.

Add an external vector tile source to a Maptoolkit map and apply custom styles to its layers.

Add an external raster tile source and display it as a layer on a Maptoolkit map.

Connect a WMS (Web Map Service) endpoint as a raster source on a Maptoolkit map.

Use an HTML canvas element as a live animated map source to overlay dynamic graphics on a Maptoolkit map.

Add a GeoJSON point source to a Maptoolkit map and render the points as a styled circle layer.

Draw a geographic circle at a radius in meters on a Maptoolkit map using a GeoJSON polygon approximation.

Render points, lines, and polygons from a single GeoJSON source using multiple Maptoolkit layer types.

Fetch live data from an external API on an interval and update a Maptoolkit map source in real time.

Update a GeoJSON feature's coordinates in real time on a Maptoolkit map by calling setData on the source.

Animate a GeoJSON point moving in a circle on a Maptoolkit map using requestAnimationFrame and setData.

Animate a growing line on a Maptoolkit map by progressively adding coordinates to a GeoJSON source.

Animate a point icon moving along a fixed route on a Maptoolkit map using Turf.js for position interpolation.

Cycle through a sequence of images on a Maptoolkit raster source to create a frame-by-frame map animation.

Visualize point density on a Maptoolkit map using a heatmap layer driven by data-driven style expressions.

Group nearby point features into clusters on a Maptoolkit map and style them by cluster size using GeoJSON clustering.

Filter GeoJSON features on a Maptoolkit map by a time value using an HTML range slider and a filter expression.

Overlay a video file at geographic bounds on a Maptoolkit map, with click-to-pause support.

Render a fully static, non-interactive Maptoolkit map by disabling all user input handlers.

Measure Maptoolkit map load time, time to idle, and frames per second using built-in performance events.

Show and hide subsets of one source with checkbox filters, without touching the data or adding layers.

Let readers dial relief shading up and down, and switch it off, with a slider and a checkbox.

Sum a property across the points in each cluster with clusterProperties, and zoom into a cluster on click.

Join a statistics table to boundary polygons by code and shade each region by its value.