Guides

` with an ID of `"map"`. - **`style`**: The [style URL](https://docs.mapbox.com/help/glossary/style-url/) of the map style being used to determine which [tilesets](https://docs.mapbox.com/help/glossary/tileset/) the map includes and how they are styled. The example above uses the [Mapbox Streets v12](https://www.mapbox.com/maps/streets) style. The [Mapbox Standard Style](https://docs.mapbox.com/map-styles/standard/) is enabled by default when no `style` option is provided to the `Map` constructor. - **`center`**: The coordinates of the map's starting position, in [`longitude, latitude`](https://docs.mapbox.com/help/glossary/lat-lon/) order. - **`zoom`**: The [zoom level](https://docs.mapbox.com/help/glossary/zoom-level/) at which the map should be initialized. This can be a whole number or a decimal value. ### Layers Mapbox GL JS maps can be composed of several layers that provide visual elements and map data. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen. The Mapbox GL JS [`addLayer`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addlayer) method adds a Mapbox style layer to the map's style. The only required parameter for `addLayer` is a Mapbox style layer object. It also accepts an optional `before` parameter, which is the ID of an existing layer to insert the new layer before. If you omit this argument, then the renderer will draw the layer on top of the map. > **Note: Ordering layers with Mapbox Standard** > > Mapbox Standard makes adding your data layers easier through the concept of `slot`s. `Slot`s are predetermined locations in the style where your layer will be added to, such as on top of existing land layers, but below all labels. Learn more about [how to specify the order of a layer at runtime for Mapbox Standard](https://docs.mapbox.com/mapbox-gl-js/ja/guides/styles/work-with-layers/#specify-order-of-a-layer-at-runtime-for-mapbox-standard). The following sections describe the elements of a Mapbox style layer object. #### Asynchronous Since layers in Mapbox GL JS are remote, they are asynchronous. So code that connects to Mapbox GL JS often uses event binding to change the map at the right time. For example: ```js map.on('load', () => { map.addLayer({ id: 'terrain-data', type: 'line', source: { type: 'vector', url: 'mapbox://mapbox.mapbox-terrain-v2' }, 'source-layer': 'contour' }); }); ``` This example code uses `map.on('load', function() {` to call `map.addLayer` only after the map's resources, including the style, have been loaded. If it were to run `map.addLayer` right away, it would trigger an error because the style to which you would like to add a layer would not exist yet. #### Layer source You must define a source when you add a new layer. A source accepts a `type` and a `url`, excluding GeoJSON sources which do not have a `url`. There are six types of sources, each with its own properties: - [vector tiles](https://docs.mapbox.com/style-spec/reference/sources/#vector) - [raster tiles](https://docs.mapbox.com/style-spec/reference/sources/#raster) - [raster arrays](https://docs.mapbox.com/style-spec/reference/sources/#raster-array) - [raster-dem](https://docs.mapbox.com/style-spec/reference/sources/#raster-dem) - [GeoJSON](https://docs.mapbox.com/style-spec/reference/sources/#geojson) - [model](https://docs.mapbox.com/style-spec/reference/sources/#model) - [image](https://docs.mapbox.com/style-spec/reference/sources/#image) - [video](https://docs.mapbox.com/style-spec/reference/sources/#video) For more information on each source type, explore the [Sources](https://docs.mapbox.com/style-spec/reference/sources/) section of the Mapbox Style Specification. Tilesets can include multiple subsets of data called [source layers](https://docs.mapbox.com/help/glossary/source-layer/). As an example, the Mapbox Streets tileset contains source layers for roads, parks, and more. To make sure your layers are referencing the correct source layers, your layer object also needs to include a `source-layer` (often the name of the original file). See this example: ```js map.on('load', () => { map.addLayer({ id: 'rpd_parks', type: 'fill', source: { type: 'vector', url: 'mapbox://mapbox.3o7ubwm8' }, 'source-layer': 'RPD_Parks' }); }); ``` > **Note: addSource()** > > You can also add sources using the Mapbox GL JS [`addSource`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addsource) method. There is no difference in map performance when using this alternative method, but it is sometimes preferable to keep code more readable. #### Layout and paint properties Layers feature two properties that enable data styling: [`paint`](https://docs.mapbox.com/style-spec/reference/layers/#paint) and [`layout`](https://docs.mapbox.com/style-spec/reference/layers/#layout). These are used to define how data will be rendered on the map. `layout` properties refer to placement and visibility, among other high-level preferences, and are applied early in the rendering process. `paint` properties are more fine-grained style attributes like opacity, color, and translation. They are less processing-intensive and are rendered later. The following code adds a layer to a map and styles the data with a green fill: ```js map.on('load', () => { map.addLayer({ id: 'rpd_parks', type: 'fill', source: { type: 'vector', url: 'mapbox://mapbox.3o7ubwm8' }, 'source-layer': 'RPD_Parks', layout: { visibility: 'visible' }, paint: { 'fill-color': 'rgba(61,153,80,0.55)' } }); }); ``` The final product for the code snippet above could be a map zoomed to show San Francisco with parks shown as green polygons. The `RPD_Parks` layer could contain vector polygons from the city's park lands data. > **Note: addLayer()** > > If you added your source using the alternative [`addSource`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addsource) method, you will need to include the source `id` as the source in [`addLayer`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addlayer). ### Camera The camera is the map's field of view. Mapbox GL JS provides the following parameters for adjusting the camera's perspective: `center`, `zoom`, `bearing` (the visual rotation of the map), and `pitch` (the visual tilt of the map). The [map's initial perspective](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/), [`jumpTo`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#jumpto), [`easeTo`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#easeto), and [`flyTo`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#flyto) all use [common camera options](https://docs.mapbox.com/mapbox-gl-js/ja/api/properties/#cameraoptions). > **Related content (playground): [Location Helper](https://labs.mapbox.com/location-helper)** > > To experiment with camera pitch, bearing, tilt, and zoom and get values to use in your code, try our *Location Helper* tool. ## Use Mapbox GL JS with other tools Mapbox GL JS works well with many other Mapbox tools. You can use your own data in a map, create your own custom map style, add interactivity, and more. ### Use your own data With Mapbox GL JS, you have access to [Mapbox tilesets](https://docs.mapbox.com/help/getting-started/mapbox-data/) that provide a large amount of geographic data. You can also [upload your own data](https://docs.mapbox.com/help/troubleshooting/uploads/) using [Mapbox Studio](https://docs.mapbox.com/studio-manual/), [Mapbox Tiling Service](https://docs.mapbox.com/api/maps/mapbox-tiling-service/), or the [Uploads API](https://docs.mapbox.com/api/maps/uploads/), then access and display it in your Mapbox GL JS map. ### Style your maps You can use any [Mapbox-owned style](https://docs.mapbox.com/api/maps/styles/#mapbox-styles) like [Mapbox Streets](https://www.mapbox.com/maps/streets) to style your map. Or you can use your own custom styles created in [Mapbox Studio](https://docs.mapbox.com/studio-manual/guides/map-styling/). For more examples of Mapbox-designed and custom map styles being used in Mapbox GL JS maps, see our [Examples page](https://docs.mapbox.com/mapbox-gl-js/ja/example/?topic=Styles). ### Interactivity Third party tools allow you add additional interactivity to your Mapbox GL JS map. For example, you can do spatial analysis in your Mapbox GL JS map using [Turf.js](https://docs.mapbox.com/mapbox-gl-js/ja/example/measure/), add a 3D model to your map using [three.js](https://docs.mapbox.com/mapbox-gl-js/ja/example/add-3d-model/), or create animations that respond to sounds in your user's environment using the [Web Audio API](https://docs.mapbox.com/mapbox-gl-js/ja/example/dancing-buildings/). For more ways to use Mapbox GL JS with various third-party tools, see our [Examples page](https://docs.mapbox.com/mapbox-gl-js/ja/example/). Mapbox GL JS also supports many plugins that you can use to add interactive elements to your web map. There are plugins for adding interactive drawing tools, adding inset maps, integrating with the Mapbox Geocoding API and the Mapbox Directions API, and more. Explore the [Mapbox GL JS plugins page](https://docs.mapbox.com/mapbox-gl-js/ja/plugins/) for more details. ### Mapbox web services APIs Mapbox GL JS is an excellent starting point for apps that use one or more [Mapbox web services APIs](https://docs.mapbox.com/api/overview/). For example, you can use the [Directions API](https://docs.mapbox.com/api/navigation/directions/) to [visualize turn-by-turn directions on a map](https://docs.mapbox.com/help/tutorials/getting-started-directions-api/), or the [Isochrone API](https://docs.mapbox.com/api/navigation/isochrone/) to [visualize estimated travel times](https://docs.mapbox.com/help/tutorials/get-started-isochrone-api/). For more examples of ways to use Mapbox web services APIs with Mapbox GL JS, see our [Tutorials page](https://docs.mapbox.com/help/tutorials/?search=api) and our [Mapbox GL JS examples page](https://docs.mapbox.com/mapbox-gl-js/ja/example/?search=api). ### JavaScript frameworks Mapbox GL JS can be used with various JavaScript frameworks, including React. To learn more about using Mapbox GL JS with React, see the [Use Mapbox GL JS in a React app tutorial](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/). ## Attribution When you create a map with Mapbox GL JS, it automatically includes attribution on the bottom right corner of the map. For additional display options, see the API documentation for [`AttributionControl`](https://docs.mapbox.com/mapbox-gl-js/ja/api/markers/#attributioncontrol). For more details on what kinds of attribution Mapbox requires and why, see the [Attribution](https://docs.mapbox.com/help/getting-started/attribution/) guide.