Leaflet.PinSearch

A leaflet plugin for a Search bar component with autocomplete on all existing pins on the map.

Demo

Features

• Autocomplete feature on all pin titles.
• Configurable height and width for the search bar.
• Configurable limit for the maximum number of search results displayed.

How to install the plugin

Install using npm

npm i leaflet.pinsearch

Include files using npkg CDN

<link rel="stylesheet" href="https://unpkg.com/leaflet.pinsearch/src/Leaflet.PinSearch.css" crossorigin=""></script>

<script src="https://unpkg.com/leaflet.pinsearch/src/Leaflet.PinSearch.js" crossorigin=""></script>

Example usage

See the example.html file for sample code.

        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
            maxZoom: 18,
        }).addTo(map);

        // Dummy markers
        L.marker([51.505, -0.09], { title: 'Marker 1' }).addTo(map);
        L.marker([51.51, -0.1], { title: 'Marker 2' }).addTo(map);
        L.marker([51.515, -0.09], { title: 'Marker 3' }).addTo(map);


        // PinSearch component
        var searchBar = L.control.pinSearch({
            position: 'topright',
            placeholder: 'Search...',
            buttonText: 'Search',
            onSearch: function(query) {
                console.log('Search query:', query);
                // Handle the search query here
            },
            searchBarWidth: '200px',
            searchBarHeight: '30px',
            maxSearchResults: 3
        }).addTo(map);

pinSearch options

Option | Description ------------------------------| ------------ position | Places the search control according to one of the following options: topleft, topright, bottomleft, bottomright placeholder | Placeholder text inside the search input. buttonText | Set this to "Search" onSearch | Function to handle the search query, the selected result is stored as query searchBarWidth | Width of the search control (e.g. 200px) searchBarHeight | Height of the search control (e.g. 30px) maxSearchResults | Maximum amount of results to be shown by the autocomplete.