0

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 ?

  • do you want to filter on the client on server? In the example you link to he is passing search parameters to django, more complex but more scalable if your dataset is large, or will grow large – toms Apr 17 '15 at 16:51
  • @toms sorry for the late reply.I think if I can use the same methodology as his can be better because at the moment my data is little but will grow with time.I just need to know how to do similar task with polygons using the process explained above(after a button click)...any help is appreciated – Wanjohi254 Apr 18 '15 at 19:58
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.