MapLibre GL Starter

100%

MapLibre GL Starter

✓ Published2🌍 Public

Last edited Dec 20, 2020

Created on Dec 10, 2020

This example displays an interactive world map using MapLibre GL and OpenMapTiles. The map is rendered with a dark matter style from Maptiler, centered on coordinates [8, 15] with an initial zoom level of one. The code initializes a `mapboxgl.Map` object, specifying the container element, the style URL, and the default view. This starter serves as a minimal foundation for building map-based visualizations with these libraries.

AI-generated description

A basic working starter example for using MapLibre GL and OpenMapTiles.

Inspired by OpenMapTiles: Mapbox GL JS Display a Map.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of MapLibre GL Starter

This example demonstrates a minimal interactive map centered on [8, 15] at zoom level 1, using a dark basemap style from MapTiler. The page loads MapLibre GL v1.13.0-rc.3 via unpkg, initializes a map through `new mapboxgl.Map`, and configures the container, style URL, center, and zoom. The map fills the viewport with absolute positioning, and CSS outlines the canvas with a focus-visible indicator for keyboard accessibility. No additional data layers or interactions are implemented beyond the base map display.

BBill Dullemond

85% match

Loading thumbnail…

Leaflet starter MM

This example demonstrates a minimal interactive map centered on coordinates [49, 50, 3], rendered with the Leaflet JavaScript library. It displays a Stamen Terrain tile layer with OpenStreetMap attribution, filling the entire viewport via a styled `#mapdiv` element. The code sets up the map instance using `L.map().setView()` and adds the tile layer with `L.tileLayer().addTo()`. The map supports standard pan and zoom interactions, relying on Leaflet’s core API rather than additional plugins or data sources.

CCartophile

70% match

Loading thumbnail…

Railroad Map

This example displays an interactive map centered on New England, with a custom style that emphasizes railroad lines. The map uses MapLibre GL (via the `mapboxgl.Map` API) and loads a custom OpenMapTiles style from MapTiler, which modifies the default rendering to highlight railways. The view is initialized at a specific longitude, latitude, and zoom level, and a `moveend` event logs the current center and zoom to the console.

CCurran Kelleher

67% match

Loading thumbnail…

OpenLayers Dark Basemap

This example presents a world map using OpenLayers with a dark, muted aesthetic achieved by inverting and dimming the Stamen toner-lite basemap. The React component `Cartography` initializes an `ol.Map` and `View` with a fixed center and zoom level, adding the basemap as a single layer. The map logs its current center and zoom to the console whenever the view changes. The page styling uses a CSS gradient background and applies a filter to the basemap layer, creating a subdued, low-contrast backdrop for the geographic data.

CCurran Kelleher

66% match

Loading thumbnail…

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

JJn1532

65% match

Loading thumbnail…

Mapbox 1.X Reference Examples

This example showcases a collection of Mapbox GL JS code snippets, extracted from official documentation at version 1.12.0, demonstrating various interactive mapping techniques. It features an animated image overlay on a map, using the Mapbox GL JS API to handle tile rendering and camera controls. The snippets illustrate how to integrate custom vector tiles and geospatial data, with code for styling layers and managing user interactions. The project serves as a reference for common mapping tasks, such as adding markers, drawing polygons, and animating data over time.

CCurran Kelleher

65% match

Loading thumbnail…

Pale Dawn

This example displays a tiled map of the world using the Polymaps library, with a calm “Pale Dawn” tileset from CloudMade that provides a subdued background for overlaying data points. The map renders spherical mercator tiles from OpenStreetMap data through an `org.polymaps` map instance, adding standard interaction controls via `po.interact()` and a compass. The visualization uses a single `po.image()` layer with a URL template for fetching 256x256 PNG tiles, and includes attribution to CloudMade and OpenStreetMap contributors under a CCBYSA license.

Mmbostock

64% match

Loading thumbnail…

OpenLayers Dark Basemap High DPI

This example demonstrates an interactive world map using OpenLayers with a React frontend, featuring a dark, low-contrast basemap ideal for overlaying data. It uses an XYZ tile source with Stamen toner-lite tiles served at 2x resolution to support high-DPI displays. The map’s styling applies a CSS filter (`invert(1) opacity(0.3)`) to the tile layer to achieve the muted dark appearance. State management tracks the map view, and the component logs zoom and center coordinates on every moveend event.

CCurran Kelleher

64% match