Default basemap for the Blue Raster's GFW Pro web application

100%

Default basemap for the Blue Raster's GFW Pro web application

✓ Published0🌍 Public

Last edited Jun 8, 2018

Created on Jun 5, 2018

This example presents a custom vector basemap for Blue Raster’s GFW Pro web application, styled using a Mapbox GL style specification. It renders land, water, and urban areas from Esri’s World Basemap vector tile service, with layered fills for lakes, rivers, and intermittent water bodies. The JSON defines paint properties and zoom-dependent visibility, pulling sprite and glyph resources from ArcGIS basemap services.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 9496726

This example displays a MapBox base map using a GDAL WMS configuration that defines a TMS service, projecting the entire world in EPSG:3857 with tile levels up to 18. The XML file specifies the server URL, data window boundaries, and 256x256 pixel blocks with three color bands, effectively rendering satellite or street imagery as a raster layer. The visualization relies on GDAL’s WMS driver to fetch tiles from MapBox’s servers, with a cache enabled for performance. It does not use JavaScript libraries like d3 or Three.js, focusing instead on a server-side tile definition for seamless map display.

RRCura

71% match

Loading thumbnail…

Quick basemap thoughts

This visualization is a decision tree for choosing a basemap strategy, breaking down the effort involved in creating background layers for a map. It contrasts three levels of effort—full custom styling with desktop GIS software, moderate work using vector tile endpoints from Mapbox or Mapzen, and minimal work by overlaying on a CartoDB basemap. The code’s logic is defined in Markdown, not a scripting language, so it does not employ libraries like d3 or Mapbox GL-JS; instead, it presents the options and their trade-offs as a textual guide.

SStephen

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

64% match

Loading thumbnail…

FOAM API Example - Custom Basemap

This example demonstrates a custom basemap built with Mapbox GL JS, using a personalized style from the Mapbox API to render a tilted, rotated map view centered on Connecticut. It shows how to handle hover interactions by querying features from a specific layer called “beacons” and displaying a tooltip with the feature’s properties. The code initializes a map with a custom style URL, sets zoom and pitch constraints, and attaches a mousemove event listener that uses `map.featuresAt` to detect nearby features. No external data source is loaded; the basemap and beacons come from the Mapbox style.

WWill Carter

63% match

Loading thumbnail…

Raster & Vector II

This example presents a hybrid vector-raster map of the United States, seamlessly blending OpenStreetMap raster tiles with red vector state boundaries. The visualization handles interactive pan and zoom, reprojecting the TopoJSON geometry in real time to maintain alignment with the underlying tiles. The implementation leverages d3.geoMercator for projection, d3.tile for raster tile management, d3.zoom for interaction, and d3.geoPath for rendering vector paths. The raster layer is populated with images from OSM’s tile server, while the vector layer uses TopoJSON data from a gist source.

CCurran Kelleher

63% match

Loading thumbnail…

h3 Hexagon Basemap

This example displays a Mapbox GL-based interactive map of the United States, centered on the continental bounds with zoom controls. It shows a blank basemap initially, but the code includes a `zoomend` event listener, suggesting the map updates dynamically on zoom changes. The map uses Mapbox GL JS v1.3.1 and a custom Mapbox style, with a bounding box defined by southwest and northeast coordinates. Navigation controls are added, and the map is rendered in a full-screen container. The data source is a Mapbox-hosted style, and the interaction is handled through Mapbox’s API.

WWill Carter

62% match

Loading thumbnail…

Leaflet WFS

This example shows a map of water areas rendered as a blue outline over an OpenStreetMap tile layer, with the view centered on coordinates near Cambridge, Ontario. It uses the Leaflet mapping library with the Leaflet-WFST plugin to load features from a GeoServer Web Feature Service endpoint, specifically the `osm:water_areas` layer. The code employs a bounding-box filter defined by the current map extent and sets the coordinate reference system to EPSG:3857 using proj4leaflet and proj4js. The visible style is a simple blue color with a weight of two pixels for the geographic features.

TThomasG77

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