Fork of MapLibre GL Starter

100%

Fork of MapLibre GL Starter

✓ Published0🌍 Public

Last edited Jun 2, 2021

Created on May 21, 2021

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.

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…

MapLibre GL Starter

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.

CCurran Kelleher

85% match

Loading thumbnail…

Fork of OpenLayers Dark Basemap

This example displays an interactive map using the Stamen Toner-Lite basemap, rendered through an OpenLayers map view integrated into a React component. The map initializes with a specific zoom level and center coordinate, and the `moveend` event logs the current view’s zoom and center to the console, demonstrating how to track navigation. The map is dynamically created in a React effect, attaching the tile layer to a `div` target, with cleanup that detaches the target on component destruction. The basemap layer uses a CSS filter to maintain a muted, inverted appearance.

CCarlos Augusto Ribeiro Mantovani

71% 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…

Fork of Railroad Map

This fork of a railroad map highlights major rail lines using a custom MapTiler style overlaid on MapLibre GL. The map centers on a region in Iowa at zoom level 8.5, with the `major-rail` class applying the distinctive styling to railroad features. It uses the `mapboxgl.Map` API with a style URL from MapTiler’s style server, and logs the map center and zoom on each `moveend` event. The example is built on the MapLibre GL JavaScript library and OpenMapTiles vector tiles.

Ssahild11

69% match

Loading thumbnail…

Fork of OpenLayers Dark Basemap

This example shows a muted, inverted-toner map rendered with OpenLayers in a React component, using a Stamen toner-lite basemap that is styled through CSS filters (`invert(1) opacity(0.3)`) to create a dark cartographic background. The React `useEffect` hook initializes an `ol.Map` and `ol.View` with a specific center and zoom, and logs the updated zoom and center coordinates on every `moveend` event. It demonstrates integrating OpenLayers 6.2.1 with React 16, managing map lifecycle cleanup via `map.setTarget(null)`, and a custom `Basemap.js` layer built from `ol.layer.Tile` and `ol.source.Stamen`.

Wweldream

67% match

Loading thumbnail…

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter

67% match

Loading thumbnail…

Klokantech Basic Preview

This example demonstrates an interactive map of geographic regions, combining OpenMapTiles vector data with a custom local vector source for King County census block groups. It uses Mapbox GL JS to render a full-screen map with a Klokantech Basic style, featuring filled polygons for land cover, water, parks, and agricultural areas, each styled with distinct colors and opacity. The map loads a `klokantech-basic.json` style, which defines layers for residential, grass, wood, and other land-use categories, and overlays the local census data. Navigation controls and URL hash syncing are enabled for user interaction, with styling driven by the Mapbox style specification.

FFloydBull

67% 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

66% match