12.9.1

Map

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

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.