Railroad Map

100%

✓ Published1🌍 Public

Last edited Dec 18, 2020

Created on Dec 18, 2020

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.

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…

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

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

67% match

Loading thumbnail…

Railway map easy

This interactive map displays North American railway networks, distinguishing major freight rail operators by color. The visualization uses the Leaflet library with Stamen watercolor background tiles, while railway line data is pulled from ArcGIS FeatureServer layers via esri-leaflet and esri-leaflet-vector. Individual rail companies, including BNSF, KCS, CN, CPR, NS, UP, and CSXT, are rendered as separately styled colored polylines, with blue for BNSF and green for KCS, demonstrating real-time loading of geospatial feature services.

Ssahild11

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

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

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

63% match

Loading thumbnail…

Lots of points in Mapbox Basemap - Test

This example demonstrates a Mapbox GL map with a tilted and rotated view centered on the New York City area. It shows how the map’s basemap style can be dynamically switched via a custom control panel overlaid on the map. The page uses the Mapbox GL JS API to initialize the map with a specific style, pitch, bearing, and zoom level, while the `switchLayer` function updates the map’s style based on user input. A transparent title box with radio buttons allows selection among different style layers, and the Navigation control adds zoom and rotation controls.

WWill Carter

62% match

Loading thumbnail…

Cheap map

This example displays a geographic map of Massachusetts towns, colored light green with black borders, that turns red on hover. The visualization is built using D3 version 5 and renders as an SVG element. It loads GeoJSON data from a remote GitHub gist containing town boundaries and projects it using D3’s map projections, specifically `geoConicConformal` and `geoAlbersUsa`. The code defines SVG classes for styling the map’s countries and a hover effect, though the actual rendering of the map geometry is not yet implemented in the provided JavaScript snippet.

NNilla

62% match