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(""); OR include it as a link in the tag <link href='' 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
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.
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.

Available Props