Awesome

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/mapbox-gl-globe-minimap@1.2.1/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

Attribution

This is a modern incarnation of leaflet-globeminimap, a leaflet plugin I made a while back. That plugin was inspired by the globe minimap used by the Google Earth View Chrome plugin.

Plugin architecture was derived from https://github.com/aesqe/mapboxgl-minimap, and the modern d3.geoOrthographic implementation is based on this observable notebook.