Leaflet search plugin for $GetJSON function

by Mariusz Krukar   Last Updated September 11, 2019 16:22 PM - source

I want to make my markers researchable in JSON layers.

This is how the code looks for GeoJSON layers (imported as a .js file)

var openreach = L.geoJSON(openpoor, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
    return L.circleMarker(latlng, btMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font 
color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: 
"+feature.properties.Head+"</h2><p><a href='images/" + feature.properties.Pict + "'><img src='images/" + feature.properties.Pict + "' style='width:200px;height:250px;'></a><p>"+feature.properties.Description+"</p><a>"+feature.properties.URL+"</a>");

}

    }).addTo(map);

which finish:

L.control.search({
layer: L.layerGroup ([openreach]),
initial: false,
propertyName: 'myKey', // Specify which property is searched into.
zoom: 18,
position: 'topright'

}) .addTo(map);

However, if I take into account an external .JSON file, which comes like this:

var url1 = "Peterborough.json";
var url2 = 'test.json';
var url3 = 'bt.json';

and then is assigned to:

var job;    
var job2;
var job3;

in order to process with $GetJSON function like this:

$.getJSON(url1, function(data) {

    job = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.League),
            fillColor:  getColor(feature.properties.League),
            fillOpacity: 0.8

            });  //.bindTooltip(feature.properties.Name);
        },

            onEachFeature: function (feature, layer) {
                layer._leaflet_id = feature.properties.Owner;


                var popupContent = "<p>The <b>" +
                feature.properties.Owner + "</b> play here,</br> They are in 
the " +
                feature.properties.League + "</br>" +
                '<a href="'+ feature.properties.Website +'" 
target="_blank">Website</a></p>' ;

                if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
                    layer.bindPopup(popupContent);

            }

            }).addTo(map);
    });

I was attending to implement the leaflet search plugin this way:

L.control.search({
layer: L.layerGroup ([job, job2, job3]),
initial: false,
propertyName: 'Owner', // Specify which property is searched into.
zoom: 18,
position: 'bottomright'
})
.addTo(map);

Where the propertyName is assigned to one of the JSON properties...

File doesn't work at all, although only all elements underneath this snippet are gone, which means that some minor error occur somewhere.

The link to plugin is here, and as I said for GeoJSON layer works absolutely fine. How it behaves then, when we are importing a .JSON file as an URL?

https://github.com/stefanocudini/leaflet-search

If I open the Leaflet-search.js file, then at first glance I can see:

L.Control.Search = L.Control.extend({

includes: L.version[0]==='1' ? L.Evented.prototype : L.Mixin.Events,


   options: {
    url: '',                        //url for search by ajax request, ex: "search.php?q={s}". Can be function to returns string for dynamic parameter setting
    layer: null,                    //layer where search markers(is a L.LayerGroup)             
    sourceData: null,               //function to fill _recordsCache, passed searching text by first param and callback in second       

etc

so I replaced: url: '' with url: '.json' but without result.

Is it possible to make the leaflet-search plugin working with fetching an external URL .json file?



Related Questions


Control to select data source on Leaflet map

Updated April 03, 2016 08:09 AM


On uncheck of the checkbox function is called again

Updated August 24, 2016 08:09 AM

Loading GeoJSON file into map in Leaflet

Updated July 30, 2019 06:22 AM