ソース

Search GL JS API Reference

準備はできましたか？

無料アカウントを作成して、Mapboxでの構築を始めましょう。

サインアップ

Mapbox開発者コミュニティのDiscordに参加しようarrow-right

The source types Mapbox GL JS can handle in addition to the ones described in the Mapbox Style Specification.

CanvasSource

githubsrc/source/canvas_source.ts

A data source containing the contents of an HTML canvas. See CanvasSourceOptions for detailed documentation of options.

Extends ImageSource.

Example

// add to map
map.addSource('some id', {
    type: 'canvas',
    canvas: 'idOfMyHTMLCanvas',
    animate: true,
    coordinates: [
        [-76.54, 39.18],
        [-76.52, 39.18],
        [-76.52, 39.17],
        [-76.54, 39.17]
    ]
});

// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove

Instance Members

Related

• Example: Add a canvas source

このsection on CanvasSourceは役に立ちましたか？

CanvasSourceOptions

githubsrc/source/canvas_source.ts

Options to add a canvas source type to the map.

Type

Object

Properties

animate(boolean?): Whether the canvas source is animated. If the canvas is static (pixels do not need to be re-read on every frame), animate should be set to false to improve performance.

canvas((string | HTMLCanvasElement)): Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the HTMLCanvasElement itself.

coordinates(Array<Array<number>>): Four geographical coordinates denoting where to place the corners of the canvas, specified in [longitude, latitude] pairs.

type(string): Source type. Must be "canvas" .

このsection on CanvasSourceOptionsは役に立ちましたか？

GeoJSONSource

githubsrc/source/geojson_source.ts

A source containing GeoJSON. See the Style Specification for detailed documentation of options.

Extends Evented.

Example

map.addSource('some id', {
    type: 'geojson',
    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
});

map.addSource('some id', {
    type: 'geojson',
    data: {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -76.53063297271729,
                    39.18174077994108
                ]
            }
        }]
    }
});

map.getSource('some id').setData({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {"name": "Null Island"},
        "geometry": {
            "type": "Point",
            "coordinates": [ 0, 0 ]
        }
    }]
});

Instance Members

Related

• Example: Draw GeoJSON points
• Example: Add a GeoJSON line
• Example: Create a heatmap from points
• Example: Create and style clusters

このsection on GeoJSONSourceは役に立ちましたか？

ImageSource

githubsrc/source/image_source.ts

A data source containing an image. See the Style Specification for detailed documentation of options.

Extends Evented.

Example

// add to map
map.addSource('some id', {
    type: 'image',
    url: 'https://www.mapbox.com/images/foo.png',
    coordinates: [
        [-76.54, 39.18],
        [-76.52, 39.18],
        [-76.52, 39.17],
        [-76.54, 39.17]
    ]
});

// update coordinates
const mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

// update url and coordinates simultaneously
mySource.updateImage({
    url: 'https://www.mapbox.com/images/bar.png',
    coordinates: [
        [-76.54335737228394, 39.18579907229748],
        [-76.52803659439087, 39.1838364847587],
        [-76.5295386314392, 39.17683392507606],
        [-76.54520273208618, 39.17876344106642]
    ]
});

map.removeSource('some id');  // remove

Instance Members

Related

• Example: Add an image
• Example: Animate a series of images

このsection on ImageSourceは役に立ちましたか？

RasterArrayTileSource

githubsrc/source/raster_array_tile_source.ts

A data source containing raster-array tiles created with Mapbox Tiling Service. See the Style Specification for detailed documentation of options.

Extends RasterTileSource.

new RasterArrayTileSource(id: string, options: RasterArraySourceSpecification, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id(string)

options(RasterArraySourceSpecification)

dispatcher(Dispatcher)

eventedParent(Evented)

Example

// add to map
map.addSource('some id', {
    type: 'raster-array',
    url: 'mapbox://rasterarrayexamples.gfs-winds',
    tileSize: 512
});

Related

• Example: Create a wind particle animation

このsection on RasterArrayTileSourceは役に立ちましたか？

RasterTileSource

githubsrc/source/raster_tile_source.ts

A source containing raster tiles. See the Style Specification for detailed documentation of options.

Extends Evented.

new RasterTileSource(id: string, options: (RasterSourceSpecification | RasterDEMSourceSpecification | RasterArraySourceSpecification), dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id(string)

options((RasterSourceSpecification | RasterDEMSourceSpecification | RasterArraySourceSpecification))

dispatcher(Dispatcher)

eventedParent(Evented)

Example

map.addSource('some id', {
    type: 'raster',
    url: 'mapbox://mapbox.satellite',
    tileSize: 256
});

map.addSource('some id', {
    type: 'raster',
    tiles: ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'],
    tileSize: 256
});

Instance Members

Related

• Example: Add a raster tile source
• Example: Add a WMS source

このsection on RasterTileSourceは役に立ちましたか？

VectorTileSource

githubsrc/source/vector_tile_source.ts

A source containing vector tiles in Mapbox Vector Tile format. See the Style Specification for detailed documentation of options.

Extends Evented.

new VectorTileSource(id: string, options: any, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id(string)

options(any)

dispatcher(Dispatcher)

eventedParent(Evented)

Example

map.addSource('some id', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-streets-v8'
});

map.addSource('some id', {
    type: 'vector',
    tiles: ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
    minzoom: 6,
    maxzoom: 14
});

map.getSource('some id').setUrl("mapbox://mapbox.mapbox-streets-v8");

map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);

Instance Members

Related

• Example: Add a vector tile source
• Example: Add a third party vector tile source

このsection on VectorTileSourceは役に立ちましたか？

VideoSource

githubsrc/source/video_source.ts

A data source containing video. See the Style Specification for detailed documentation of options.

Extends ImageSource.

Example

// add to map
map.addSource('some id', {
    type: 'video',
    url: [
        'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
        'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
    ],
    coordinates: [
        [-76.54, 39.18],
        [-76.52, 39.18],
        [-76.52, 39.17],
        [-76.54, 39.17]
    ]
});

// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove

Instance Members

Related

• Example: Add a video

このsection on VideoSourceは役に立ちましたか？

準備はできましたか？

無料アカウントを作成して、Mapboxでの構築を始めましょう。

サインアップ

Mapbox開発者コミュニティのDiscordに参加しようarrow-right

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