Map Controls

Custom Controls

Control must implement the onAdd and onRemove methods, onAdd must return a dom element, which is often a div element. Use the map.addControl() method to add controls to the map.

JavaScript

                        // 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;
                        };

Class Name	Description
nimap.NavigationControl	The control contains a zoom button and a compass.
nimap.GeolocateControl	Provides the use of the browser's geolocation API to locate the user's button on the map. Not all browsers support geolocation, and some users may disable this feature. Geolocation support for modern browsers, including Chrome, requires a website to be served via HTTPS. If geolocation support is not available, GeolocateControl will not be visible.
nimap.ScaleControl	Controls the displayed scale and other controls.
nimap.FullscreenControl	Controls the button to enter full-screen mode map