Skip to main content
SimilarExport ZIP
100%

Fork of Railroad Map

✓ Published0🌍 Public
Ssahild11
Last edited Oct 4, 2021
Created on Oct 4, 2021
Forked from 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.

AI-generated description

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

This is just an experiment that uses a custom style that is defined inside MapTiler, which changes the style for railroads.

Inspired by OpenMapTiles: Mapbox GL JS Display a Map.

MIT Licensed

Similar vizzes

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
75% match
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
69% match
Loading thumbnail…

Fork of Irish Map with Borehole

This fork of an Irish map with a borehole combines a geographic view with a stratigraphic cross-section. The map uses D3’s `geoPath` and `geoMercator` projections to render the country, with zooming enabled via `zoom()`. Clicking a borehole opens a modal containing an SVG diagram of subsurface layers (topsoil, peat, till, and sandstone) beneath a water table. Hovering over each colored rectangle or water line displays a tooltip with depth information. The geological visualization is built with D3’s `select` and SVG shapes, styled with Bootstrap and CSS.

DDibya Prokash Sarkar
63% match
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
62% match
Loading thumbnail…

Fork of Country Map

A fork of a country map visualizes the 50 U.S. states using an SVG projection. It displays landmasses in pink with black state borders, and hovering over a state highlights it in purple. The code fetches geo-data from a TopoJSON URL and uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw features and interior mesh boundaries. React manages the component state and rendering, while D3 handles the data loading and geographic path generation.

TTejucmandava
61% match
Loading thumbnail…

Fork of Country Map

A fork of a country map visualizes the 50 U.S. states using an SVG projection. It displays landmasses in pink with black state borders, and hovering over a state highlights it in purple. The code fetches geo-data from a TopoJSON URL and uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw features and interior mesh boundaries. React manages the component state and rendering, while D3 handles the data loading and geographic path generation.

TTejucmandava
61% 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
61% match
Loading thumbnail…

Fork of MapmyIndia Map Example

This example displays a map of India with markers positioned over major cities, using the Mappls Map SDK (formerly MapmyIndia) for the map rendering and D3.js v7 for additional SVG graphics. The map is initialized with a center point near Delhi and zoom controls enabled, while a loop adds markers for ten specific latitude and longitude coordinates. The code also loads Mapbox GL JS and jQuery, though the primary visualization relies on the Mappls API with a hybrid layer option, and includes commented-out D3 code for potential circle overlays.

SSriyaI
61% match