A web component designed to easily integrate a MapLibre map into web applications. It supports customization options, interactivity, and seamless embedding, enhancing map functionality in your projects.
MapLibre GL is an open-source library used for interactive, customizable maps rendered in web browsers or mobile devices using WebGL. It originated as a community-driven fork of the popular Mapbox GL JS library after Mapbox changed its licensing model.
Key Features of MapLibre GL:
- WebGL-Powered: Uses WebGL to render vector tiles directly in the browser, enabling smooth and dynamic maps with zooming, panning, and rotation capabilities.
- Customizable Styles: Allows users to create and apply custom map styles defined in JSON files (style specifications).
- Open-Source & Community-Driven: Fully open-source with contributions from the community, ensuring transparency and flexibility.
- Performance: Optimized for rendering large datasets and smooth user interactions.
- Cross-Platform: Compatible with modern web browsers and has a mobile version, MapLibre Native, for native apps.
First step as with all the webcomponts is to link the scripts the loads the components needed:
<script
type="module"
src="https://cdn.kort.xyz/kortxyz-components@latest/kortxyz-components.esm.js">
</script>
A basic example is the make a map that links a mapstyle from somewhere. It can be done with the following code:
<kortxyz-maplibre
mapstyle="https://demo.ldproxy.net/zoomstack/styles/Light?f=mbs">
</kortxyz-maplibre>This creates the following:
Comments ()