メインコンテンツまでスキップ

Markers and controls

User interface elements that can be added to the map. The items in this section exist outside of the map's canvas element.

AttributionControl

githubsrc/ui/control/attribution_control.ts

An AttributionControl control presents the map's attribution information. Add this control to a map using Map#addControl.

new AttributionControl(options: Object?)

Parameters

NameDescription

options

Object?(default {})

options.compact

boolean?
If true , force a compact attribution that shows the full attribution on mouse hover. If false , force the full attribution control. The default is a responsive attribution that collapses when the map is less than 640 pixels wide. Attribution should not be collapsed if it can comfortably fit on the map. compact should only be used to modify default attribution when map size makes it impossible to fit default attribution and when the automatic compact resizing for default settings are not sufficient .

options.customAttribution

(string | Array<string>)?
String or strings to show in addition to any other attributions. You can also set a custom attribution when initializing your map with the customAttribution option .

Example

const map = new mapboxgl.Map({attributionControl: false})
    .addControl(new mapboxgl.AttributionControl({
        customAttribution: 'Map design by me'
    }));
このsection on AttributionControlは役に立ちましたか？

FullscreenControl

githubsrc/ui/control/fullscreen_control.ts

A FullscreenControl control contains a button for toggling the map in and out of fullscreen mode. See the requestFullScreen compatibility table for supported browsers. Add this control to a map using Map#addControl.

new FullscreenControl(options: Object?)

Parameters

NameDescription

options

Object?(default {})

options.container

HTMLElement?
container is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen.

Example

map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));
このsection on FullscreenControlは役に立ちましたか？

GeolocateControl

githubsrc/ui/control/geolocate_control.ts

A GeolocateControl control provides a button that uses the browser's geolocation API to locate the user on the map. Add this control to a map using Map#addControl.

Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will show as disabled.

The zoom level applied depends on the accuracy of the geolocation provided by the device.

The GeolocateControl has two modes. If trackUserLocation is false (default) the control acts as a button, which when pressed will set the map's camera to target the user location. If the user moves, the map won't update. This is most suited for the desktop. If trackUserLocation is true the control acts as a toggle button that when active the user's location is actively monitored for changes. In this mode the GeolocateControl has three interaction states:

  • active - The map's camera automatically updates as the user's location changes, keeping the location dot in the center. This is the initial state, and the state upon clicking the GeolocateControl button.
  • passive - The user's location dot automatically updates, but the map's camera does not. Occurs upon the user initiating a map movement.
  • disabled - Occurs if geolocation is not available, disabled, or denied.

These interaction states can't be controlled programmatically. Instead, they are set based on user interactions.

Extends Evented.
new GeolocateControl(options: Object?)

Parameters

NameDescription

options

Object?(default {})

options.fitBoundsOptions

Object(default {maxZoom:15})
A Map#fitBounds options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.

options.geolocation

Object(default window.navigator.geolocation)
window.navigator.geolocation by default; you can provide an object with the same shape to customize geolocation handling.

options.positionOptions

Object(default {enableHighAccuracy:false,timeout:6000})
A Geolocation API PositionOptions object.

options.showAccuracyCircle

Object(default true)
By default, if showUserLocation is true , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. Always disabled when showUserLocation is false .

options.showUserHeading

Object(default false)
If true an arrow will be drawn next to the user location dot indicating the device's heading. This only has affect when trackUserLocation is true .

options.showUserLocation

Object(default true)
By default a dot will be shown on the map at the user's location. Set to false to disable.

options.trackUserLocation

Object(default false)
If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes.

Example

map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true,
    showUserHeading: true
}));

Instance Members

Events

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

IControl

githubsrc/ui/map.ts

Interface for interactive controls added to the map. This is a specification for implementers to model: it is not an exported method or class.

Controls must implement onAdd and onRemove, and must own an element, which is often a div element. To use Mapbox GL JS's default control styling, add the mapboxgl-ctrl class to your control's node.

Example

// Control implemented as ES6 class
class HelloWorldControl {
    onAdd(map) {
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'mapboxgl-ctrl';
        this._container.textContent = 'Hello, world';
        return this._container;
    }

    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
}
// Control implemented as ES5 prototypical class
function HelloWorldControl() { }

HelloWorldControl.prototype.onAdd = function(map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'mapboxgl-ctrl';
    this._container.textContent = 'Hello, world';
    return this._container;
};

HelloWorldControl.prototype.onRemove = function () {
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
};

Instance Members

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

Marker

githubsrc/ui/marker.ts

Creates a marker component.

Extends Evented.
new Marker(options: Object?, legacyOptions: MarkerOptions?)

Parameters

NameDescription

options

Object?

options.altitude

number(default 0)
Elevation in meters above the map surface. If terrain is enabled, the marker will be elevated relative to the terrain.

options.anchor

string(default 'center')
A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' .

options.className

string?
Space-separated CSS class names to add to marker element.

options.clickTolerance

number(default 0)
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default is to inherit map's clickTolerance .

options.color

string(default '#3FB1CE')
The color to use for the default marker if options.element is not provided. The default is light blue.

options.draggable

boolean(default false)
A boolean indicating whether or not a marker is able to be dragged to a new position on the map.

options.element

HTMLElement?
DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker.

options.occludedOpacity

number(default 0.2)
The opacity of a marker that's occluded by 3D terrain.

options.offset

PointLike?
The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.

options.pitchAlignment

string(default 'auto')
'map' aligns the Marker to the plane of the map. 'viewport' aligns the Marker to the plane of the viewport. 'auto' automatically matches the value of rotationAlignment .

options.rotation

number(default 0)
The rotation angle of the marker in degrees, relative to its respective rotationAlignment setting. A positive value will rotate the marker clockwise.

options.rotationAlignment

string(default 'auto')
The alignment of the marker's rotation. 'map' is aligned with the map plane, consistent with the cardinal directions as the map rotates. 'viewport' is screenspace-aligned. 'horizon' is aligned according to the nearest horizon, on non-globe projections it is equivalent to 'viewport' . 'auto' is equivalent to 'viewport' .

options.scale

number(default 1)
The scale to use for the default marker if options.element is not provided. The default scale corresponds to a height of 41px and a width of 27px .

legacyOptions

MarkerOptions?

Example

// Create a new marker.
const marker = new mapboxgl.Marker()
    .setLngLat([30.5, 50.5])
    .addTo(map);
// Set marker options.
const marker = new mapboxgl.Marker({
    color: "#FFFFFF",
    draggable: true
}).setLngLat([30.5, 50.5])
    .addTo(map);

Instance Members

Events

このsection on Markerは役に立ちましたか？
githubsrc/ui/control/navigation_control.ts

A NavigationControl control contains zoom buttons and a compass. Add this control to a map using Map#addControl.

new NavigationControl(options: Object?)
NameDescription
Object?(default {})
boolean(default true)
If true the compass button is included.
boolean(default true)
If true the zoom-in and zoom-out buttons are included.
boolean(default false)
If true the pitch is visualized by rotating X-axis of compass. 
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
const nav = new mapboxgl.NavigationControl({
    visualizePitch: true
});
map.addControl(nav, 'bottom-right');
このsection on NavigationControlは役に立ちましたか？
githubsrc/ui/popup.ts

A popup component.

Extends Evented.
new Popup(options: Object?)
NameDescription
Object?
number(default 0)
Elevation in meters above the map surface. If terrain is enabled, the popup will be elevated relative to the terrain.
string?
A string indicating the part of the popup that should be positioned closest to the coordinate, set via Popup#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' .
string?
Space-separated CSS class names to add to popup container.
boolean(default true)
If true , a close button will appear in the top right corner of the popup.
boolean(default true)
If true , the popup will close when the map is clicked.
boolean(default false)
If true , the popup will close when the map moves.
boolean(default true)
If true , the popup will try to focus the first focusable element inside the popup.
string(default '240px')
A string that sets the CSS property of the popup's maximum width (for example, '300px' ). To ensure the popup resizes to fit its content, set this property to 'none' . See the MDN documentation for the list of available values .
(number | PointLike | Object)?
A pixel offset applied to the popup's location specified as:
  • a single number specifying a distance from the popup's location
  • a PointLike specifying a constant offset
  • an object of Points specifing an offset for each anchor position.

Negative offsets indicate left and up.

const markerHeight = 50;
const markerRadius = 10;
const linearOffset = 25;
const popupOffsets = {
    'top': [0, 0],
    'top-left': [0, 0],
    'top-right': [0, 0],
    'bottom': [0, -markerHeight],
    'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'left': [markerRadius, (markerHeight - markerRadius) * -1],
    'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};
const popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
    .setLngLat(e.lngLat)
    .setHTML("<h1>Hello World!</h1>")
    .setMaxWidth("300px")
    .addTo(map);
このsection on Popupは役に立ちましたか？

ScaleControl

githubsrc/ui/control/scale_control.ts

A ScaleControl control displays the ratio of a distance on the map to the corresponding distance on the ground. Add this control to a map using Map#addControl.

new ScaleControl(options: Object?)

Parameters

NameDescription

options

Object?(default {})

options.maxWidth

number(default '100')
The maximum length of the scale control in pixels.

options.unit

string(default 'metric')
Unit of the distance ( 'imperial' , 'metric' or 'nautical' ).

Example

const scale = new mapboxgl.ScaleControl({
    maxWidth: 80,
    unit: 'imperial'
});
map.addControl(scale);

scale.setUnit('metric');

Instance Members

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