This kit provides a wrapping class to place around the MapLibre library. Complete docs for using the library can be found here.
Basic setup to start using MapLibre:
yarn add maplibre-gl
@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");
OR include it as a link in the tag <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
Notes :
zoomBtns
and flyTo
to true and pass in zoomInClick
, zoomOutClick
and flyToClick
as shown in this doc example. mapTheme.marker
to set the Marker color. scrollZoom
has been disabled in these doc examples for page usabilityimport React, { useRef, useEffect, useState } from 'react' import { Map, mapTheme } from 'playbook-ui' import maplibregl from 'maplibre-gl' const MapDefault = (props) => { //set Map instance to access from outside useEffect const [mapInstance, setMapInstance] = useState(null) const mapContainerRef = useRef(null) //Set default position const defaultPosition = [-75.379143, 39.831200] // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})} const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})} const handleFlyTo = (map) => {map.flyTo({ center: defaultPosition, ... mapTheme.flyToConfig });} //This function is called by the useEffect when map instance first loads const loadMap = ( { target: map }) => { //set marker/pin new maplibregl.Marker({ color: mapTheme.marker, }).setLngLat(defaultPosition) .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup .addTo(map); // disable map zoom when using scroll map.scrollZoom.disable(); //add attributioncontrols map.addControl(new maplibregl.AttributionControl({ compact: true })); //set map instance setMapInstance(map) } useEffect(() => { new maplibregl.Map({ container: mapContainerRef.current, center: defaultPosition, ...mapTheme.mapConfig }).on('load', loadMap) }, []) return ( <Map flyTo flyToClick={()=> {handleFlyTo(mapInstance)}} zoomBtns zoomInClick={() => {handleZoomIn(mapInstance)}} zoomOutClick={()=> {handleZoomOut(mapInstance)}} > <div ref={mapContainerRef} style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> </Map> ) } export default MapDefault
Various plugins are available for use with MapLibre, one of which is the mapbox-gl-draw. This plugin is recommended by MapLibre if you need to add the functionality of drawing polygons on the map.
To test this tool:
import React, { useRef, useEffect, useState } from 'react' import { Map, mapTheme } from 'playbook-ui' import maplibregl from 'maplibre-gl' import MapboxDraw from "@mapbox/mapbox-gl-draw"; const MapWithPlugin = (props) => { //set Map instance to access from outside useEffect const [mapInstance, setMapInstance] = useState(null) const mapContainerRef = useRef(null) //Set default position const defaultPosition = [-75.379143, 39.831200] // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})} const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})} const handleFlyTo = (map) => {map.flyTo({ center: defaultPosition, ... mapTheme.flyToConfig });} //This function should contain all maplibre related code const loadMap = ( { target: map }) => { //set marker/pin new maplibregl.Marker({ color: mapTheme.marker, }).setLngLat(defaultPosition) .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup .addTo(map); //add maplibre default zoom controls // map.addControl(new maplibregl.NavigationControl({showCompass: false})) // disable map zoom when using scroll map.scrollZoom.disable(); //Add polygon draw button using map-box-gl-draw plugin var draw = new MapboxDraw({ displayControlsDefault: false, controls: { polygon: true, trash: true } }); map.addControl(draw); //add attributioncontrols map.addControl(new maplibregl.AttributionControl({ compact: true })); //set map instance setMapInstance(map) } useEffect(() => { new maplibregl.Map({ container: mapContainerRef.current, center: defaultPosition, ...mapTheme.mapConfig }).on('load', loadMap) }, []) return ( <Map flyTo flyToClick={()=> {handleFlyTo(mapInstance)}} zoomBtns zoomInClick={() => {handleZoomIn(mapInstance)}} zoomOutClick={()=> {handleZoomOut(mapInstance)}} > <div ref={mapContainerRef} style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> </Map> ) } export default MapWithPlugin
If you want to add custom buttons to the Map, you can use the MapCustomButton
component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.
import React, { useRef, useEffect, useState } from 'react' import { Map, mapTheme, MapCustomButton } from 'playbook-ui' import maplibregl from 'maplibre-gl' const MapWithCustomButton = (props) => { //set Map instance to access from outside useEffect const [mapInstance, setMapInstance] = useState(null) const mapContainerRef = useRef(null) //Set default position const defaultPosition = [-75.379143, 39.831200] // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})} const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})} const handleFlyTo = (map) => {map.flyTo({ center: defaultPosition, ... mapTheme.flyToConfig });} //This function is called by the useEffect when map instance first loads const loadMap = ( { target: map }) => { //set marker/pin new maplibregl.Marker({ color: mapTheme.marker, }).setLngLat(defaultPosition) .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup .addTo(map); // disable map zoom when using scroll map.scrollZoom.disable(); //add attributioncontrols map.addControl(new maplibregl.AttributionControl({ compact: true })); //set map instance setMapInstance(map) } useEffect(() => { new maplibregl.Map({ container: mapContainerRef.current, center: defaultPosition, ...mapTheme.mapConfig }).on('load', loadMap) }, []) return ( <Map > <Map.Controls flyTo flyToClick={()=> {handleFlyTo(mapInstance)}} zoomBtns zoomInClick={() => {handleZoomIn(mapInstance)}} zoomOutClick={()=> {handleZoomOut(mapInstance)}} > <MapCustomButton icon="home" onClick={() => alert("button clicked!")} /> <MapCustomButton icon="search" onClick={() => alert("button clicked!")} /> </Map.Controls> <div ref={mapContainerRef} style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> </Map> ) } export default MapWithCustomButton