[GIS] Querying GeoJSON polygons from Django models in Leaflet

geojsonleafletquery

I'm developing an application in GeoDjango and using Leaflet to show my data.I have loaded my data successfully into the map and added a sidebar where I have my textboxes to input values and a search button. I want to filter data depending on the inserted parameters in the textboxes.
I found an example at http://ipasic.com/article/query-and-filter-leaflet-map-layers/ which uses point data.
Was wondering how to handle polygon data.

Textboxes section

<ul>
          <p><strong>LR No:</strong></p>
            <input type="text" id="lrno" value="" size="30" />              
          <br>
          <p><strong>Parcel ID:</strong></p>
            <input type="text" id="idno" value="" size="30" />     
          <br>
          <p><strong>Parcel No:</strong></p>
              <input type="textbox" id="parcel_no" value="" size="30">
          <br>
          <br>
          <button id="searchbutton" role="button" class="btn btn-primary">Search</button>
          <button id="resetbutton" role="button" class="btn btn-primary">Reset</button>
        </ul>
        <div id="results">
            <h2>Results</h2>
        </div>

Map.js

    var parcel = L.geoJson();                                               
    var dataurl = '/data/';
    $.getJSON(dataurl, function (data) {
    parcel.addData(data).setStyle(featureStyle);
    parcel.eachLayer(function (layer) {     

layer.on('click',function(e){
    var layer = e.target;       
    this.setStyle({
        weight: 4,
        opacity: 1,
        color: 'orange',
        dashArray: '3'
    });
    if (!L.Browser.ie && !L.Browser.opera) {
        this.bringToFront();
    }
    info.update(layer.feature.properties);
    map.fitBounds(e.target.getBounds());
});
layer.on('mouseout',function(e){
    parcel.setStyle(featureStyle);      
});

});});

I can't really figure out what function I should use for this..
Any help ?

Best Answer

UPDATE I found a way of handling the search using FuseSearch! .I have used it in my code and it works well.Only that when I click on the output list,it doesn't show the corresponding polygon in the map.

Code

      var options = {
      position: 'topright',
      title: 'Parcel Search',
      placeholder: 'Parcen No,ID, Reg Name',
      maxResultLength: 15,
      threshold: 0.5,
      showInvisibleFeatures: true,
      showResultFct: function(feature, container) {
        props = feature.properties;
        var name = L.DomUtil.create('b', null, container);
        name.innerHTML = props.parcel_number;
        container.appendChild(L.DomUtil.create('p', null, container));
        var info = '' +  props.registration_section + ', ' + props.legal_area;
        container.appendChild(document.createTextNode(info));            
    }
};
var fuseSearchCtrl = L.control.fuseSearch(options);
map.addControl(fuseSearchCtrl);

// Load the data
jQuery.getJSON(dataurl, function(data) {
    displayFeatures(data.features, parcel);
    var props = ['parcel_number', 'registration_section', 'legal_area'];
    fuseSearchCtrl.indexFeatures(data.features, props); 
    //parcel.feature = parcel; 
    });

Here is a code for the layer click for the popup

    layer.on('click', function (e) {
    var popup = "<strong>"+ e.target.feature.properties.registration_section + "<br>" + e.target.feature.properties.legal_area + "</strong>";
    layer.bindPopup(popup).openPopup(e.latlng);
    //map.fitBounds(e.target.getBounds());

});

This I know will help a lot in this endeavour..Help

Related Question