PureLeafletMap
A React map component that allows geoJSON shapes to be drawn, edited, and loaded into leaflet layers
Built with leaflet.js and leaflet.pm
Leaflet Geosearch uses the Google Provider
Check index.d.ts to see the props.
Getting Started:
npm install pure-leaflet
Usage
import Map from 'pure-leaflet'
Props:
tileProvider:
Type: string
optional: true
Default: OpenStreetMap.Mapnik
Description: List of providers are Here
Folling keys are MAP_CREATOR.variant ex: Esri.WorldStreetMap
editable
Type: boolean
Default: true
Description: Toggle edit/draw control
cutMode
Type: boolean
Default: false
Requires: editable: true
Description: Toggles ability to cut polygons/shapes
onShapeChange
Type: (Array<geoJSON>) => {}
Default: noop
Description: Fired when a shape is drawn/edited on map
features:
Type: Array<geoJSON>
Default: null
Description: Array of geoJSON features to be drawn on the map
searchProvider:
Type: string
Default: google
Supported Providers:
- ESRI:
esri - GoogleMaps*:
google - Open Street maps:
openstreet - LocationIQ*:
loqIQ - Bing*:
bing - Open Cage:
opencage
- providers need an API key for access
apiKey:
Type: string
Default: ''
Description: API key for Google maps
center:
Type: [lat, lng]
Default: [38.194706, -85.71053]
Description: The starting center position for the map
markerHtml:
Type: string
Default: <svg width="8" height="8" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="4" cy="4" r="4" stroke="red" fill="red" stroke-width="0" /></svg>
Description: Icon for marker when searching
mapCount:
Type: number
Default: ''
Description: Interger to render more than 1 map on the same page. (i.e....
mapCount={1} makes Map Div ID:mapid1)
getBounding:
Type: Function
Default:false
Optional: true
Description: Function that returns the bounding box of the current visible map. Fired on zoomEnd
Example: (data) => data where data is:
{ "_southWest": { "lat": 37.54239958054067, "lng": -99.90966796875001 }, "_northEast": { "lat": 39.404366615861036, "lng": -96.40777587890625 } zoom: 13 }
hideSearch:
Type: boolean
Optional: true
Default: false
Description: A flag to disable/hide the search button included on the map.
geoLocate:
Type: type ResultType = { x: string // lon, y: string // lat, label: string // formatted address bounds: string[][] raw: RawType // raw provider result };
Optional: true
Description: Allows outside results from geolocation to be passed to the map. For more informations about types look in index.d.ts
NOTE: Currently only works with `openstreet` as the `provider`.
tooltipContent:
Type: { comp?: string; func?: () => void tooltip?: string; values?: Array<string> }
Optional: true
Description:
comp: is the popup content when a marker is clicked
func: function to pass into popup
tooltip: tooltip content.
values: If template string is used, This is the array of fields to check in the features properties field.
Example: This works for popup/tooltip
comp: `<div>this is a {var}</div>`
values: ['var']
and the GeoJSON:
{
type: 'Feature',
properties: {
var: 'test'
key: 'cbb7672e-1e85-4c0b-8bcb-5bfc5af2d736',
},
geometry: {
type: 'Point',
coordinates: [-85.76399, 38.257058],
},
},```
compiles to
```<div>this is a test</div>```