Nightmarish Pawnshop Mystic

    leaflet-searchbox

    1.0.6 • Public • Published

    leaflet-searchbox NPM version David: dependencies npm: license

    A google map style search box which includes a side panel slider control.

    depends on https://github.com/smeijer/leaflet-geosearch

    Demo

    http://leaflet-searchbox.bungos.me/

    Snapshots

    Code Example

    const L = require('leaflet');
    import 'leaflet/dist/leaflet.css'
    import 'leaflet-geosearch/assets/css/leaflet.css';
    import SearchBox from 'leaflet-searchbox'
    import 'leaflet-searchbox/dist/style.css'
     
    function button2_click() {
        console.log('button 2 clicked !!!');
    }
     
    var map = L.map('map').setView([51.505, -0.09], 5);
    map.zoomControl.setPosition('topright');
    map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { attribution: 'Map data <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }
    ));
    var control = new SearchBox({
        // remove these if dont need sidebar
        sidebarTitleText: 'Header',
        sidebarMenuItems: {
            Items: [
                { type: "link", name: "Link 1 (github.com)", href: "http://github.com", icon: "icon-local-carwash" },
                { type: "link", name: "Link 2 (google.com)", href: "http://google.com", icon: "icon-cloudy" },
                { type: "button", name: "Button 1", onclick: "alert('button 1 clicked !')", icon: "icon-potrait" },
                { type: "button", name: "Button 2", onclick: "button2_click();", icon: "icon-local-dining" },
                { type: "link", name: "Link 3 (stackoverflow.com)", href: 'http://stackoverflow.com', icon: "icon-bike" },
     
            ]
        }
    });
     
    map.addControl(control);
    map.on('geosearch/showlocation', x => {
        console.log(x)
        L.marker(x.location.latlng, {
            icon: new L.Icon({
                iconUrl: marker,
                iconRetinaUrl: marker2x,
                shadowUrl,
                className: "geosearch-location"
            }), draggable: false
        }).addTo(map);
    })

    Options

    Option Type Default Description
    provider Provider OpenStreetMapProvider provider from leaflet-geosearch
    resultItemClickCallback callback resultItemClickCallback default panTo to location fire 'geosearch/showlocation' event and hide search result. context:SearchBox
    suggest callback suggest provide suggest when query locationcontext:SearchBox
    resultItemTemplate string see source result item template use lodash.template

    Acknowledgments

    leaflet-searchbox was inspired by leaflet-custom-searchbox

    Some thing I did

    • fix some styles
    • with leaflet-geosearch's osm provider supports searching
    • make it more modernize and modularize

    Keywords

    none

    Install

    npm i leaflet-searchbox

    DownloadsWeekly Downloads

    55

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    23

    Last publish

    Collaborators

    • bung87