Map

Summary

Default

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 tag <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
You can now use MapLibre within the Map Kit as shown in this example.

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, 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

Map With Polygon Draw Plugin

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, 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

Map With Custom Button

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

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat