Explore Examples
What's possible with mapcn-vue. From basic markers to advanced WebGL visualizations — each example is interactive and ready to use.
AC Transit Live
Real-time GTFS-RT bus tracking for Oakland/East Bay with historical trails.
Isochrone Analysis
Travel time zones showing reachable areas from any point.
COPC Streaming
Cloud-Optimized Point Cloud with dynamic viewport-based streaming.
NAIP Mosaic
Client-side satellite imagery from STAC API with no server required.
Trip Planner
Multi-day itinerary generator with route optimization.
Interpolate Heatmap
IDW interpolated temperature heatmap from OpenWeatherMap.
NYC Snow Plowing
3D snow accumulation on NYC streets with DSNY data and falling snow.
Weather Dashboard
Global weather explorer with city search, live conditions, and 7-day forecasts from Open-Meteo.
Drone Flight
Cinematic drone animation along uploaded GeoJSON paths with camera follow.
HHI Map
US Vehicle Market Concentration (HHI) - Herfindahl-Hirschman Index census tract map.
Home Price Explorer
Interactive US home price bubble map at the ZIP code level with LocalView viewport-based re-bucketing.
Real-Time Flood Monitoring
Live flood severity, inundation maps, and gauge forecasts from Google Flood Forecasting API across 20+ countries.
Flood Forecasting
Global flood event visualization powered by GDACS and Google Groundsource across 150+ countries.
Defense & C4ISR
Command, control, communications, computers, intelligence, surveillance, and reconnaissance
Coastal Surveillance
Indian Navy coastal surveillance with ship tracking, EEZ boundary, and coastal radar.
Global AIS + Dark Fleet
Worldwide vessel tracking on a globe view with AIS-gap detection highlighting "dark" ships.
Chokepoint Density
Vessel density hexagons over Hormuz, Suez, Malacca, and Bab-el-Mandeb with STS transfer flags.
Submarine Cables & EEZ
Critical undersea infrastructure mapped against EEZ boundaries with cable-segment risk scoring.
SAR / Spill Drift
Stochastic drift trajectories for search-and-rescue or oil-spill response with probability cone.
SST + Surface Currents
Sea-surface temperature heatmap layered with animated ocean current vectors over the Arabian Sea.
3D Battlefield Terrain
3D terrain visualization with animated troop movement replay in Ladakh.
Convoy Tracker
Military logistics convoy tracking with checkpoints, ETA, and cargo status.
Troop Navigation
Multi-waypoint infantry route planning with Valhalla pedestrian routing and elevation profile.
Border Surveillance
LAC border monitoring with camera coverage cones, patrol routes, and intrusion detection.
Artillery Range
Place gun positions with range fan arc polygons for howitzer, mortar, and MLRS.
Sensor Network & EW
Distributed sensor network with pulsating detection radii and EW coverage zones.
Comms Network
Tactical communication nodes with signal strength links and network simulation.
Multi-Spectral Compare
Swipe comparison of visual, thermal, and night-vision imagery bands.
Zone Planner
Draw danger zones (minefields, restricted areas) with safe corridor planning.
SAR Grid
Search & rescue sector grid with probability zones and helicopter sweep paths.
Terrain Viewshed
Click to place observers and compute simulated line-of-sight visibility polygons.
NBC Plume
Wind-driven nuclear/chemical hazard plume dispersion with concentric danger zones.
Basic Map
A simple map with navigation controls and dark mode support.
Markers & Popups
Interactive markers with customizable popup information.
FlyTo Animation
Smooth camera animations with flyTo, easeTo, and jumpTo.
Pitch & Bearing
Interactive sliders for 3D map tilt and rotation.
Layer Switcher
Switch between different basemap styles dynamically.
Layer Control
Toggle layer visibility and opacity with VControlLayer.
Interactive Legend
Click legend items to filter map features by category.
Map Compare
Swipe-style comparison control to view two map styles side by side.
GeoJSON Layer
Render GeoJSON data with styling and interactivity.
Clustered Points
Cluster large datasets of points for better performance.
Raster Layer
Display raster tile layers from tile servers.
Image Overlay
Overlay georeferenced images on the map.
Video Overlay
Overlay georeferenced video on the map.
Choropleth Map
Color-coded regions for thematic mapping.
Proximity Map
Visualize distances and connections between locations.
Wind Animation
Animated wind particle visualization like Windy.com using GFS data.
RGB GeoTIFF (COG)
GPU-accelerated true-color Sentinel-2 imagery from a Cloud-Optimized GeoTIFF.
Land Cover COG
NLCD land use classification with automatic categorical colormap.
NAIP Mosaic
Client-side mosaic of NAIP aerial imagery COGs sourced from Microsoft Planetary Computer.
Before / After Comparison
Swipe between two timestamps of Vermont state imagery (2018 vs 2024) using paired COG layers.
Sentinel-2 Multi-Band
Sentinel-2 multi-band compositing from separate COGs at different native resolutions. True Color, False Color, and SWIR presets rendered entirely client-side.
ECMWF GeoZarr
ECMWF Open Data temperature GeoZarr rendered with deck.gl-raster ZarrLayer + zarrita. Single time slice with grayscale rescale.
AEF Mosaic
Annual Earth Foundation embedding mosaic via VLayerDeckglZarr. Int8 quantized embeddings dequantized + RGB-mapped across 9 annual snapshots (2017–2025).
GeoArrow / Apache Arrow
Native Arrow IPC rendering with deck.gl-geoarrow — Point, LineString, Polygon, MultiPolygon, Text, Trips
GeoArrow Polygons
Natural Earth countries from a GeoArrow IPC file. Toggle 3D extrusion to switch between Polygon and SolidPolygon wrappers.
GeoArrow Points
City clusters as a MultiPoint geometry. Each point rendered directly from Arrow struct<x,y> coordinates.
GeoArrow Multipoint
Individual cities as explicit Multipoint features from a GeoArrow IPC file.
GeoArrow LineStrings
Famous travel routes as LineString geometries. Flat coordinate arrays encoded in Arrow IPC format.
GeoArrow NYC Polygons
NYC borough outlines as MultiPolygon geometry. Demonstrates multiple disjoint polygon shapes in one layer.
GeoArrow Text Labels
City name labels from a GeoArrow table with a Point geometry column and a text name column.
GeoArrow Trips
Animated travel paths with timestamps. Demonstrates the TripsLayer using Arrow list<int64> timestamps.
All Geometry Types
Point, LineString, and Polygon in a single view — three GeoArrow IPC files rendered together.
Scatterplot
High-performance scatterplot with millions of points.
Arc Layer
Origin-destination arc visualization for flow data.
Line Layer
Simple line segments between point pairs.
Path Layer
Styled polyline paths with width and color.
Polygon Layer
Filled and stroked polygon rendering.
GeoJSON Layer
Render GeoJSON with automatic layer detection.
Column Layer
3D columns for categorical or quantitative data.
Icon Layer
Custom icons and symbols at point locations.
Text Layer
Text labels with collision detection.
Trips Animation
Animated path visualization for temporal trajectory data.
Heatmap
Density heatmap visualization for point data.
Hexagon Layer
3D hexagonal binning for aggregated visualization.
Grid Layer
Grid-based aggregation with elevation support.
Screen Grid
Screen-space grid aggregation for dense data.
Contour Layer
Contour lines for continuous data visualization.
H3 Hexagons
Uber H3 hexagonal hierarchical spatial index.
Great Circle
Geodesic arcs following Earth's curvature.
Terrain Layer
3D terrain visualization with elevation data.
WMS Layer
Web Map Service integration for external map data.
MVT Layer
Mapbox Vector Tiles for styled vector data.
Tile Layer
Generic tile loading for raster imagery.
Bitmap Layer
Georeferenced image overlay rendering.
One command.
Zero config.
Add any component to your project via shadcn-vue CLI. Components land in your repo, typed end-to-end, owned by you.
$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map