サンプル準備はできましたか?無料アカウントを作成して、Mapboxでの構築を始めましょう。サインアップ追加の開発者リソースMapbox開発者ディスコード開発者チートシートマップボックスサポートAIに質問FiltersSearch Topics All topics3DAtmosphereBrowser supportCameraControls and overlaysExpressionsGeocoderGetting startedInternationalization supportLayersProjectionsSourcesStylesUser interactionUse a clip layer to replace a landmark on the mapUse 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 mapUse a clip layer to hide features rendered by other map layers.Add a new layer to a slotUse 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 propertyUse different initial configuration properties with Mapbox Standard Style.Initialize a map using a bounding boxInitialize a map using a bounding box instead of center and zoom.Add a patterned line to a mapAdd a line layer with a repeating pattern to the map.Add a rain effect to a mapAdd a configurable rain particle animation to a map.Change a map's style configuration propertyUse different configuration properties with Mapbox Standard Style.Display a map on a webpageInitialize a map in an HTML element with Mapbox GL JS.Add a snow effect to a mapAdd a configurable snow particle animation to a map.Accept coordinates as input to a geocoderUse the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.Add 3D terrain to a mapUse setTerrain to add 3D terrain to a map using a raster terrain source.Add a 3D modelUse a custom style layer with three.js to add a 3D model to the map.Add a 3D model with threeboxUse a custom style layer with threebox.js to add a 3D model to the map.Add a canvas sourceAdd a canvas source to the map.Add a custom style layerUse a custom style layer to render custom WebGL content.Add a default marker to a web mapAdd a marker to a map using the default Marker method in Mapbox GL JS.Add a fade effect when showing and hiding a layerSpecify the duration of opacity transitions in Mapbox GL JS.Add a fullscreen control to a mapToggle between current view and fullscreen mode.Add a generated icon to the mapAdd an icon to the map that was generated at runtime.Add a geocoderUse the mapbox-gl-geocoder control to search for places using the Mapbox Geocoding API.Add a georeferenced imageAdd a georeferenced image file to your map.Add a line to a map using a GeoJSON sourceAdd a GeoJSON line to a map using addSource, then style it using addLayer’s paint properties.Add a marker using a place nameAdd a marker using a place name or address for its location using the forward geocoder.Add a new layer below labelsUse the second argument of addLayer to add a layer below labels.Add a pattern to a polygonUse fill-pattern to draw a polygon from a repeating image pattern.Add a polygon to a map using a GeoJSON sourceStyle a polygon with the fill layer type.Add a raster image to a map layerAdd a radar weather image overlay on top of a dark vector map.Add a raster tile sourceAdd a third-party raster source to the map.Add a stretchable image to the mapUse a stretchable image as a background for text.Add a third party vector tile sourceRender vector data provided by Mapillary.Add a vector tile sourceAdd a vector source to a map.Add a videoDisplay a video on top of a satellite raster baselayer.Add a WMS sourceAdd an external Web Map Service raster layer to the map using addSource's tiles option.Add an animated icon to the mapAdd an animated icon to the map that was generated at runtime with the Canvas API.Add an ant path animation to a lineStyle a linestring with an animated dash-array to create an "ant path" effect.Add an elevated line to a mapAdd a GeoJSON line with elevation data to a map using addSource, then elevate it using addLayer’s layout properties.Add an icon to the mapAdd an icon to the map from an external URL and use it in a symbol layer.Add cooperative gestures to a mapUse cooperativeGestures to control scroll-to-zoom and touch-based panning.Add custom fog to a mapCustomize atmospheric styling with setFog.Add custom icons with MarkersAdd custom marker icons to your map.Add custom vector iconsAdd custom vector icons with dynamically defined color.Add hillshadingAdd raster hillshading to a map.Add live realtime dataUse realtime location data streams to move a symbol on your map.Add markers to a web map with a symbol layerDraw points from a GeoJSON collection to a map.Add multiple geometries from one GeoJSON sourceAdd a polygon and circle layer from the same GeoJSON source.Add support for right-to-left scriptsUse the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.Adjust a layer's opacityDrag the range slider to adjust the opacity of a raster layer on top of a map.Animate 3D buildings based on ambient soundsMake a 3D map that responds to sounds from your environment.Animate a custom marker on appearanceAdd animation effects to a custom marker as it appears on the map.Animate a lineAnimate a line by updating a GeoJSON source on each frame.Animate a markerAnimate the position of a marker by updating its location on each frame.Animate a point along a lineAnimate the position of a point by updating a GeoJSON source on each frame.Animate a point along a routeUse Turf to smoothly animate a point along the distance of a line.Animate a series of imagesUse a series of image sources to create an animation.Animate map camera around a pointAnimate the map camera around a point.Animate the camera along a pathUse the FreeCamera API to follow a path over 3D terrain.Animate the camera around a point with 3D terrainUse the FreeCamera API to create a fly-over animation focused on a point.Attach a popup to a marker instanceAttach a popup to a marker and display it on click.Center the map on a clicked featureUse events and flyTo to center the map on a feature.Change a layer's color with buttonsUse setPaintProperty to change a layer's fill color.Change a map's languageUse setLayoutProperty to switch languages dynamically.Change a map's styleSwitch to another map style.Change building color based on zoom levelUse the interpolate expression to ease-in the building layer and smoothly fade from one color to the next.Change the case of labelsUse the upcase and downcase expressions to change the case of labels.Change the default position for attributionPlace attribution in the top-left position when initializing a map.Change worldview of administrative boundariesUse the worldview value to adjust administrative boundaries based on the map's audience.Check if Mapbox GL JS is supportedCheck for Mapbox GL browser support.Create a draggable MarkerDrag the marker to a new location on a map and populate its coordinates in a display.Create a draggable pointDrag the point to a new location on a map and populate its coordinates in a display.Create a gradient line using an expressionUse the line-gradient paint property and an expression to visualize distance from the starting point of a line.Create a heatmap layerVisualize earthquake frequency by location using a heatmap layer.Create a hover effectUse events and feature states to create a per feature hover effect.Create a rotating globeDisplay your map as an interactive, rotating globe.Create a time sliderVisualize earthquakes with a range slider.Create a wind particle animationVisualize wind as a particle animation on top of a map using a raster-particle layer.Create and style clustersUse Mapbox GL JS' built-in functions to visualize points as clusters.Customize camera animationsCustomize camera animations using AnimationOptions.Disable map rotationPrevent users from rotating a map.Disable scroll zoomPrevent scroll from zooming a map.Display a map with a custom styleUse a Mapbox-hosted custom style in a Mapbox GL JS map.Display a non-interactive mapDisable interactivity to create a static map.Display a popupAdd a popup to the map.Display a popup on clickWhen a user clicks a symbol, show a popup containing more information.Display a popup on hoverWhen a user hovers over a custom marker, show a popup containing more information.Display a satellite map on a webpageDisplay a satellite raster layer on a map with Mapbox GL JS.Display a web map using an alternate projectionUse an Albers, Lambert, Winkel Tripel, or other map projection.Display and style rich text labelsUse the format expression to display country labels in both English and in the local language.Display buildings in 3DUse extrusions to display building heights in 3D.Display HTML clusters with custom propertiesExtend clustering with HTML markers and custom property expressions.Display icons above 3D buildingsUse the symbol-z-elevate property of a symbol layer to display icons above fill extrusions and models.Display line that crosses 180th meridianDraw a line across the 180th meridian using a GeoJSON source.Display map scaleAdd a scale to the map.Display navigation directionsUse the mapbox-gl-directions plugin to show results from the Mapbox Directions API.Display zoom and rotation controlsAdd zoom and rotation controls to the map.Draw a polygon and calculate its areaUse mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters.Extrude polygons for 3D indoor mappingCreate a 3D indoor map with the fill-extrusion-height paint property.Filter features within map viewMove the map to query viewable features in a vector tile layer and filter by typing in an input.Filter symbols based on pitch and distanceUse pitch and distance-from-center to control symbol density for pitched maps.Filter symbols by text inputFilter symbols by icon name by typing in a text input.Filter symbols by toggling checkboxesFilter a set of symbols based on a property value in the data.Filter symbols using a dynamic expressionFilter a set of symbols based on a property value in the data.Fit a map to a bounding boxFit the map to a specific area, regardless of the pixel size of the map.Fit to the bounds of a LineStringGet the bounds of a LineString.Fly to a locationUse flyTo to smoothly interpolate between locations.Fly to a location based on scroll positionScroll down through the story and the map will fly to the chapter's location.Generate and add a missing icon to the mapDynamically generate an image not available in a map style at runtime and add it to the map style.Get coordinates of the mouse pointerShow mouse position on hover with pixel and latitude and longitude coordinates.Get features under the mouse pointerUse queryRenderedFeatures to show properties of hovered-over map elements.Highlight features containing similar dataHover over counties to highlight counties that share the same name.Highlight features within a bounding boxHold the Shift key and drag the map to query features using queryRenderedFeatures.Join local JSON data with vector tile geometriesStyle a choropleth by merging local JSON data with vector tile geometries.Jump to a series of locationsUse the jumpTo function to showcase multiple locations.Limit geocoder results to a named regionUse the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API limiting results to a region.Load data from an external GeoJSON fileAdd a GeoJSONSource using a URL and show the data on a map.Localize the geocoder to a given languageLocalize the mapbox-gl-geocoder control to set the UI language and improve result relevance in that language.Locate the userGeolocate the user and then track their current location on the map using the GeolocateControl.Measure distancesClick points on a map to create lines that measure distanced using turf.length.Navigate the map with game-like controlsUse the keyboard's arrow keys to move around the map with game-like controls.Offset the vanishing point using paddingOffset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.Orient markers toward the horizonAdd horizon-aligned markers to a globe.Persist sources and layers when switching a map's base styleUse events to persist programmatically-added sources and layers when updating a map's style.Place the geocoder input outside the mapUse 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 slideshowAutoplay the locations of boroughs in New York City.Query terrain elevationMake client-side terrain elevation queries.Query terrain elevation along a lineUse Mapbox's elevation data to create an elevation profile between any two point locations.Render world copiesToggle between rendering a single world and multiple copies of the world using setRenderWorldCopies.Restrict map panning to an areaPrevent a map from being panned to a different place by setting maxBounds.Select features around a clicked pointClick on the map to query features using queryRenderedFeatures.Set a point after Geocoder resultStyle a marker used to mark the location of the mapbox-gl-geocoder search result.Set pitch and bearingInitialize a map with pitch and bearing camera options.Show polygon information on clickWhen a user clicks a polygon, show a popup containing more information.Slowly fly to a locationUse flyTo with flyOptions to slowly zoom to a location.Style circles with a data-driven propertyCreate a visualization with a data expression for circle-color.Style layers based on geographic inclusionUse a 'within' expression to paint certain features of layers.Style lines with a data-driven propertyCreate a visualization with a data expression for line-color.Style symbols based on pitchUse the pitch expression to switch symbol styling based on the pitch of the map.Supplement forward geocoding search results with another data sourceUse the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API.Swipe between mapsUse mapbox-gl-compare to swipe between and synchronize two maps.Toggle interactionsEnable or disable UI handlers on a map.Update a choropleth layer by zoom levelDisplay state or county population depending on zoom level.Update a feature in realtimeChange an existing feature on your map in realtime by updating its data.Use a custom camera animation with a geocoderUse 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 geocoderUse a custom HTML rendering function with the mapbox-gl-geocoder control to customize the dropdown menu.Use a fallback imageUse a coalesce expression to display another image when a requested image is not available.Use different map projections for web mapsCreate a map using the Albers, Equal Earth, Equirectangular, Lambert, Mercator, Natural Earth, or Winkel Tripel projections.Use locally generated ideographsUse 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 mapUse the mapbox-gl-geocoder control to search for places using Mapbox Search API without an associated map view.Variable label placementUse text-variable-anchor to allow high priority labels to shift position to stay on the map.Visualize population densityUse a variable binding expression to calculate and display population density.レイヤーの表示と非表示異なるデータセットを表示するカスタムレイヤースイッチャーを作成します。準備はできましたか?無料アカウントを作成して、Mapboxでの構築を始めましょう。サインアップ追加の開発者リソースMapbox開発者ディスコード開発者チートシートマップボックスサポートAIに質問このexampleは役に立ちましたか?はいいいえ