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:
- Install the npm package using yarn add maplibre-gl
- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: @import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");
OR include it as a link in the
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
Notes :
- To enable custom buttons, set zoomBtns
and flyTo
to true and pass in zoomInClick
, zoomOutClick
and flyToClick
as shown in this doc example.
- Use mapTheme.marker
to set the Marker color.
- To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
- scrollZoom
has been disabled in these doc examples for page usability
import React, { useRef, useEffect, useState } from 'react' import { Map } from '../../' import maplibregl from 'maplibre-gl' import mapTheme from '../pbMapTheme' 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)}} {...props} > <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:
- Click the "draw box" icon to activate the polygon tool
- Click on a spot on the map to start drawing
- Continue clicking to create new points, defining the boundaries of the polygon
- Press enter or re-click the first point to finish the polygon
- Once drawn, polygons can be selected on click and then moved, by dragging-and-dropping the entire shape; resized, by dragging-and-dropping any boundary point(s); or deleted, by clicking the "trash" button.
import React, { useRef, useEffect } from 'react' import { Map } from '../../' import maplibregl from 'maplibre-gl' import MapboxDraw from "@mapbox/mapbox-gl-draw"; import mapTheme from '../pbMapTheme' const MapWithPlugin = (props) => { //set Map instance to access from outside useEffect const mapContainerRef = useRef(null) //Set default position const defaultPosition = [-75.379143, 39.831200] //This function should contain all maplibre related code const loadMap = ( { target: map }) => { //set marker/pin /* eslint-disable-next-line */ const marker = 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); } useEffect(() => { new maplibregl.Map({ container: mapContainerRef.current, center: [-75.379143, 39.831200], ...mapTheme.mapConfig }).on('load', loadMap) }, []) return ( <Map {...props} > <div ref={mapContainerRef} style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> </Map> ) } export default MapWithPlugin