0

I added both WFS and WMS layer from GeoServer. I need to have the layer switchers for these layers. But the layers are not visible in layer switchers.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Geocoder</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link
      rel="stylesheet"
      href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
    />

    <script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet"></script>

    <!-- Esri Leaflet Geocoder -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
    />
    <script src="https://unpkg.com/esri-leaflet-geocoder"></script>

    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"
    />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

    <!-- Make the map fill the entire page -->
    <style>
      #map {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    <script>
      var map = L.map("map", { drawControl: true }).setView(
        [45.5165, -122.6764],
        12
      );

      var mapQuestAttr =
        'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ';
      var osmDataAttr =
        'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
      var mopt = {
        url: "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg",
        options: { attribution: mapQuestAttr + osmDataAttr, subdomains: "1234" }
      };
      var osm = L.tileLayer(
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        { attribution: osmDataAttr }
      );
      var mq = L.tileLayer(mopt.url, mopt.options);

      osm.addTo(map);

      //var baseLayers = {
      //"Gould map": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      //    subdomains: "1234"
      //}),
      //'Gao de image': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
      //    subdomains: "1234"
      //}), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
      //    subdomains: "1234"
      //})]),
      //'GeoQ Grey base map': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
      //};
      //L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      //attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      //}).addTo(map);
      //var layercontrol = L.control.layers(baseLayers, {}, {
      //    position: "topleft"
      //}).addTo(map)

      // create the geocoding control and add it to the map
      var searchControl = L.esri.Geocoding.geosearch().addTo(map);

      // create an empty layer group to store the results and add it to the map
      var results = L.layerGroup().addTo(map);

      // listen for the results event and add every result to the map
      searchControl.on("results", function(data) {
        results.clearLayers();
        for (var i = data.results.length - 1; i >= 0; i--) {
          results.addLayer(L.marker(data.results[i].latlng));
        }
      });

      var drawnItems = new L.FeatureGroup();
      map.addLayer(drawnItems);

      var drawControl = new L.Control.Draw({
        draw: {
          polygon: false,
          marker: false,
          circlemarker: false,
          rectangle: false,
          circle: false
        },
        edit: {
          featureGroup: drawnItems
        }
      });

      map.addControl(drawControl);
      map.on(L.Draw.Event.CREATED, function(e) {
        var layer = e.layer;
        drawnItems.addLayer(layer);
      });
      var rootUrl = "http://localhost:8080/geoserver/ows";

      var defaultParameters = {
        service: "WFS",
        version: "1.0.0",
        request: "GetFeature",
        typeName: "sf:archsites",
        maxFeatures: 200,
        outputFormat: "application/json",
        format_options: "callback: getJson",
        srsName: "EPSG:4326"
      };

      var parameters = L.Util.extend(defaultParameters);
      //console.log(rootUrl + L.Util.getParamString(parameters));
      $.ajax({
        jsonp: false,
        url: rootUrl + L.Util.getParamString(parameters),
        dataType: "json",
        jsonpCallback: "getJson",
        success: handleJson
      });

      var group = new L.featureGroup().addTo(map);
      var geojsonlayer;

      function handleJson(data) {
        var station = L.tileLayer
          .wms(
            "http://localhost:8080/geoserver/station/wms?service=WMS&version=1.1.0",
            {
              layers: "station:station",
              format: "image/png",
              transparent: true,
              attribution: "station"
            }
          )
          .addTo(map);
        var sea_intrusion = L.tileLayer
          .wms(
            "http://localhost:8080/geoserver/sea_intrusion/wms?service=WMS&version=1.1.0",
            {
              layers: "sea_intrusion:sea_intrusion",
              format: "image/png",
              transparent: true,
              attribution: "sea_intrusion"
            }
          )
          .addTo(map);

        //    console.log(data);
        var geojsonlayer = L.geoJson(data, {
          pointToLayer: function(feature, latlng) {
            var marker = L.circleMarker(latlng, {
              radius: 15,
              fillColor: "#008F11",
              color: "#008F11",
              weight: 1,
              opacity: 1,
              fillOpacity: 0.8
            });
            //return L.circleMarker(latlng, geojsonMarkerOptions);
            //return L.circleMarker(latlng//, geojsonMarkerOptions
            //);
            //return L.marker(latlng);
            marker.bindPopup(
              feature.properties.str1 + "<br/>" + feature.properties.cat
            );
            return marker;
          }
        }).addTo(group);
        map.fitBounds(group.getBounds());
        var clusters = L.markerClusterGroup();
        clusters.addLayer(group);
        map.addLayer(clusters);
      }

      function getJson(data) {
        console.log("callback function fired");
      }

      var overlays = {
        Stations: station,
        Salinity: sea_intrusion,
        sites: geojsonlayer
      };
      L.control.layers(overlays).addTo(map);
    </script>
  </body>
</html>

This is my updated solution.But the layer are not visible in layer control

Esri Leaflet Geocoder 

<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link
  rel="stylesheet"
  href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"
/>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
/>

<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet"></script>

<!-- Esri Leaflet Geocoder -->
<link
  rel="stylesheet"
  href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
/>
<script src="https://unpkg.com/esri-leaflet-geocoder"></script>

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

<!-- Make the map fill the entire page -->
<style>
  #map {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

var map = L.map("map", { drawControl: true }).setView( [45.5165, -122.6764], 12 );

  var mapQuestAttr =
    'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ';
  var osmDataAttr =
    'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
  var mopt = {
    url: "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg",
    options: { attribution: mapQuestAttr + osmDataAttr, subdomains: "1234" }
  };
  var osm = L.tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    { attribution: osmDataAttr }
  );
  var mq = L.tileLayer(mopt.url, mopt.options);

  osm.addTo(map);


  // create the geocoding control and add it to the map
  var searchControl = L.esri.Geocoding.geosearch().addTo(map);

  // create an empty layer group to store the results and add it to the map
  var results = L.layerGroup().addTo(map);

  // listen for the results event and add every result to the map
  searchControl.on("results", function(data) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
  });

  var drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);

  var drawControl = new L.Control.Draw({
    draw: {
      polygon: false,
      marker: false,
      circlemarker: false,
      rectangle: false,
      circle: false
    },
    edit: {
      featureGroup: drawnItems
    }
  });

  map.addControl(drawControl);
  map.on(L.Draw.Event.CREATED, function(e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
  });
  var rootUrl = "http://localhost:8080/geoserver/ows";

  var defaultParameters = {
    service: "WFS",
    version: "1.0.0",
    request: "GetFeature",
    typeName: "sf:archsites",
    maxFeatures: 200,
    outputFormat: "application/json",
    format_options: "callback: getJson",
    srsName: "EPSG:4326"
  };

  var parameters = L.Util.extend(defaultParameters);

  $.ajax({
    jsonp: false,
    url: rootUrl + L.Util.getParamString(parameters),
    dataType: "json",
    jsonpCallback: "getJson",
    success: handleJson
  });

  var group = new L.featureGroup();
  var geojsonlayer;

   var station = L.tileLayer
      .wms(
        "http://localhost:8080/geoserver/station/wms?service=WMS&version=1.1.0",
        {
          layers: "station:station",
          format: "image/png",
          transparent: true,
          attribution: "station"
        }
      )
      .addTo(map);
    var sea_intrusion = L.tileLayer
      .wms(
        "http://localhost:8080/geoserver/sea_intrusion/wms?service=WMS&version=1.1.0",
        {
          layers: "sea_intrusion:sea_intrusion",
          format: "image/png",
          transparent: true,
          attribution: "sea_intrusion"
        }
      )
      .addTo(map);

  function handleJson(data) {



     geojsonlayer = L.geoJson(data, {
      pointToLayer: function(feature, latlng) {
        var marker = L.circleMarker(latlng, {
          radius: 15,
          fillColor: "#008F11",
          color: "#008F11",
          weight: 1,
          opacity: 1,
          fillOpacity: 0.8
        });

        marker.bindPopup(
          feature.properties.str1 + "<br/>" + feature.properties.cat
        );
        return marker;
      }
    }).addTo(group);
    map.fitBounds(group.getBounds());
    var clusters = L.markerClusterGroup();
    clusters.addLayer(group);
    map.addLayer(clusters);
  }

  function getJson(data) {
    console.log("callback function fired");
  }

  var overlays = {
    Stations: station,
    Salinity: sea_intrusion,

  };
  L.control.layers(overlays).addTo(map);
</script>

Improve this question
1
  • Welcome to GIS SE. As a new user, please take the Tour. Please write your question, then include code/source (formatted legibly), and then summarize the question in the title. Pure code block questions are referred to as "wall of code" posts, and are generally down-voted, if not ignored entirely.
    – Vince
    Jul 19, 2019 at 11:51

1 Answer 1

Reset to default
2

First problem is that you are trying to add drawnItems feature group layer and results group layer to the map before they contain any layer. Add group layer to the map after you added layers to it.

Second problem is similar to first, this time for group feature group, but here also definition call is wrong. L.featureGroup creates an instance of object, so there should be no new keyword:

var group = L.featureGroup();

Third problem is that you have variables for all your three overlays station, sea_intrusion and geojsonlayer defined as local variables inside handleJson function, so they are not defined outside where you are trying to use them.

First define them outside of the handleJson function as:

var station;
var sea_intrusion;
var geojsonlayer;

Then inside handleJson function just assign values to them:

station = L.tileLayer.wms( ...
sea_intrusion = L.tileLayer.wms( ...
geojsonlayer = L.geoJson( ...
Improve this answer
4
  • Thanks for a reply. I tried this solution but still my WMS layer is not visible on my map. I wanted to know if it is possible to have both WFS and WMS layer together in one leaflet.
    – harini ravi
    Jul 22, 2019 at 9:05
  • I found more errors in your code, see modified answer. And yes, you can have both WMS and WFS layers in the same map.
    – TomazicM
    Jul 22, 2019 at 16:24
  • Thanks for reply. I tried the solution but still it is not working. The wfs layer seperately working with layer control in leaflet. When I added both wfs and wms, it is not working. I think the problem with overlaying of two layers
    – harini ravi
    Jul 23, 2019 at 9:08
  • It should work. Edit you question and add separately your new code (only Java Script, without commented out parts).
    – TomazicM
    Jul 23, 2019 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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