2

I’m building a web app to help people from a small island off the western coast of France locate their land parcels from the field. I did manage to deal with every map display, transparency. The key function of this web app is to be able to enter in a search box the reference of the parcel and have it displayed on the map.

I know how to send and receive request from the WFS server but have no idea on how to display it and pan the map to its position.

Parcels reference is in the format A23, B1240, F239, etc where letter (A to Q) is the section and following figure is the number. The search box (which I dont' know how to build) would let user enter this reference but the code will have to process the reference to give it the form LNNNN (A23> A0023, B1240>B1240, F239>F0239) because this is how it is stored. This new reference would have to be attached to the string FR291550000 to match the complete reference of a parcel in the whole french territory.

Then request is sent to the WFS server in this format (request for parcel C24) : https://geobretagne.fr/geoserver/cadastre/wfs?request=GetFeature&service=WFS&version=2.0.0&typename=cadastre:CP.CadastralParcel&cql_filter=inspireid=%27FR291550000C0004%27&outputFormat=application/json&srsName=EPSG:4326

Request returns a geojson file that can be displayed as it on the map :

{"type":"FeatureCollection","totalFeatures":1,"features":[{"type":"Feature","id":"CP.CadastralParcel.fid-69f356c1_16105f5a1c2_-64f8","geometry":{"type":"MultiPolygon","coordinates":[[[[-5.107811162186085,48.471312173890276],[-5.107773643847919,48.47119907500928],[-5.107759552719235,48.47115816794022],[-5.107528003348013,48.47119808944278],[-5.107546534768745,48.47126238691458],[-5.107580675995603,48.47137300409471],[-5.1076251960945935,48.47136452747779],[-5.107695140342036,48.47134897303584],[-5.107746991827471,48.471333392104526],[-5.107796292022977,48.471316267645875],[-5.107811162186085,48.471312173890276]]]]},"geometry_name":"geometry","properties":{"inspireid":"FR291550000C0004","geo_parcelle":"20152901550000C0004","label":"4","nationalcadastralreference":"1550000C0004","areavalue":344,"departement":"29","geo_section":"20151550000C","geo_subdsect":"20151550000C01","geo_indp":"01","beginlifespanversion":"septembre 2016","endlifespanversion":"septembre 2017","coar":null,"tex2":null,"codm":null,"creat_date":"2007-12-18Z","update_dat":"2015-08-12Z"}}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::4326"}}}

I’m not that bad explaining steps in doing things but I’m totally not able to develop this myself.

So far, here's my code so far :

<!doctype html>
<html>
  <head>
    <title>WMS GetFeatureInfo</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->

    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <style type="text/css">
      html, body, #map {
        margin: 0px;
        height: 80%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <h3>A demonstration of how to access a Text Field</h3>

<input type="text" id="myText" value="Parcel reference">

<p>Click the "locate this parcel" button to display requested parcel on the map.</p>

<button onclick="myFunction()">locate this parcel</button>

<p id="demo"></p>

    <script>
      var map = L.map('map', {
        center: [48.456469, -5.096704],
        zoom: 15
      });

       var options2 = {
            layers: 'ortho-29', // Layer to display from the global databas
            attribution: 'GeoBretagne', // Légende de la source
            minZoom: 10,
            maxZoom: 19,
            opacity: 1.0,
            tms: false
        };
        layer2 = L.tileLayer.wms('https://geobretagne.fr/geoserver/photo/ows?', options2).addTo(map); 

        var options4 = {
       layers: 'CP.CadastralParcel', // Layer to display from the global database
            style : 'inspire_common_DEFAULT', // display style
            attribution: 'GeoBretagne', // Map source
            minZoom: 9,
            maxZoom: 19,
            opacity: 1.0,
            format: 'image/png',
            transparent: true,
            tms: false
        };
        layer4 = L.tileLayer.wms('https://geobretagne.fr/geoserver/cadastre/ows?', options4).addTo(map);

           </script>

           <script>
function myFunction() {
    //var x = document.getElementById("myText").value;
    var searchInput = document.getElementById("myText").value;
    var baseInspireId = "FR291550000";
    var letter = searchInput.substring(0,1);
    var digits = searchInput.substring(1);
    // add the maximum possible numbers of zeros
    digits = "000"+digits;
    // take only the last four digits
    digits = digits.substring(digits.length-4);
    var result = baseInspireId + letter + digits;
    var adresseParcelle = "https://geobretagne.fr/geoserver/cadastre/wfs?request=GetFeature&service=WFS&version=2.0.0&typename=cadastre:CP.CadastralParcel&cql_filter=inspireid=%27"+result+"%27&outputFormat=application/json&srsName=EPSG:4326"
    document.getElementById("demo").innerHTML = adresseParcelle;


    //Parcel display-test

     var geojsonLayer = new L.GeoJSON();

      function getJson(data) {
          console.log(data)
          geojsonLayer.addData(data);
      }

      $.ajax({
          url: adresseParcelle,
          dataType: 'json',
          jsonpCallback: 'getJson',
          success: getJson
      });

      map.addLayer(geojsonLayer);
      map.fitBounds(geojsonLayer.getBounds());


    }
</script>

  </body>
</html>
  • Hi Laurent, it sounds like you're having issues with your JavaScript! It might be worth getting your code up somewhere and having us look at it there, based on what you've got working. Or, perhaps, having someone with experience assist you. But also, have a look at this Boundless example for using GeoServer as an auto-complete search enabler: workshops.boundlessgeo.com/tutorial-autocomplete – Alex Leith Jan 17 '18 at 22:00
  • You're right, i'm a total noob with Javascript. I'll try to post the code somewhere. – Laurent Jan 17 '18 at 22:09
2

Since your question changed and I misread the server answer somehow, it is much easier now and you can refer to the official Leaflet documentation and don't need to use Proj4Leaflet at all to do this task.

How to display the geojson result and zoom to it:

let parcelLayer = L.geoJSON(parcel).addTo(map);
map.fitBounds(parcelLayer.getBounds());

For the search box there are a couple of ways you can do it, but basically you need to get the value from a input field and then modify the input similar to the following example:

var searchInput = document.getElementById("search").value;
var baseInspireId = "FR291550000";
var letter = searchInput.substring(0,1);
var digits = searchInput.substring(1);
// add the maximum possible numbers of zeros
digits = "000"+digits;
// take only the last four digits
digits = digits.substring(digits.length-4);
var result = baseInspireId + letter + digits;
  • Thanks for your comment. I added explanation and details in an answer on top of yours. – Laurent Jan 17 '18 at 21:17
  • I adapted my answer to your modified question. Now you don't need to use Proj4Leafet anymore. And I added the part on how to modify the search value. – tallistroan Jan 17 '18 at 21:59
  • I updated the question with my code so far. Could you show me where and how to implement search box and display ? Thanks ! – Laurent Jan 17 '18 at 22:56
  • You might want look into jquery.ajax stackoverflow.com/a/41624528/6457142 and here is some example code for getting the value from a text input w3schools.com/jsref/tryit.asp?filename=tryjsref_text_get – tallistroan Jan 18 '18 at 4:47
  • Thanks to you, I managed to embed the search box that returns a correct address for a requested parcel. I had a look at jQuery and tried to implement a display routine but still no success. I think I'm this close from the solution. I updated the code in the question field – Laurent Jan 18 '18 at 8:48

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.