Examples

Initialize a map in an HTML element with NMaps GL JS.

Use a custom style layer with three.js to add a 3D model to the map.

Add a canvas source to the map.

Use a custom style layer to render custom WebGL content.

Add a default marker to the map.

Toggle between current view and fullscreen mode.

Add an icon to the map that was generated at runtime.

Add a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.

Use the second argument of addLayer to add a layer below labels.

Use fill-pattern to draw a polygon from a repeating image pattern.

Style a polygon with the fill layer type.

Add a third-party raster source to the map.

Use a stretchable image as a background for text.

Render vector data provided by Mapillary.

Display a video on top of a satellite raster baselayer.

Add an external Web Map Service raster layer to the map using addSource's tiles option.

Add an animated icon to the map that was generated at runtime with the Canvas API.

Add an icon to the map from an external URL and use it in a symbol layer.

Add custom marker icons to your map.

Use realtime GeoJSON data streams to move a symbol on your map.

Draw points from a GeoJSON collection to a map.

Add a polygon and circle layer from the same GeoJSON source.

Animate a line by updating a GeoJSON source on each frame.

Animate the position of a marker by updating its location on each frame.

Animate the position of a point by updating a GeoJSON source on each frame.

Use Turf to smoothly animate a point along the distance of a line.

Use a series of image sources to create an animation.

Animate the map camera around a point.

Attach a popup to a marker and display it on click.

Use events and flyTo to center the map on a feature.

Use setPaintProperty to change a layer's fill color.

Use the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.

Use the upcase and downcase expressions to change the case of labels.

Place attribution in the top-left position when initializing a map.

Check for NMaps GL browser support.

Drag the marker to a new location on a map and populate its coordinates in a display.

Drag the point to a new location on a map and populate its coordinates in a display.

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Visualize earthquake frequency by location using a heatmap layer.

Use events and feature states to create a per feature hover effect.

Visualize earthquakes with a range slider.

Use NMaps GL JS' built-in functions to visualize points as clusters.

Customize camera animations using AnimationOptions.

Prevent users from rotating a map.

Prevent scroll from zooming a map.

Disable interactivity to create a static map.

Add a popup to the map.

When a user clicks a symbol, show a popup containing more information.

When a user hovers over a custom marker, show a popup containing more information.

Display a satellite raster baselayer.

Use extrusions to display buildings' height in 3D.

Extend clustering with HTML markers and custom property expressions.

Draw a line across the 180th meridian using a GeoJSON source.

Add zoom and rotation controls to the map.

Create a 3D indoor map with the fill-extrude-height paint property.

Filter symbols by icon name by typing in a text input.

Filter a set of symbols based on a property value in the data.

Fit the map to a specific area, regardless of the pixel size of the map.

Get the bounds of a LineString.

Use flyTo to smoothly interpolate between locations.

Scroll down through the story and the map will fly to the chapter's location.

Dynamically generate a missing icon at runtime and add it to the map.

Show mouse position on hover with pixel and latitude and longitude coordinates.

Use queryRenderedFeatures to show properties of hovered-over map elements.

Use the jumpTo function to showcase multiple locations.

Geolocate the user and then track their current location on the map using the GeolocateControl.

Click points on a map to create lines that measure distanced using turf.length.

Use the keyboard's arrow keys to move around the map with game-like controls.

Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.

Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.

Prevent a map from being panned to a different place by setting maxBounds.

Initialize a map with pitch and bearing camera options.

When a user clicks a polygon, show a popup containing more information.

Use flyTo with flyOptions to slowly zoom to a location.

Create a visualization with a data expression for line-color.

Enable or disable UI handlers on a map.

Change an existing feature on your map in real-time by updating its data.

Use a coalesce expression to display another image when a requested image is not available.

Use the localIdeographFontFamily setting to speed up map load times by using locally available fonts instead of font data fetched from the server.

Use text-variable-anchor to allow high priority labels to shift position to stay on the map.

Use a variable binding expression to calculate and display population density.