Leaflet Extended (React)

A way to load and perform filters faster on API returns for maps

Leaflet Extended is a mechanism that transforms your data into GeoJSON and transforms it into a faster and more dynamic map, with filters and layers that are much more practical to configure within React.

Features

• Easier and more optimized popups
• Property based search
• Dynamic and easy-to-configure Filters and Layers
• Transformation of data into GeoJSON for easy handling and optimization

Tech

| Prop | Description | Optional | DataType | Default | | ------ | ------ | ------ | ------ | ------ | | baseTileUrl | | Yes | String | https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png | | baseTileAttribution | | Yes | String | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | | mapLayers | array of map layers | No | Layer Array Object | | markerData | array of data to be consumed | Yes | Data Array Object | [] | | circleMarkerStyle | style for marker | Yes | Style | { stroke: false, opacity: 1, fillOpacity: 1, radius: 8, fillColor: "#ff7800" } | | searchIdentifiers={['name', 'city'] | list of property names used in searches | Yes | String Array | [] | | PopupContent | popup content | Yes | Popup Content | html | | enablePopup | enable or disable popups | Yes | Boolean | true | | multiIdentifier | unique identifier property name | Yes | String | name | | latMarkerPropName | latitude property name | Yes | String | lat | | lngMarkerPropName | longitude property name | Yes | String | lng |

Layer Array Object

[{
    label: string, // layer name, don't repeat
    style: (f) => {
        // properties -> array of data object
        const { properties } = f;
        return Style; // return style to the marker
    },
    filters: [
        {
          label: string,  // label for the filter
          color: string,  // hex code
          action: string, // single value, do not repeat (internal use, will be removed in the future)
          filter: { 
            prop: string, // data prop name for the filters
            value: string // data value wanted
          }
        }
    ]
}]

Data Array Object

The data shown is not optional, it is required in your data object.

[{
    ...your data
    lat: string | number, // the prop name can be changed by latMarkerPropName
    lng: string | number, // the prop name can be changed by lngMarkerPropName
    name: string          // the prop name can be changed by multiIdentifier
}]

Popup Content

// data -> data object
({ data }) => {
    return <></>; // return element
}

Search

// identifier, value to search -> return true or false
searchElement(string, any);

const mapRef = useRef();

const result = await ref.current.searchElement('name', 'mateus');

return (
    <LeafletExtended
    ...props
    ref={mapRef}
    searchIdentifiers={['name', 'city']}
    />
)

Installation

npm i --save leaflet-extended