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