Leaflet – How to Install Leaflet Search Plugin Without Using Npm

leafletnode-jssearch

I am not familiar with Node.js or npm at all, but my IT has told me node.js/npm is not compatible with our IIS, and the only search plugins to add on to leaflet are using npm to install them.

I did a search here and found this solution without npm – leaflet-control-geocoder, but it searches address databases such as google or bing, not the geojson data I have plugged into my map that I need to be able to search.

So my question is, is there a way to use the Leaflet Search plugin or leaflet-fusesearch plugin without using npm to install it?

Best Answer

I'm assuming that you want to use the leaflet-search plugin, without using NPM. This is possible, using these steps:

Go to https://github.com/stefanocudini/leaflet-search
Click on the Clone or download button, and download as Zip
Unzip the downloaded file.
Copy the dist & the images folder to your application.
In your Application's HTML file, add links to the CSS and JS file which are present in the dist folder (i.e. leaflet-search.min.css & leaflet-search.min.js).
You should now be able to access the L.Control.Search object in your JavaScript code.

Related Solutions

[GIS] Leaflet-Search plugin error

Here I load the search control, define the layer to search, the field to search, and then just use setView to zoom to the point. I set the zoom to 12 for grins. Since it's a point, I just set the zoom for all my points the same.

http://www.gistechsolutions.com/leaflet/DEMO/baseball/Baseball2.html

    var searchControl = new L.Control.Search({
    layer: bbTeam,
    propertyName: 'Name',
    marker: false,
    moveToLocation: function(latlng) {
        map.setView(latlng, 12); // set the zoom
    }
});

[GIS] Leaflet search and popup at other position

Since the popup already opens in a div on click, you want the search selection to open in the same div.

I have a write up I did for a class using JQuery;s autocomplete as a search tool. When loading the layer, I also load an array that I use for the search, In my case a state name value, Since this is unique I also loaded it as the Leaflet_ID. by doing I could associate the search name with a specific feature, then use the select to fire a click event with the same result as if you just clicked on it. I included a zoom to feature also.

My write up http://www.gistechsolutions.com/leaflet/DEMO/Search/index.html There is also a working example off of it.

Best Answer

Related Solutions

[GIS] Leaflet-Search plugin error

[GIS] Leaflet search and popup at other position

Related Question