Leaflet search plugin for $GetJSON function

Question

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?

Answer 1

Sorry, I may have caused this problem for you. Here is a better way. http://www.gistechsolutions.com/leaflet/DEMO/sports/index2.html

Here I define the layer first using null as the data source, then use getJSON to add the data to the layer. Then the layer control works as expected.

Better code:

//define the layer
var bbTeam = L.geoJson(null, {

    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.Team;

        var popupContent = "<p>The <b>" +
        feature.properties.Team + "</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);
    }

});

//Load the data
$.getJSON(url1, function(data) {            
    bbTeam.addData(data).addTo(map);
}); 

Answer 2

I found an answer:

We must place the L.Control.search inside the $getJSON function. $GetJson function (in my understanding) is a "separate body" within the whole code, so things placed outside it cannot be applied.

The code should look like this:

var url1 = "Peterborough.json"; //.json file, where we fetch the data from
var job; //setting variable for our layer

  $.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.Directory +'" target="_blank">Local 
 directory</a></p>' ;

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

            }

            }).addData(data).addTo(map); // adding the layer fetched from .json file to the map
            //---------------adding the leaflet-search plugin inside the $GetJSON function ----------
            L.control.search({
layer: job,
initial: false,
propertyName: 'Owner', // Specify which property is searched into.
zoom: 18,
position: 'topleft'
  }).addTo(map);

    }); // $GetJSON function enclosure for this layer