API Documentation
Import components, helpers, and types from svelte-maplibre. The pages below are
generated from the library source code. Each component page shows its props, their types, and
the examples that use it.
Components
Map
- MapLibre Create a MapLibre map. Put all other components of this library inside this component's children.
- MapEvents Listen to events on the map from inside a MapLibre component. Each on* prop adds a listener for the event with the same name.
- ZoomRange Set minzoom and maxzoom for all components inside the slot. By default this only propagates the value to the inner layers.
- Terrain Show 3D terrain on the map. Set source to the ID of a RasterDEMTileSource.
Sources
- GeoJSON Add a GeoJSON source to the map. data can be a GeoJSON object or a URL.
- TopoJSON Load TopoJSON data, convert it to GeoJSON, and add it to the map as a GeoJSON source. Give the data with data or with url. If you give both, url is used.
- VectorTileSource Add a vector tile source to the map. Give the tiles with url (a TileJSON URL) or with tiles.
- RasterTileSource Add a raster tile source to the map. Give the tiles with tiles (an array of tile URLs) or with url.
- RasterDEMTileSource Add a raster DEM (elevation) tile source to the map. Use it with Terrain or with a HillshadeLayer.
- ImageSource Add an image to the map as a source. url is the image and coordinates gives the four corners of the image on the map.
- JoinedData Join a table of data to the features of a source with feature state. Put this component inside a source component, such as VectorTileSource or GeoJSON.
Layers
- Layer A component that handles a generic layer. This is intended for use by other type-specific layer components, such as FillLayer, and usually you will want to use one of those in your code instead of directly using this component.
- BackgroundLayer Add a MapLibre background layer to the map. A background layer fills the full map with a color or a pattern.
- CircleLayer Add a MapLibre circle layer to the map. It shows point features as circles.
- FillLayer Add a MapLibre fill layer to the map. It shows polygon features as filled areas.
- FillExtrusionLayer Add a MapLibre fill-extrusion layer to the map. It shows polygon features as 3D shapes with a height.
- HeatmapLayer Add a MapLibre heatmap layer to the map. It shows the density of point features as a heatmap.
- HillshadeLayer Add a MapLibre hillshade layer to the map. It shows terrain shading from a raster DEM source, such as RasterDEMTileSource.
- LineLayer Add a MapLibre line layer to the map. It shows line features, and the outlines of polygon features.
- RasterLayer Add a MapLibre raster layer to the map. It shows raster tiles, such as from a RasterTileSource.
- SymbolLayer Add a MapLibre symbol layer to the map. It shows icons and text labels for features.
- MarkerLayer Manages a set of HTML markers for the features in a source. This acts similar to a Layer component, but is not actually registered with the map as a layer. Markers for non-point features are placed at the geometry's center.
- DeckGlLayer Add a deck.gl layer to the map. Set type to the deck.gl layer class and data to the array of data items.
Markers and Popups
- Marker Show a marker on the map at lngLat. The children of this component become the marker element, so you can use any HTML as the marker.
- DefaultMarker Show the standard MapLibre marker pin on the map at lngLat. Use Marker instead if you want to use your own HTML as the marker.
- Popup Show a popup on the map. Put it inside a layer or marker component to open it on events from that layer or marker. You can also put it directly inside MapLibre and control it with open and lngLat.
Controls
- NavigationControl Add the MapLibre navigation control to the map. This control shows zoom buttons and a compass.
- GeolocateControl Add the MapLibre geolocate control to the map. This control shows a button that moves the map to the location of the user.
- FullscreenControl Add the MapLibre fullscreen control to the map. This control shows a button that toggles fullscreen mode.
- ScaleControl Add the MapLibre scale control to the map. This control shows a scale bar for the current zoom level.
- AttributionControl Add the MapLibre attribution control to the map. This control shows the attribution text for the map sources.
- TerrainControl Add the MapLibre terrain control to the map. This control shows a button that turns 3D terrain on and off.
- Control Add a custom control to the map. The children of this component become the content of the control.
- ControlGroup Show a group of controls with the MapLibre maplibregl-ctrl-group styling. Use it inside a Control component to hold ControlButton components.
- ControlButton Show a button with the styling of the built-in MapLibre control buttons. Use it inside a ControlGroup.
Helpers and Types
- Expressions
Helpers that create MapLibre style expressions.
- Filters
Helpers that create and combine MapLibre filter expressions.
- Source Helpers
Functions that add and remove map sources safely. These are useful when you write your own source components.
- Context
The Svelte context that the components use to communicate. Use these to write your own components that work with the map.
- Types
TypeScript types used by the components, and types re-exported from MapLibre.