[GIS] Loading external WFS (GML output format) in Leaflet map

gmlleafletwfs

I need to build a Leaflet map loading data from this external WFS service

http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&service=WFS&request=GetCapabilities&

with these output formats

<OutputFormats>
   <Format>text/xml; subtype=gml/3.1.1</Format>
</OutputFormats>

Here you are a sample of the data

http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=IN.NUMERICIVICI.2012&SRSNAME=EPSG:4326&bbox=7.59,44.83,7.75,44.94&outputFormat=GML2&

I know how to load an external WFS if the output format: here you are a sample

<html>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
  <title>Get External JSONP</title>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
  <div style="width:1000px; height:700px" id="map"></div>
  <script>
      var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }
        );

      //create map object
      var map = new L.Map('map', {
          center: [42, 12],
          zoom: 6,
          layers: [osm]
      });

      var geojsonLayer = new L.GeoJSON();

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

      $.ajax({
          url: "http://localhost:8080/opengeo-docs/ScuoleTorino.jsonp",
          jsonpCallback: 'getJson',
          success: getJson
      });

      map.addLayer(geojsonLayer);
  </script>
</body>
</html>

… but this obviously doesn't work with GML.

Any suggestions in case of GML output formats?

Best Answer

It looks like the Leaflet-WFST Plugin is a solution to this problem.

var map = L.map('map').setView([0, 0], 2);

var boundaries = new L.WFS({
    url: 'http://demo.opengeo.org/geoserver/ows',
    typeNS: 'topp',
    typeName: 'tasmania_state_boundaries',
    crs: L.CRS.EPSG4326,
    style: {
        color: 'blue',
        weight: 2
    }
}).addTo(map)
  .on('load', function () {
      map.fitBounds(boundaries);
  })
Related Question