No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
dist Added the initial code. Feb 27, 2017
examples map.html Feb 27, 2017
src Added the initial code. Feb 27, 2017
.gitattributes Added the initial code. Feb 27, 2017
.gitignore Initial commit Feb 27, 2017
LICENSE Added a license file. Feb 28, 2017
README.md updated the ReadMe file. Feb 28, 2017

README.md

leaflet-custom-searchbox

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

Requirements

Demo

https://8to5developer.github.io/leaflet-custom-searchbox/

Usage

Instructions

<script src="../dist/leaflet.customsearchbox.min.js"></script>
<link href="../dist/searchbox.min.css" rel="stylesheet" />

Code Example

   <script>
     $(document).ready(function () {
        
        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 searchboxControl=createSearchboxControl();
        var control = new searchboxControl({
            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" },
                ]
            }
        });
        control._searchfunctionCallBack = function (searchkeywords)
        {
            if (!searchkeywords) {
                searchkeywords = "The search call back is clicked !!"
            }
            alert(searchkeywords);
        }
        map.addControl(control);
    });
    
    function button2_click()
    {
        alert('button 2 clicked !!!');
    }
    </script>