# MapSnippets.org

> Educational project by MapTiler. Code examples for Leaflet, MapLibre GL JS, OpenLayers, and MapTiler SDK.
> All examples use api.maptiler.com for tiles and services.

## Libraries

- [Leaflet](/leaflet/): 22 examples. A lightweight, mobile-friendly 2D mapping library with a large plugin ecosystem.
- [MapLibre GL JS](/maplibre/): 28 examples. A WebGL-powered vector mapping library with 3D terrain and data-driven styling.
- [OpenLayers](/openlayers/): 22 examples. An enterprise-grade GIS library with advanced projections and formats.
- [MapTiler SDK](/maptiler-sdk/): 29 examples. An all-in-one SDK with built-in geocoding, terrain, and cloud tiles.

## Examples

### Leaflet

- [Satellite Basemap with Leaflet](/leaflet/basemap-satellite/): Display MapTiler satellite imagery with an optional labels overlay toggle using Leaflet tile layer controls.
- [Custom Marker Icons with Leaflet](/leaflet/custom-marker-icon/): Replace the default marker pin with custom PNG or SVG icons using L.icon() and L.divIcon().
- [Drawing Tools with Leaflet](/leaflet/draw-tool/): Add interactive drawing and editing tools to a Leaflet map using the Leaflet.draw plugin.
- [Export Leaflet Map as PNG](/leaflet/export-map/): Capture the current Leaflet map view as a downloadable PNG image using the html2canvas library.
- [Geofencing with Leaflet](/leaflet/geo-fence/): Define a polygon boundary and check whether a point is inside or outside the geofence.
- [Show User Location on a Leaflet Map](/leaflet/geo-location/): Display the user's current GPS position on a Leaflet map using the browser Geolocation API with an accuracy circle.
- [Fuzzy Location with Leaflet](/leaflet/geo-obfuscate/): Display an approximate location as a fuzzy L.circle area instead of an exact marker pin for privacy protection.
- [Address Search with Leaflet](/leaflet/geocode-forward/): Add an autocomplete address search dropdown to a Leaflet map using the MapTiler Geocoding API.
- [Reverse Geocoding with Leaflet](/leaflet/geocode-reverse/): Click anywhere on a Leaflet map to get the address at that location using MapTiler reverse geocoding.
- [Choropleth Map with Leaflet](/leaflet/layer-choropleth/): Create a data-driven choropleth map that colors regions by value using inline GeoJSON and Leaflet.
- [Heatmap Visualization with Leaflet](/leaflet/layer-heatmap/): Visualize point density as a heatmap on a Leaflet map using the leaflet.heat plugin.
- [Draw Polylines on a Leaflet Map](/leaflet/layer-line/): Draw a styled L.polyline connecting multiple coordinates on a Leaflet map to visualize routes or paths.
- [Draw Polygons on a Leaflet Map](/leaflet/layer-polygon/): Draw filled L.polygon areas on a Leaflet map with custom stroke and fill styles.
- [Control Map Gestures in Leaflet](/leaflet/map-gestures/): Configure Leaflet map interactions including scroll wheel zoom, drag panning, double-click zoom, and touch gestures using L.map options.
- [Initialize a Leaflet Map with MapTiler Tiles](/leaflet/map-init/): Create and embed an interactive Leaflet map with MapTiler raster tiles, pan/zoom controls, and a marker in just a few lines of code.
- [Switch Tile Layers in Leaflet](/leaflet/map-set-style/): Switch between MapTiler raster tile styles at runtime using Leaflet's built-in L.control.layers switcher.
- [Add Markers and Popups to a Leaflet Map](/leaflet/marker-add/): Place L.marker pins on a Leaflet map with interactive popups containing custom HTML content.
- [Marker Clustering with Leaflet](/leaflet/marker-cluster/): Group nearby markers into expandable clusters using the Leaflet.markercluster plugin for better performance with large datasets.
- [Load GeoJSON Data in Leaflet](/leaflet/overlay-geojson/): Fetch a GeoJSON file and render its features on a Leaflet map with custom styling and interactive popups.
- [Store Locator with Leaflet](/leaflet/pattern-storelocator/): Build a store locator with a sidebar list and interactive map pins using Leaflet.
- [Route Between Two Points with Leaflet](/leaflet/routing-ab/): Display a driving route between two points on a Leaflet map using the OSRM routing API and L.polyline.
- [Static Map Image with Leaflet](/leaflet/static-map/): Display a non-interactive map image using the MapTiler Static Maps API: perfect for thumbnails, emails, and social previews.

### MapLibre GL JS

- [3D Building Extrusions with MapLibre GL JS](/maplibre/3d-extrusion/): Add 3D extruded buildings from MapTiler vector tiles using fill-extrusion layers.
- [3D Terrain with MapLibre GL JS](/maplibre/3d-terrain/): Enable 3D terrain rendering using MapTiler DEM tiles with adjustable exaggeration.
- [Animated Data with MapLibre GL JS](/maplibre/animate-time/): Animate a circle layer's radius paint property over time to visualize temporal data changes with requestAnimationFrame.
- [Satellite Basemap with MapLibre GL JS](/maplibre/basemap-satellite/): Display a satellite imagery basemap using the MapTiler satellite style.
- [Custom Marker Icons with MapLibre GL JS](/maplibre/custom-marker-icon/): Use custom HTML elements or symbol layers with image sprites for marker icons.
- [Draw Polygons with MapLibre GL JS](/maplibre/draw-tool/): Draw polygons on the map by clicking to place vertices and updating a GeoJSON source in real time.
- [Export Map as PNG with MapLibre GL JS](/maplibre/export-map/): Capture the current MapLibre GL JS map view as a downloadable PNG image using the WebGL canvas export API.
- [Geofencing with MapLibre GL JS](/maplibre/geo-fence/): Define a polygon boundary in MapLibre GL JS and check whether a clicked point falls inside or outside the geofence.
- [Geolocation Control in MapLibre GL JS](/maplibre/geo-location/): Show the user's current position on the map using the built-in maplibregl.GeolocateControl with tracking support.
- [Fuzzy Location Circle with MapLibre GL JS](/maplibre/geo-obfuscate/): Show an approximate location as a fuzzy circle polygon layer instead of an exact point for privacy protection.
- [Address Search with MapLibre GL JS](/maplibre/geocode-forward/): Search for places by name using the MapTiler Geocoding API and display results on a MapLibre GL JS map.
- [Reverse Geocoding with MapLibre GL JS](/maplibre/geocode-reverse/): Click anywhere on a MapLibre GL JS map to get the address at that location using the MapTiler reverse geocoding API.
- [Data-Driven Choropleth with MapLibre GL JS](/maplibre/layer-choropleth/): Create a data-driven choropleth map using GeoJSON polygons and match expressions to color regions by value.
- [Heatmap Layer with MapLibre GL JS](/maplibre/layer-heatmap/): Visualize point density using the native heatmap layer type: no plugins needed.
- [Line Layers with MapLibre GL JS](/maplibre/layer-line/): Draw a route or path on the map using a GeoJSON LineString source and a line layer with custom paint properties.
- [Fill Layers with MapLibre GL JS](/maplibre/layer-polygon/): Render a filled polygon area using a GeoJSON source and a fill layer -- the MapLibre way to draw polygons on the map.
- [Control Map Interactions in MapLibre GL JS](/maplibre/map-gestures/): Enable cooperative gestures and customize scroll zoom behavior to improve embedded map UX in MapLibre GL JS.
- [Globe Projection with MapLibre GL JS](/maplibre/map-globe/): Display the map as a 3D globe with atmosphere effects using MapLibre GL JS setProjection API.
- [Initialize a MapLibre GL JS Map](/maplibre/map-init/): Create a maplibregl.Map instance with MapTiler vector tiles, navigation controls, and a marker popup.
- [Switch Vector Styles in MapLibre GL JS](/maplibre/map-set-style/): Change the map style at runtime using map.setStyle() to switch between MapTiler vector tile styles.
- [Add Markers and Popups in MapLibre GL JS](/maplibre/marker-add/): Place maplibregl.Marker instances on the map with clickable Popup overlays using MapLibre GL JS.
- [Point Clustering with MapLibre GL JS](/maplibre/marker-cluster/): Group nearby points into clusters using the built-in GeoJSON source clustering in MapLibre GL JS -- no plugins needed.
- [Load GeoJSON Source in MapLibre GL JS](/maplibre/overlay-geojson/): Fetch a remote GeoJSON file and add it as a source with styled layers on a MapLibre GL JS map.
- [Store Locator with MapLibre GL JS](/maplibre/pattern-storelocator/): Build a store locator with a sidebar list and interactive map markers using MapLibre GL JS.
- [Display a Route with MapLibre GL JS](/maplibre/routing-ab/): Display a driving route between two points using the OSRM routing API and a GeoJSON line layer in MapLibre GL JS.
- [Static Map Image with MapLibre GL JS](/maplibre/static-map/): Display a non-interactive map image using the MapTiler Static Maps API alongside an interactive MapLibre map.
- [Style Expressions with MapLibre GL JS](/maplibre/style-expression/): Use MapLibre style expressions like interpolate and step to dynamically size and color features based on data properties.
- [Live GPS Tracking with MapLibre GL JS](/maplibre/tracking-live/): Simulate a moving marker by updating a GeoJSON source position in real time with setInterval.

### OpenLayers

- [Satellite Basemap with OpenLayers](/openlayers/basemap-satellite/): Display MapTiler satellite imagery as a raster tile layer in OpenLayers.
- [Custom Marker Icons with OpenLayers](/openlayers/custom-marker-icon/): Style point features with custom icons using ol.style.Icon with SVG or PNG sources.
- [Draw Interaction in OpenLayers](/openlayers/draw-tool/): Let users draw points, lines, and polygons on the map using ol.interaction.Draw with a vector source.
- [Export Map as PNG with OpenLayers](/openlayers/export-map/): Capture the current OpenLayers map view as a downloadable PNG image using the canvas export API.
- [Geofencing with OpenLayers](/openlayers/geo-fence/): Define a polygon boundary in OpenLayers and check whether a clicked point falls inside or outside the geofence.
- [Geolocation with OpenLayers](/openlayers/geo-location/): Track and display the user's current position as a point feature on an OpenLayers map using the browser Geolocation API.
- [Address Search with OpenLayers](/openlayers/geocode-forward/): Search for places using the MapTiler Geocoding API and display results on an OpenLayers map.
- [Reverse Geocoding with OpenLayers](/openlayers/geocode-reverse/): Click anywhere on an OpenLayers map to get the address at that location using the MapTiler Reverse Geocoding API.
- [Choropleth Map with OpenLayers](/openlayers/layer-choropleth/): Create a data-driven choropleth map using a style function to color polygons based on property values.
- [Heatmap Layer with OpenLayers](/openlayers/layer-heatmap/): Visualize point density using ol.layer.Heatmap with weighted features on a MapTiler basemap.
- [LineString Features in OpenLayers](/openlayers/layer-line/): Add a styled line to an OpenLayers map using a vector source with ol.geom.LineString geometry.
- [Polygon Features in OpenLayers](/openlayers/layer-polygon/): Render a styled polygon area using a vector source with ol.geom.Polygon and custom fill/stroke styles.
- [Configure Interactions in OpenLayers](/openlayers/map-gestures/): Configure zoom, pan, and rotation interactions on an ol.Map using OpenLayers interaction defaults.
- [Initialize an OpenLayers Map](/openlayers/map-init/): Create an ol.Map instance with MapTiler vector tiles using ol-mapbox-style and navigation controls.
- [Switch Vector Styles in OpenLayers](/openlayers/map-set-style/): Dynamically switch between MapTiler vector tile styles using ol-mapbox-style in OpenLayers.
- [Add Markers and Popups in OpenLayers](/openlayers/marker-add/): Place point features on a vector layer and display popups with ol.Overlay on click in OpenLayers.
- [Point Clustering with OpenLayers](/openlayers/marker-cluster/): Group nearby point features into clusters using ol.source.Cluster with dynamic styling based on cluster size.
- [Load GeoJSON in OpenLayers](/openlayers/overlay-geojson/): Fetch and display GeoJSON features on an OpenLayers map using ol.format.GeoJSON and a styled vector layer.
- [Store Locator with OpenLayers](/openlayers/pattern-storelocator/): Build a store locator with a sidebar list, point features, and popup overlays using OpenLayers.
- [Display a Route with OpenLayers](/openlayers/routing-ab/): Display a driving route between two points using the OSRM routing API rendered as a vector feature on an OpenLayers map.
- [Static Map Image with OpenLayers](/openlayers/static-map/): Display a non-interactive map image using the MapTiler Static Maps API alongside an interactive OpenLayers map.
- [Data-Driven Styling with OpenLayers](/openlayers/style-expression/): Style vector features dynamically based on data properties using OpenLayers style functions.

### MapTiler SDK

- [3D Building Extrusions with MapTiler SDK](/maptiler-sdk/3d-extrusion/): Add 3D building height extrusions using a fill-extrusion layer from the vector tile source.
- [3D Terrain with MapTiler SDK](/maptiler-sdk/3d-terrain/): Enable 3D terrain visualization using the SDK built-in enableTerrain helper.
- [Animated Data with MapTiler SDK](/maptiler-sdk/animate-time/): Animate map features over time by updating paint properties in a requestAnimationFrame loop with MapTiler SDK.
- [Satellite Basemap with MapTiler SDK](/maptiler-sdk/basemap-satellite/): Display a satellite imagery basemap using the MapStyle.SATELLITE constant.
- [Custom Marker Icons with MapTiler SDK](/maptiler-sdk/custom-marker-icon/): Create markers with custom HTML elements or SVG icons using the MapTiler SDK marker API.
- [Disputed Borders View with MapTiler SDK](/maptiler-sdk/disputed-borders/): Show country-specific border representations by filtering disputed boundary layers based on the claimed_by property.
- [Drawing Tools with MapTiler SDK](/maptiler-sdk/draw-tool/): Draw polygons interactively by clicking on a MapTiler SDK map, collecting vertices into a GeoJSON source.
- [Export Map as PNG with MapTiler SDK](/maptiler-sdk/export-map/): Capture the current MapTiler SDK map view as a downloadable PNG image using the canvas export method.
- [Geofencing with MapTiler SDK](/maptiler-sdk/geo-fence/): Define a polygon boundary with MapTiler SDK and check whether a clicked point falls inside or outside the geofence.
- [Geolocation Control with MapTiler SDK](/maptiler-sdk/geo-location/): Show the user's current location on the map using the built-in maptilersdk.GeolocateControl with tracking.
- [Fuzzy Location Circle with MapTiler SDK](/maptiler-sdk/geo-obfuscate/): Display an approximate location as a fuzzy circle polygon layer instead of an exact point for privacy.
- [Address Search with MapTiler SDK](/maptiler-sdk/geocode-forward/): Search for a place name and display the result on the map using the MapTiler Geocoding API and SDK.
- [Reverse Geocoding with MapTiler SDK](/maptiler-sdk/geocode-reverse/): Click the map to get the address at that location using the MapTiler Reverse Geocoding API.
- [Data-Driven Choropleth with MapTiler SDK](/maptiler-sdk/layer-choropleth/): Create a data-driven choropleth map using fill layer paint expressions with MapTiler SDK.
- [Heatmap Layer with MapTiler SDK](/maptiler-sdk/layer-heatmap/): Visualize point density using a native heatmap layer with customizable radius and color ramp.
- [Line Layers with MapTiler SDK](/maptiler-sdk/layer-line/): Draw a line on the map using a GeoJSON source and a line layer with custom paint properties.
- [Fill Layers with MapTiler SDK](/maptiler-sdk/layer-polygon/): Draw a filled polygon on the map using a GeoJSON source and a fill layer with MapTiler SDK.
- [Configure Map Gestures with MapTiler SDK](/maptiler-sdk/map-gestures/): Enable cooperative gesture handling so users must Ctrl+scroll to zoom the embedded map.
- [Globe Projection with MapTiler SDK](/maptiler-sdk/map-globe/): Display a 3D globe view using the globe projection in MapTiler SDK.
- [Initialize a Map with MapTiler SDK](/maptiler-sdk/map-init/): Create a maptilersdk.Map with built-in MapTiler cloud integration, navigation controls, and a marker.
- [Set Map Language with MapTiler SDK](/maptiler-sdk/map-language/): Change map label language at runtime with the SDK-exclusive setLanguage() method: no style reload needed.
- [Switch MapStyle with MapTiler SDK](/maptiler-sdk/map-set-style/): Dynamically change between MapTiler map styles using the MapStyle constants and the setStyle method.
- [Add Markers and Popups with MapTiler SDK](/maptiler-sdk/marker-add/): Place maptilersdk.Marker instances with Popup information windows on a MapTiler SDK map.
- [Point Clustering with MapTiler SDK](/maptiler-sdk/marker-cluster/): Cluster dense point data using a GeoJSON source with built-in clustering support in MapTiler SDK.
- [Load GeoJSON with MapTiler SDK](/maptiler-sdk/overlay-geojson/): Load and display a GeoJSON file as a styled source and layer on a MapTiler SDK map.
- [Store Locator with MapTiler SDK](/maptiler-sdk/pattern-storelocator/): Build a store locator with a sidebar list and interactive map markers using MapTiler SDK.
- [Static Map Image with MapTiler SDK](/maptiler-sdk/static-map/): Display a non-interactive map image using the MapTiler Static Maps API alongside an interactive MapTiler SDK map.
- [Style Expressions with MapTiler SDK](/maptiler-sdk/style-expression/): Style map features dynamically using data-driven expressions for color, size, and visibility in MapTiler SDK.
- [Live GPS Tracking with MapTiler SDK](/maptiler-sdk/tracking-live/): Simulate a moving marker that updates its position in real time along a path using MapTiler SDK.

## Agent Skills

- [AI Agent Skills](/skills/): Install coding skills for IDE AI assistants
- MapTiler SDK Skill: github.com/maptiler/maptiler-skills
- Leaflet Skill: github.com/mapsnippets/leaflet-skill
- MapLibre Skill: github.com/mapsnippets/maplibre-skill
- OpenLayers Skill: github.com/mapsnippets/openlayers-skill