leaflet-fusesearch

Search features in a GeoJSON layer using the lightweight JavaScript fuzzy search Fuse.js

Usage

First download Fuse.js from this repo or from Kiro's site, and load it in your page before leaflet-fusesearch.js.

Create the control L.Control.FuseSearch and add it to the Map.

var searchCtrl = L.control.fuseSearch()
searchCtrl.addTo(map);

Then load your GeoJSON layer and index the features, choosing the properties you want to index, e.g.

searchCtrl.indexFeatures(features, ['name', 'company', 'details'];

This is it ! By default the search control will appear on the top right corner of the map. This opens the search pane on the same side where you can type in the search string. The matching features are listed, with the indexed properties displayed. Clicking a feature on the list opens up the matching pop-up on the map, provided one is associated with it.

Options

The FuseSearch control can be created with the following options :

position : position of the control, the search pane shows on the matching side. Default 'topright'.
title : used for the control tooltip, default 'Search'
placeholder : used for the input placeholder, default 'Search'
maxResultLength : number of features displayed in the result list, default is null and all features found by Fuse are displayed
showResultFct : function to display a feature returned by the search, parameters are the feature and an HTML container. Here is an example :

    showResultFct: function(feature, container) {
        props = feature.properties;
        var name = L.DomUtil.create('b', null, container);
        name.innerHTML = props.name;
        container.appendChild(L.DomUtil.create('br', null, container));
        container.appendChild(document.createTextNode(props.details));
    }

In addition these options are directly passed to Fuse - more details on Fuse.js :

caseSensitive : whether comparisons should be case sensitive, default is false
threshold : a decimal value indicating at which point the match algorithm gives up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything, default 0.5

Example

I'm currently working on providing a simple example, for now have a look at my NaoMap site.

1sha1 / leaflet-fusesearch Goto Github PK