サンプル

Search

Topics

Choose topic...

Use a clip layer to replace a landmark on the map

Use a clip layer to remove a 3D building from the Mapbox Standard style and add a custom 3D model.

Use a clip layer to remove rendered features from the map

Use a clip layer to hide features rendered by other map layers.

Add a new layer to a slot

Use the slot property to add a layer to a predetermined location in the Standard and Standard Satellite styles layer stack.

Set initial map's style configuration property

Use different initial configuration properties with Mapbox Standard Style.

Initialize a map using a bounding box

Initialize a map using a bounding box instead of center and zoom.

Add a patterned line to a map

Add a line layer with a repeating pattern to the map.

Add a rain effect to a map

Add a configurable rain particle animation to a map.

Change a map's style configuration property

Use different configuration properties with Mapbox Standard Style.

Add feature-level interactions to a map

Add per-feature click and hover interactions using the addInteraction API.

Display a map on a webpage

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

Add a snow effect to a map

Add a configurable snow particle animation to a map.

Add interactions to a Mapbox Standard Style

Use click and hover interactions with Mapbox Standard Style's built-in feature states and configuration properties.

Accept coordinates as input to a geocoder

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.

Add 3D terrain to a map

Use setTerrain to add 3D terrain to a map using a raster terrain source.

Add a 3D model

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

Add a 3D model with threebox

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

Add a canvas source

Add a canvas source to the map.

Add a custom style layer

Use a custom style layer to render custom WebGL content.

Add a default marker to a web map

Add a marker to a map using the default Marker method in Mapbox GL JS.

Add a fade effect when showing and hiding a layer

Specify the duration of opacity transitions in Mapbox GL JS.

Add a fullscreen control to a map

Toggle between current view and fullscreen mode.

Add a generated icon to the map

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

Add a geocoder

Use the mapbox-gl-geocoder control to search for places using the Mapbox Geocoding API.

Add a georeferenced image

Add a georeferenced image file to your map.

Add a line to a map using a GeoJSON source

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

Add a marker using a place name

Add a marker using a place name or address for its location using the forward geocoder.

Add a new layer below labels

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

Add a pattern to a polygon

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

Add a polygon to a map using a GeoJSON source

Style a polygon with the fill layer type.

Add a raster image to a map layer

Add a radar weather image overlay on top of a dark vector map.

Add a raster tile source

Add a third-party raster source to the map.

Add a stretchable image to the map

Use a stretchable image as a background for text.

Add a third party vector tile source

Render vector data provided by Mapillary.

Add a vector tile source

Add a vector source to a map.

Add a video

Display a video on top of a satellite raster baselayer.

Add a WMS source

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

Add an animated icon to the map

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

Add an ant path animation to a line

Style a linestring with an animated dash-array to create an "ant path" effect.

Add an elevated line to a map

Add a GeoJSON line with elevation data to a map using addSource, then elevate it using addLayer’s layout properties.

Add an icon to the map

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

Add cooperative gestures to a map

Use cooperativeGestures to control scroll-to-zoom and touch-based panning.

Add custom fog to a map

Customize atmospheric styling with setFog.

Add custom icons with Markers

Add custom marker icons to your map.

Add custom vector icons

Add custom vector icons with dynamically defined color.

Add hillshading

Add raster hillshading to a map.

Add live realtime data

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

Add markers to a web map with a symbol layer

Draw points from a GeoJSON collection to a map.

Add multiple geometries from one GeoJSON source

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

Add support for right-to-left scripts

Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.

Adjust a layer's opacity

Drag the range slider to adjust the opacity of a raster layer on top of a map.

Animate 3D buildings based on ambient sounds

Make a 3D map that responds to sounds from your environment.

Animate a custom marker on appearance

Add animation effects to a custom marker as it appears on the map.

Animate a line

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

Animate a marker

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

Animate a point along a line

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

Animate a point along a route

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

Animate a series of images

Use a series of image sources to create an animation.

Animate map camera around a point

Animate the map camera around a point.

Animate the camera along a path

Use the FreeCamera API to follow a path over 3D terrain.

Animate the camera around a point with 3D terrain

Use the FreeCamera API to create a fly-over animation focused on a point.

Attach a popup to a marker instance

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

Center the map on a clicked feature

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

Change a layer's color with buttons

Use setPaintProperty to change a layer's fill color.

Change a map's language

Use setLayoutProperty to switch languages dynamically.

Change a map's style

Switch to another map style.

Change building color based on zoom level

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

Change the case of labels

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

Change the default position for attribution

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

Change worldview of administrative boundaries

Use the worldview value to adjust administrative boundaries based on the map's audience.

Check if Mapbox GL JS is supported

Check for Mapbox GL browser support.

Create a draggable Marker

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

Create a draggable point

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

Create a gradient line using an expression

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

Create a heatmap layer

Visualize earthquake frequency by location using a heatmap layer.

Create a hover effect

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

Create a rotating globe

Display your map as an interactive, rotating globe.

Create a time slider

Visualize earthquakes with a range slider.

Create a wind particle animation

Visualize wind as a particle animation on top of a map using a raster-particle layer.

Create and style clusters

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

Customize camera animations

Customize camera animations using AnimationOptions.

Disable map rotation

Prevent users from rotating a map.

Disable scroll zoom

Prevent scroll from zooming a map.

Display a map with a custom style

Use a Mapbox-hosted custom style in a Mapbox GL JS map.

Display a non-interactive map

Disable interactivity to create a static map.

Display a popup

Add a popup to the map.

Display a popup on click

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

Display a popup on hover

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

Display a satellite map on a webpage

Display a satellite raster layer on a map with Mapbox GL JS.

Display a web map using an alternate projection

Use an Albers, Lambert, Winkel Tripel, or other map projection.

Display and style rich text labels

Use the format expression to display country labels in both English and in the local language.

Display buildings in 3D

Use extrusions to display building heights in 3D.

Display HTML clusters with custom properties

Extend clustering with HTML markers and custom property expressions.

Display icons above 3D buildings

Use the symbol-z-elevate property of a symbol layer to display icons above fill extrusions and models.

Display line that crosses 180th meridian

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

Display map scale

Add a scale to the map.

Display navigation directions

Use the mapbox-gl-directions plugin to show results from the Mapbox Directions API.

Display zoom and rotation controls

Add zoom and rotation controls to the map.

Draw a polygon and calculate its area

Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.

Extrude polygons for 3D indoor mapping

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

Filter features within map view

Move the map to query viewable features in a vector tile layer and filter by typing in an input.

Filter symbols based on pitch and distance

Use pitch and distance-from-center to control symbol density for pitched maps.

Filter symbols by text input

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

Filter symbols by toggling checkboxes

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

Filter symbols using a dynamic expression

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

Fit a map to a bounding box

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

Fit to the bounds of a LineString

Get the bounds of a LineString.

Fly to a location

Use flyTo to smoothly interpolate between locations.

Fly to a location based on scroll position

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

Generate and add a missing icon to the map

Dynamically generate an image not available in a map style at runtime and add it to the map style.

Get coordinates of the mouse pointer

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

Get features under the mouse pointer

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

Highlight features containing similar data

Hover over counties to highlight counties that share the same name.

Highlight features within a bounding box

Hold the Shift key and drag the map to query features using queryRenderedFeatures.

Join local JSON data with vector tile geometries

Style a choropleth by merging local JSON data with vector tile geometries.

Jump to a series of locations

Use the jumpTo function to showcase multiple locations.

Limit geocoder results to a named region

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API limiting results to a region.

Load data from an external GeoJSON file

Add a GeoJSONSource using a URL and show the data on a map.

Localize the geocoder to a given language

Localize the mapbox-gl-geocoder control to set the UI language and improve result relevance in that language.

Locate the user

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

Measure distances

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

Navigate the map with game-like controls

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

Offset the vanishing point using padding

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

Orient markers toward the horizon

Add horizon-aligned markers to a globe.

Persist sources and layers when switching a map's base style

Use events to persist programmatically-added sources and layers when updating a map's style.

Place the geocoder input outside the map

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API attached to an element outside the map.

Play map locations as a slideshow

Autoplay the locations of boroughs in New York City.

Query terrain elevation

Make client-side terrain elevation queries.

Query terrain elevation along a line

Use Mapbox's elevation data to create an elevation profile between any two point locations.

Render world copies

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

Restrict map panning to an area

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

Select features around a clicked point

Click on the map to query features using queryRenderedFeatures.

Set a point after Geocoder result

Style a marker used to mark the location of the mapbox-gl-geocoder search result.

Set pitch and bearing

Initialize a map with pitch and bearing camera options.

Show polygon information on click

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

Slowly fly to a location

Use flyTo with flyOptions to slowly zoom to a location.

Style circles with a data-driven property

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

Style layers based on geographic inclusion

Use a 'within' expression to paint certain features of layers.

Style lines with a data-driven property

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

Style symbols based on pitch

Use the pitch expression to switch symbol styling based on the pitch of the map.

Supplement forward geocoding search results with another data source

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.

Swipe between maps

Use mapbox-gl-compare to swipe between and synchronize two maps.

Toggle interactions

Enable or disable UI handlers on a map.

Update a choropleth layer by zoom level

Display state or county population depending on zoom level.

Update a feature in realtime

Change an existing feature on your map in realtime by updating its data.

Use a custom camera animation with a geocoder

Use camera animation options with the mapbox-gl-geocoder to create a custom animation when the user selects a search result.

Use a custom render function with a geocoder

Use a custom HTML rendering function with the mapbox-gl-geocoder control to customize the dropdown menu.

Use a fallback image

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

Use different map projections for web maps

Create a map using the Albers, Equal Earth, Equirectangular, Lambert, Mercator, Natural Earth, or Winkel Tripel projections.

Use locally generated ideographs

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

Use the geocoder without a map

Use the mapbox-gl-geocoder control to search for places using Mapbox Search API without an associated map view.

Variable label placement

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

Visualize population density

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

レイヤーの表示と非表示

異なるデータセットを表示するカスタムレイヤースイッチャーを作成します。

このexampleは役に立ちましたか？