MapTiler SDK Examples

29

An all-in-one SDK with built-in geocoding, terrain, and cloud tiles. All examples use MapTiler Cloud tiles.

mapMap Display & Interaction

3D extruded buildings around Notre-Dame in Paris rendered with MapTiler SDK.

3D Building Extrusions with MapTiler SDKAdd 3D building height extrusions using a fill-extrusion layer from the vector tile source.

3D terrain of the Mont Blanc massif near Chamonix rendered with MapTiler SDK.

3D Terrain with MapTiler SDKEnable 3D terrain visualization using the SDK built-in enableTerrain helper.

Satellite aerial view of Rome, Italy shown as a MapTiler SDK basemap style.

Satellite Basemap with MapTiler SDKDisplay a satellite imagery basemap using the MapStyle.SATELLITE constant.

South Asia map with Default, India, China, and Pakistan buttons for viewing disputed border claims in MapTiler SDK.

Disputed Borders View with MapTiler SDKShow country-specific border representations by filtering disputed boundary layers based on the claimed_by property.

Paris map configured with cooperative gesture handling, requiring Ctrl+scroll to zoom, in MapTiler SDK.

Configure Map Gestures with MapTiler SDKEnable cooperative gesture handling so users must Ctrl+scroll to zoom the embedded map.

3D globe view of Earth centered on Europe and Africa against a starfield, rendered with MapTiler SDK.

Globe Projection with MapTiler SDKDisplay a 3D globe view using the globe projection in MapTiler SDK.

MapTiler SDK map centered on Paris with a marker, using built-in MapTiler cloud tiles.

Initialize a Map with MapTiler SDKCreate a maptilersdk.Map with built-in MapTiler cloud integration, navigation controls, and a marker.

Central Europe map with EN, DE, FR, CS, and JA buttons for switching label language via setLanguage().

Set Map Language with MapTiler SDKChange map label language at runtime with the SDK-exclusive setLanguage() method: no style reload needed.

Paris map with Streets, Satellite, Outdoor, and Topo buttons for switching MapStyle in MapTiler SDK.

Switch MapStyle with MapTiler SDKDynamically change between MapTiler map styles using the MapStyle constants and the setStyle method.

Non-interactive static map image of Rome generated with the MapTiler Static Maps API.

Static Map Image with MapTiler SDKDisplay a non-interactive map image using the MapTiler Static Maps API alongside an interactive MapTiler SDK map.

pin_dropMarkers, Annotations & Overlays

Custom Marker Icons with MapTiler SDKCreate markers with custom HTML elements or SVG icons using the MapTiler SDK marker API.

Central Europe choropleth map coloring countries by value using MapTiler SDK fill layers.

Data-Driven Choropleth with MapTiler SDKCreate a data-driven choropleth map using fill layer paint expressions with MapTiler SDK.

Paris map with a line connecting Musee d'Orsay to the city center in MapTiler SDK.

Line Layers with MapTiler SDKDraw a line on the map using a GeoJSON source and a line layer with custom paint properties.

Paris map with a filled purple polygon area drawn using MapTiler SDK.

Fill Layers with MapTiler SDKDraw a filled polygon on the map using a GeoJSON source and a fill layer with MapTiler SDK.

Paris map with two MapTiler SDK markers and popups.

Add Markers and Popups with MapTiler SDKPlace maptilersdk.Marker instances with Popup information windows on a MapTiler SDK map.

Paris region map with markers grouped into numbered clusters using MapTiler SDK's built-in clustering.

Point Clustering with MapTiler SDKCluster dense point data using a GeoJSON source with built-in clustering support in MapTiler SDK.

United States West Coast map with circles sized and colored by data value using MapTiler SDK expressions.

Style Expressions with MapTiler SDKStyle map features dynamically using data-driven expressions for color, size, and visibility in MapTiler SDK.

searchGeocoding & Search

Northern France and Belgium map with an address search box for MapTiler SDK geocoding.

Address Search with MapTiler SDKSearch for a place name and display the result on the map using the MapTiler Geocoding API and SDK.

Paris map used to demonstrate click-to-reverse-geocode lookups with MapTiler SDK.

Reverse Geocoding with MapTiler SDKClick the map to get the address at that location using the MapTiler Reverse Geocoding API.

my_locationLocation & Real-Time

London map with a purple rectangular geofence boundary drawn over the city in MapTiler SDK.

Geofencing with MapTiler SDKDefine a polygon boundary with MapTiler SDK and check whether a clicked point falls inside or outside the geofence.

Central Europe map used to demonstrate the built-in GeolocateControl in MapTiler SDK.

Geolocation Control with MapTiler SDKShow the user's current location on the map using the built-in maptilersdk.GeolocateControl with tracking.

Paris map with a dashed circle standing in for an exact location, for privacy, in MapTiler SDK.

Fuzzy Location Circle with MapTiler SDKDisplay an approximate location as a fuzzy circle polygon layer instead of an exact point for privacy.

Paris map with a simulated moving marker following a path near the Seine in MapTiler SDK.

Live GPS Tracking with MapTiler SDKSimulate a moving marker that updates its position in real time along a path using MapTiler SDK.

insightsAnalytics & Advanced

United States West Coast map with hundreds of animated data points rendered with MapTiler SDK.

Animated Data with MapTiler SDKAnimate map features over time by updating paint properties in a requestAnimationFrame loop with MapTiler SDK.

Prague map with Finish and Clear controls for drawing polygons in MapTiler SDK.

Drawing Tools with MapTiler SDKDraw polygons interactively by clicking on a MapTiler SDK map, collecting vertices into a GeoJSON source.

Paris map ready to be captured as a PNG image using the MapTiler SDK canvas export method.

Export Map as PNG with MapTiler SDKCapture the current MapTiler SDK map view as a downloadable PNG image using the canvas export method.

United States West Coast map with a purple heatmap layer visualizing point density in MapTiler SDK.

Heatmap Layer with MapTiler SDKVisualize point density using a native heatmap layer with customizable radius and color ramp.

United States map with GeoJSON point markers loaded across several states in MapTiler SDK.

Load GeoJSON with MapTiler SDKLoad and display a GeoJSON file as a styled source and layer on a MapTiler SDK map.

Paris store locator with a sidebar list of five shops and a matching map marker in MapTiler SDK.

Store Locator with MapTiler SDKBuild a store locator with a sidebar list and interactive map markers using MapTiler SDK.

Compare Libraries Official Docs

auto_awesome

Build maps using MapTiler SDK with AI

Install the MapTiler SDK skill in your IDE and let AI write the code for you.

auto_awesomeGet skills keyGet a free API key

All examples use MapTiler maps and require a free API key.