Test to load a geojson in leaflet with WFS

wfs_marker_example.js

//collect marker already plotted on the map
var markers_already_show = [];
var max_n_markers = 30;

//icon for the marker
var myIcon = L.icon({
        iconUrl: 'img/myIcon.svg',
        iconSize: [38, 43],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28]
    });

// marker clustering
var markers = L.markerClusterGroup({
        iconCreateFunction: function (cluster) {
          var childCount = cluster.getChildCount();
          return new L.DivIcon({
                html: '<div class="myIconClass"><br>' + cluster.getChildCount() + '</div>',
                className: 'mycluster',
                iconSize: L.point(60, 60)
            });
        }
    });

//markers layer
var geojsonMarkersLayer = new L.GeoJSON(null, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: myIcon
            });
        },
        onEachFeature: function (feature, layer) {
            var html = "html to show"
            layer.bindPopup(html);
        }
    });


$scope.$on("$ionicView.enter", function (scopes, states) {
  leafletData.getMap("map").then(function (map) {
    map.invalidateSize();
    //add the marker cluster layer to the map 
    map.addLayer(markers);
    //when the map moovement is terminated, then add new markers
    $scope.leafLetMap.on("moveend", function () {
      if (map.getZoom() > maxZoom) {
        geojsonMarkersLayer.clearLayers();
        if (markers_already_show.length > max_n_markers) {
          markers_already_show = [];
          markers.clearLayers();
          }
        var customParams ="&bbox=" + map.getBounds().toBBoxString() + ',EPSG:4326';
        $http.get(markersUrl + customParams).then(function (resp) {
          var newMarkers = cleanMarkers(resp.data, markers_already_show);
          geojsonMarkerLayer.addData(newMarkers);
          markers.addLayer(geojsonMarkersLayer);
        }, function (err) {
          console.log('ERROR', err.status);
        });
      } else {
        markers.clearLayers();
        geojsonMarkersLayer.clearLayers();
      }
 })
        });
    });
    

//clean the response, delete the marhers already plotted
var cleanMarkers = function (jsonArray, already_show) {
        var index = 0;
        while (index < jsonArray.features.length) {
            if (isMarkerShow(jsonArray.features[index].id, already_show)) {
                jsonArray.features.splice(index, 1);
            } else {
                already_show.push(jsonArray.features[index].id);
                index++;
            }
        };
        return jsonArray;
    };


var isMarkerShow = function (id, already_show) {
     for (var j = 0; j < already_show.length; j++) {
            if (already_show[j] == id) {
                return true;
            }
        }
        return false;
    }