natecarlson / leaflet.pinsearch Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 75.30% CSS 7.37% HTML 17.33%

leaflet.pinsearch's Introduction

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.

Recommend Projects