mapbox-gl-globe-minimap

A Mapbox GL JS Plugin that displays a globe minimap showing the main map's center.

Live Demo on Github Pages

You can customize the colors and size of minimap, and scale the marker.

Install & Use

When using a CDN:

Add the script tag to your HTML file after importing Mapbox GL JS:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js
"></script>

On Map load, add the control. You can specify the position of the globe using the second argument of addControl():

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
    container: "map",
    center: [-74.5, 40],
    zoom: 3,
});

map.on("load", function () {
    map.addControl(
        new GlobeMinimap({
            landColor: "#4ebf6e",
            waterColor: "#8dcbe3"
        }),
        "bottom-right"
    );
});

When using module bundler:

npm i mapbox-gl-globe-minimap

Import the module and add it to the map with addControl()

import GlobeMinimap from "mapbox-gl-globe-minimap";

...
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
    container: "map",
    center: [-74.5, 40],
    zoom: 3,
});

map.on("load", function () {
    map.addControl(
        new GlobeMinimap({
            landColor: "#4ebf6e",
            waterColor: "#8dcbe3"
        }),
        "bottom-right"
    );
});

Options

| option | type | description | default | | ------------- | -------- | ---------------------------------------------- | ---------------------- | | globeSize | Number | Pixels to use for the diameter of the globe | 82 | | landColor | String | HTML color to use for land areas on the globe | 'white' | | waterColor | String | HTML color to use for water areas on the globe | 'rgba(30 40 70/60%)' | | markerColor | String | HTML color to use for the center point marker | '#ff2233' | | markerSize | Number | Scale ratio for the center point marker | 1 |