Code Duplication - sheub/vectortiles - Measure and Improve Code Quality continuously with Scrutinizer

Code Duplication Length = 520-521 lines in 2 locations

js/app.js 1 location


/*global: $, mapboxgl, MapboxDirections, turf*/

$(window).on("scroll", function() {
  var scrollValue = $(window).scrollTop();
  if (scrollValue > 220) {
    $(".navbar").addClass("affix");
  } else {
    $(".navbar").removeClass("affix");
  }
});

/*Load location (stores2)*/
function loadLocations() {
  var locations = null;
  $.ajax({
    async: false,
    global: false,
    url: "https://leipzig-einkaufen.de/location.json",
    //"url": "http://localhost/vectortiles/museen.json",
    dataType: "json",
    success: function(data) {
      locations = data;
    }
  });
  return locations;
}

var stores2 = loadLocations();
// Set bounds to Leipzig, Germany
var bounds = [
  [12.179, 51.227], // Southwest coordinates
  [12.6, 51.459] // Northeast coordinates
];

// declare map
var map = new mapboxgl.Map({
  container: "map",
  style: "https://leipzig-einkaufen.de/json/style-local.json",
  //style: "http://localhost/vectortiles/json/style-local.json",

  center: [12.3722, 51.3272],
  zoom: 11,
  attributionControl: true,
  hash: false,
  maxZoom: 14.9,
  maxBounds: bounds // Sets bounds as max
});

/*Declare MapDirections*/
var mapDirections = new MapboxDirections();
/*MapDirections Settings*/
mapDirections.accessToken =
  "pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig";
mapDirections.unit = "metric";
mapDirections.proximity = false; /*proximity ??*/
mapDirections.interactive = false;
mapDirections.profile = "driving"; //, "walking", "cycling";
// UI controls
mapDirections.controls = {
  inputs: true,
  instructions: false
};

/*Add mapDirections Controls*/
map.addControl(new MapboxDirections(mapDirections), "top-left");

map.addControl(
  new mapboxgl.ScaleControl({
    maxWidth: 80,
    unit: "metric"
  })
);

var directionControl = document.getElementsByClassName(
  "mapboxgl-ctrl-directions"
);
directionControl["0"].hidden = true;
var ptsWithin = null;

var filterEl = document.getElementById("feature-filter");
var listingsEl = document.getElementById("listings");
var txtCategoriesEl = document.getElementById("txtCategories");

// Empty Geojson Data
var bufferedLinestring = {
  id: "0",
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [0, 0]
  },
  properties: {}
};

// Functions
function normalizeString(string) {
  return string.trim().toLowerCase();
}

function createPopUp(currentFeature) {
  new mapboxgl
    .Popup({
      closeOnClick: true
    })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML(
      "<h3>" +
        currentFeature.properties.name +
        "</h3>" +
        "<h4>" +
        currentFeature.properties.description +
        "</h4>"
    )
    .addTo(map);
}

function getUniqueFeatures(array, comparatorProperty) {
  var existingFeatureKeys = {};
  // Because features come from tiled vector data, feature geometries may be split
  // or duplicated across tile boundaries and, as a result, features may appear
  // multiple times in query results.
  var uniqueFeatures = array.filter(function(el) {
    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
      return false;
    }
    existingFeatureKeys[el.properties[comparatorProperty]] = true;
    return true;
  });

  return uniqueFeatures;
}

function colorLocationList(data) {
  // Iterate through the list of stores
  // WITHIN THE CALCULATED ROUTE !! and color in green
  if (data.length) {
    data.forEach(function(feature) {
      // Shorten data.feature.properties to just `prop`.
      var prop = feature.properties;
      var cardHeader = document.getElementById("heading" + prop.id);
      if (cardHeader === null) {
        return;
      }

      var cardTitle = cardHeader.getElementsByClassName("title");
      cardTitle[0].style.color = "#608BC7";
    });
  }
}

function buildLocationList(data) {
  // Iterate through the list of stores
  listingsEl.innerHTML = "";
  if (data.length) {
    data.forEach(function(feature) {
      // Shorten feature.properties to just `prop` so we're not writing this long form over and over again.
      var prop = feature.properties;

      // Select the listing container in the HTML and append a div  with the class 'item' for each store
      var card = listingsEl.appendChild(document.createElement("div"));
      card.className = "item card cardList";
      card.id = prop.id;

      var cardHeader = card.appendChild(document.createElement("div"));
      cardHeader.className = "card-header";
      cardHeader.setAttribute("role", "tab");

      cardHeader.setAttribute("id", "heading" + card.id);
      cardHeader.id = "heading" + card.id;

      var cardMb0 = cardHeader.appendChild(document.createElement("h5"));
      cardMb0.className = "mb-0";

      // Create a new link with the class 'title' for each store and fill it with the store address
      var link = cardMb0.appendChild(document.createElement("a"));
      link.setAttribute("data-toggle", "collapse");
      link.href = "#collapse" + card.id;
      link.setAttribute("aria-expanded", "false");
      link.setAttribute("aria-controls", "collapse" + card.id);
      link.className = "title";
      link.textContent = prop.name;
      link.dataPosition = card.id;

      var cardCollapse = card.appendChild(document.createElement("div"));
      cardCollapse.className = "collapse";
      cardCollapse.setAttribute("id", "collapse" + card.id);
      cardCollapse.setAttribute("role", "tabpanel");
      cardCollapse.setAttribute("aria-labelledby", "heading" + card.id);
      cardCollapse.setAttribute("data-parent", "#listings");

      if (prop.image) {
        var cardImg = cardCollapse.appendChild(document.createElement("img"));
        cardImg.className = "img-responsive img-listing";
        cardImg.src = prop.image;
        cardImg.alt = prop.name;
        cardImg.title = prop.name;
      }

      var cardBody = cardCollapse.appendChild(document.createElement("div"));
      cardBody.className = "card-body";
      cardBody.textContent = prop.description;
      cardBody.appendChild(document.createElement("br"));

      if (prop.url) {
        var linkBody = cardBody.appendChild(document.createElement("a"));
        linkBody.textContent = prop.name;
        linkBody.href = prop.url;
        linkBody.target = "_blank";
        linkBody.title = prop.name;
        linkBody.rel="noopener";
      }

      // Add an event listener for the links in the sidebar listing
      link.addEventListener("click", function() {
        // Update the currentFeature to the store associated with the clicked link
        var clickedListing = stores2.features[this.dataPosition];

        var popUps = document.getElementsByClassName("mapboxgl-popup");
        // Check if there is already a popup on the map and if so, remove it
        if (popUps[0]) {
          popUps[0].parentNode.removeChild(popUps[0]);
        }

        // 1. Close all other popups and display popup for clicked store
        createPopUp(clickedListing);

        // 2. Highlight listing in sidebar (and remove highlight for all other listings)
        var activeItem = document.getElementsByClassName("is-active");
        if (activeItem[0]) {
          activeItem[0].classList.remove("is-active");
        }
        this.classList.add("is-active");
      });
    });
  } else {
    var empty = document.createElement("p");
    empty.textContent = "Ziehen Sie die Karte, um die Ergebnisse zu füllen";
    listingsEl.appendChild(empty);

    // remove features filter
    map.setFilter("locations", ["has", "Categories"]);
  }

  // Populate features for the listing overlay.
  if (ptsWithin) {
    colorLocationList(ptsWithin.features);
  }
}

function filterOnRoute() {
  var mapDirectionsSource = map.getSource("directions");
  var radius = 0.6;
  var unit = "kilometers";

  //var distDuration = mapDirections.getDistanceAndDuration();

  // buffer the route with a area of radius 'radius'
  if (mapDirectionsSource._data.features.length < 2) {
    return;
  }
  var bufferedLinestring = turf.buffer(
    mapDirectionsSource._data.features[2].geometry,
    radius,
    {
      units: unit
    }
  );

  // update bufferedTraceSource
  map.getSource("bufferedTraceSource").setData(bufferedLinestring);

  // Get locations rendered on the map
  var features = map.queryRenderedFeatures({
    layers: ["locations"]
  });

  // use featureCollection to convert features (array of features) into a collection of features (Object type FeatureCollection);
  var collection = turf.featureCollection(features);

  // Filter the points to the area around the direction
  ptsWithin = turf.pointsWithinPolygon(collection, bufferedLinestring);

  // Populate features for the listing overlay.
  if (ptsWithin) {
    buildLocationList(features);
  }
}

function displayDirectionControls() {
  var directionControl = document.getElementsByClassName(
    "mapboxgl-ctrl-directions"
  );
  if (directionControl["0"].hidden) {
    directionControl["0"].hidden = false;
    map.setLayoutProperty("bufferedTraceLayer", "visibility", "visible");

    map.setLayoutProperty("directions-origin-point", "visibility", "visible");
    map.setLayoutProperty(
      "directions-destination-point",
      "visibility",
      "visible"
    );
    map.setLayoutProperty("directions-origin-label", "visibility", "visible");
    map.setLayoutProperty(
      "directions-destination-label",
      "visibility",
      "visible"
    );

    map.setLayoutProperty("directions-hover-point", "visibility", "visible");
    map.setLayoutProperty("directions-waypoint-point", "visibility", "visible");
    map.setLayoutProperty("directions-route-line", "visibility", "visible");
    map.setLayoutProperty("directions-route-line-alt", "visibility", "visible");
    filterOnRoute();
  } else {
    directionControl["0"].hidden = true;
    // reinitialize ptsWithin
    ptsWithin = null;

    map.setLayoutProperty("bufferedTraceLayer", "visibility", "none");
    map.setLayoutProperty("directions-origin-point", "visibility", "none");
    map.setLayoutProperty("directions-destination-point", "visibility", "none");
    map.setLayoutProperty("directions-origin-label", "visibility", "none");
    map.setLayoutProperty("directions-destination-label", "visibility", "none");

    map.setLayoutProperty("directions-hover-point", "visibility", "none");
    map.setLayoutProperty("directions-waypoint-point", "visibility", "none");
    map.setLayoutProperty("directions-route-line", "visibility", "none");
    map.setLayoutProperty("directions-route-line-alt", "visibility", "none");

    var features = map.queryRenderedFeatures({
      layers: ["locations"]
    });

    if (features) {
      // Populate features for the listing overlay.
      buildLocationList(features);
    }
  }
}

// Call buildlist function on initialization
buildLocationList(stores2.features);

// Load map
map.on("load", function(e) {
  //map.loadImage('http://localhost/vectortiles/media/diagonal-noise.png', function(error, image) {

  map.loadImage(
    "https://leipzig-einkaufen.de/media/diagonal-noise.png",
    function(error, image) {
      if (error) {
        throw error;
      }
      map.addImage("background_pattern", image);
    }
  );

  //map.loadImage('http://localhost/vectortiles/media/Marker_with_Shadow.png', function(error, image) {
  map.loadImage(
    "https://leipzig-einkaufen.de/media/Marker_with_Shadow.png",
    function(error, image) {
      if (error) {
        throw error;
      }
      map.addImage("marker_z", image);

      // Add the stores2 (locations_source) to the map
      map.addSource("locations_source", {
        type: "geojson",
        data: stores2
      });

      // Add the locations_source to the map as a layer
      map.addLayer({
        id: "locations",
        type: "symbol",
        // Add a GeoJSON source containing place coordinates and information.
        source: "locations_source",
        layout: {
          visibility: "visible",
          "icon-image": "marker_z",
          "icon-size": 0.9,
          "icon-allow-overlap": true
        }
      });

      // Add the bufferedLinestring to the map as a layer
      map.addSource("bufferedTraceSource", {
        type: "geojson",
        data: bufferedLinestring,
        maxzoom: 13
      });
      map.addLayer({
        id: "bufferedTraceLayer",
        type: "fill",
        source: "bufferedTraceSource",
        layout: {
          visibility: "visible"
        },
        paint: {
          "fill-color": "rgb(0,0,0)",
          "fill-opacity": 1,
          "fill-translate": [0, 2.5],
          "fill-pattern": "background_pattern"
        }
      });

      // Add Fullscreen control to the map.
      map.addControl(new mapboxgl.FullscreenControl());

      // Add geolocate control to the map.
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );

      // When a click event occurs on a feature in the places layer, open a popup at the
      // location of the feature, with description HTML from its properties.
      map.on("click", "locations", function(e) {
        var currentFeature = e.features[0];
        // 1. Create Popup
        createPopUp(currentFeature);

        // 2. Highlight listing in sidebar (and remove highlight for other listing)
        var activeItem = document.getElementsByClassName("is-active");
        if (activeItem[0]) {
          activeItem[0].classList.remove("is-active");
        }

        var headingElement = document.getElementById(
          "heading" + currentFeature.properties.id
        );
        if (headingElement) {
          headingElement.classList.add("is-active");
        }
        var collapseElement = document.getElementById(
          "collapse" + currentFeature.properties.id
        );
        if (collapseElement) {
          $(collapseElement).collapse("show");
        }
      });

      map.on("moveend", function() {
        // Query all the rendered points in the view
        var features = map.queryRenderedFeatures({
          layers: ["locations"]
        });

        if (features) {
          //var uniqueFeatures = getUniqueFeatures(features, "Categories");

          // Populate features for the listing overlay.
          buildLocationList(features);

          // Clear the input container
          filterEl.value = "";

          // Store the current features in sn `locations_on_map` variable to later use for filtering on `keyup`.
          //locations = features;
        }
      });

      map.on("mousemove", "locations", function() {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = "pointer";
      });

      map.on("mouseleave", "locations", function() {
        map.getCanvas().style.cursor = "";
        //popup.remove();
      });

      $(".dropdown-item").click(function() {
        var value = normalizeString($(this).text());

        var filtered = map.querySourceFeatures("locations_source");
        if (value !== "alle") {
          // Filter visible features that don't match the input value.
          filtered = filtered.filter(function(feature) {
            var name = normalizeString(feature.properties.name);
            var Categories = normalizeString(feature.properties.Categories);
            return name.indexOf(value) > -1 || Categories.indexOf(value) > -1;
          });
        }
        if (!filtered) {
          return;
        }

        var uniqueFeatures = getUniqueFeatures(filtered, "Categories");
        // Populate the sidebar with filtered results
        buildLocationList(uniqueFeatures);

        // Set the filter to populate features into the layer.
        map.setFilter(
          "locations",
          ["in", "name"].concat(
            uniqueFeatures.map(function(feature) {
              return feature.properties.name;
            })
          )
        );

        txtCategoriesEl.value = value;
      });
    }
  );
});

// Direction event listener
mapDirections.on("route", function() {
  filterOnRoute();
});

// Display Direction
$("#btnDisplayControls").on("click", function() {
  displayDirectionControls();
});


dist/app.js 1 location


/*global: $, mapboxgl, MapboxDirections, turf*/

$(window).on("scroll", function() {
  var scrollValue = $(window).scrollTop();
  if (scrollValue > 220) {
    $(".navbar").addClass("affix");
  } else {
    $(".navbar").removeClass("affix");
  }
});

/*Load location (stores2)*/
function loadLocations() {
  var locations = null;
  $.ajax({
    async: false,
    global: false,
    url: "https://leipzig-einkaufen.de/location.json",
    //"url": "http://localhost/vectortiles/museen.json",
    dataType: "json",
    success: function(data) {
      locations = data;
    }
  });
  return locations;
}

var stores2 = loadLocations();
// Set bounds to Leipzig, Germany
var bounds = [
  [12.179, 51.227], // Southwest coordinates
  [12.6, 51.459] // Northeast coordinates
];

// declare map
var map = new mapboxgl.Map({
  container: "map",
  style: "https://leipzig-einkaufen.de/json/style-local.json",
  //style: "http://localhost/vectortiles/json/style-local.json",

  center: [12.3722, 51.3272],
  zoom: 11,
  attributionControl: true,
  hash: false,
  maxZoom: 14.9,
  maxBounds: bounds // Sets bounds as max
});

/*Declare MapDirections*/
var mapDirections = new MapboxDirections();
/*MapDirections Settings*/
mapDirections.accessToken =
  "pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig";
mapDirections.unit = "metric";
mapDirections.proximity = false; /*proximity ??*/
mapDirections.interactive = false;
mapDirections.profile = "driving"; //, "walking", "cycling";
// UI controls
mapDirections.controls = {
  inputs: true,
  instructions: false
};

/*Add mapDirections Controls*/
map.addControl(new MapboxDirections(mapDirections), "top-left");

map.addControl(
  new mapboxgl.ScaleControl({
    maxWidth: 80,
    unit: "metric"
  })
);

var directionControl = document.getElementsByClassName(
  "mapboxgl-ctrl-directions"
);
directionControl["0"].hidden = true;
var ptsWithin = null;

var filterEl = document.getElementById("feature-filter");
var listingsEl = document.getElementById("listings");
var txtCategoriesEl = document.getElementById("txtCategories");

// Empty Geojson Data
var bufferedLinestring = {
  id: "0",
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [0, 0]
  },
  properties: {}
};

// Functions
function normalizeString(string) {
  return string.trim().toLowerCase();
}

function createPopUp(currentFeature) {
  new mapboxgl.Popup({
    closeOnClick: true
  })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML(
      "<h3>" +
        currentFeature.properties.name +
        "</h3>" +
        "<h4>" +
        currentFeature.properties.description +
        "</h4>"
    )
    .addTo(map);
}

function getUniqueFeatures(array, comparatorProperty) {
  var existingFeatureKeys = {};
  // Because features come from tiled vector data, feature geometries may be split
  // or duplicated across tile boundaries and, as a result, features may appear
  // multiple times in query results.
  var uniqueFeatures = array.filter(function(el) {
    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
      return false;
    }
    existingFeatureKeys[el.properties[comparatorProperty]] = true;
    return true;
  });

  return uniqueFeatures;
}

function colorLocationList(data) {
  // Iterate through the list of stores
  // WITHIN THE CALCULATED ROUTE !! and color in green
  if (data.length) {
    data.forEach(function(feature) {
      // Shorten data.feature.properties to just `prop`.
      var prop = feature.properties;
      var cardHeader = document.getElementById("heading" + prop.id);
      if (cardHeader === null) {
        return;
      }

      var cardTitle = cardHeader.getElementsByClassName("title");
      cardTitle[0].style.color = "#608BC7";
    });
  }
}

function buildLocationList(data) {
  // Iterate through the list of stores
  listingsEl.innerHTML = "";
  if (data.length) {
    data.forEach(function(feature) {
      // Shorten feature.properties to just `prop` so we're not writing this long form over and over again.
      var prop = feature.properties;

      // Select the listing container in the HTML and append a div  with the class 'item' for each store
      var card = listingsEl.appendChild(document.createElement("div"));
      card.className = "item card cardList";
      card.id = prop.id;

      var cardHeader = card.appendChild(document.createElement("div"));
      cardHeader.className = "card-header";
      cardHeader.setAttribute("role", "tab");

      cardHeader.setAttribute("id", "heading" + card.id);
      cardHeader.id = "heading" + card.id;

      var cardMb0 = cardHeader.appendChild(document.createElement("h5"));
      cardMb0.className = "mb-0";

      // Create a new link with the class 'title' for each store and fill it with the store address
      var link = cardMb0.appendChild(document.createElement("a"));
      link.setAttribute("data-toggle", "collapse");
      link.href = "#collapse" + card.id;
      link.setAttribute("aria-expanded", "false");
      link.setAttribute("aria-controls", "collapse" + card.id);
      link.className = "title";
      link.textContent = prop.name;
      link.dataPosition = card.id;

      var cardCollapse = card.appendChild(document.createElement("div"));
      cardCollapse.className = "collapse";
      cardCollapse.setAttribute("id", "collapse" + card.id);
      cardCollapse.setAttribute("role", "tabpanel");
      cardCollapse.setAttribute("aria-labelledby", "heading" + card.id);
      cardCollapse.setAttribute("data-parent", "#listings");

      if (prop.image) {
        var cardImg = cardCollapse.appendChild(document.createElement("img"));
        cardImg.className = "img-responsive img-listing";
        cardImg.src = prop.image;
        cardImg.alt = prop.name;
        cardImg.title = prop.name;
      }

      var cardBody = cardCollapse.appendChild(document.createElement("div"));
      cardBody.className = "card-body";
      cardBody.textContent = prop.description;
      cardBody.appendChild(document.createElement("br"));

      if (prop.url) {
        var linkBody = cardBody.appendChild(document.createElement("a"));
        linkBody.textContent = prop.name;
        linkBody.href = prop.url;
        linkBody.target = "_blank";
        linkBody.title = prop.name;
        linkBody.rel = "noopener";
      }

      // Add an event listener for the links in the sidebar listing
      link.addEventListener("click", function() {
        // Update the currentFeature to the store associated with the clicked link
        var clickedListing = stores2.features[this.dataPosition];

        var popUps = document.getElementsByClassName("mapboxgl-popup");
        // Check if there is already a popup on the map and if so, remove it
        if (popUps[0]) {
          popUps[0].parentNode.removeChild(popUps[0]);
        }

        // 1. Close all other popups and display popup for clicked store
        createPopUp(clickedListing);

        // 2. Highlight listing in sidebar (and remove highlight for all other listings)
        var activeItem = document.getElementsByClassName("is-active");
        if (activeItem[0]) {
          activeItem[0].classList.remove("is-active");
        }
        this.classList.add("is-active");
      });
    });
  } else {
    var empty = document.createElement("p");
    empty.textContent = "Ziehen Sie die Karte, um die Ergebnisse zu füllen";
    listingsEl.appendChild(empty);

    // remove features filter
    map.setFilter("locations", ["has", "Categories"]);
  }

  // Populate features for the listing overlay.
  if (ptsWithin) {
    colorLocationList(ptsWithin.features);
  }
}

function filterOnRoute() {
  var mapDirectionsSource = map.getSource("directions");
  var radius = 0.6;
  var unit = "kilometers";

  //var distDuration = mapDirections.getDistanceAndDuration();

  // buffer the route with a area of radius 'radius'
  if (mapDirectionsSource._data.features.length < 2) {
    return;
  }
  var bufferedLinestring = turf.buffer(
    mapDirectionsSource._data.features[2].geometry,
    radius,
    {
      units: unit
    }
  );

  // update bufferedTraceSource
  map.getSource("bufferedTraceSource").setData(bufferedLinestring);

  // Get locations rendered on the map
  var features = map.queryRenderedFeatures({
    layers: ["locations"]
  });

  // use featureCollection to convert features (array of features) into a collection of features (Object type FeatureCollection);
  var collection = turf.featureCollection(features);

  // Filter the points to the area around the direction
  ptsWithin = turf.pointsWithinPolygon(collection, bufferedLinestring);

  // Populate features for the listing overlay.
  if (ptsWithin) {
    buildLocationList(features);
  }
}

function displayDirectionControls() {
  var directionControl = document.getElementsByClassName(
    "mapboxgl-ctrl-directions"
  );
  if (directionControl["0"].hidden) {
    directionControl["0"].hidden = false;
    map.setLayoutProperty("bufferedTraceLayer", "visibility", "visible");

    map.setLayoutProperty("directions-origin-point", "visibility", "visible");
    map.setLayoutProperty(
      "directions-destination-point",
      "visibility",
      "visible"
    );
    map.setLayoutProperty("directions-origin-label", "visibility", "visible");
    map.setLayoutProperty(
      "directions-destination-label",
      "visibility",
      "visible"
    );

    map.setLayoutProperty("directions-hover-point", "visibility", "visible");
    map.setLayoutProperty("directions-waypoint-point", "visibility", "visible");
    map.setLayoutProperty("directions-route-line", "visibility", "visible");
    map.setLayoutProperty("directions-route-line-alt", "visibility", "visible");
    filterOnRoute();
  } else {
    directionControl["0"].hidden = true;
    // reinitialize ptsWithin
    ptsWithin = null;

    map.setLayoutProperty("bufferedTraceLayer", "visibility", "none");
    map.setLayoutProperty("directions-origin-point", "visibility", "none");
    map.setLayoutProperty("directions-destination-point", "visibility", "none");
    map.setLayoutProperty("directions-origin-label", "visibility", "none");
    map.setLayoutProperty("directions-destination-label", "visibility", "none");

    map.setLayoutProperty("directions-hover-point", "visibility", "none");
    map.setLayoutProperty("directions-waypoint-point", "visibility", "none");
    map.setLayoutProperty("directions-route-line", "visibility", "none");
    map.setLayoutProperty("directions-route-line-alt", "visibility", "none");

    var features = map.queryRenderedFeatures({
      layers: ["locations"]
    });

    if (features) {
      // Populate features for the listing overlay.
      buildLocationList(features);
    }
  }
}

// Call buildlist function on initialization
buildLocationList(stores2.features);

// Load map
map.on("load", function(e) {
  //map.loadImage('http://localhost/vectortiles/media/diagonal-noise.png', function(error, image) {

  map.loadImage(
    "https://leipzig-einkaufen.de/media/diagonal-noise.png",
    function(error, image) {
      if (error) {
        throw error;
      }
      map.addImage("background_pattern", image);
    }
  );

  //map.loadImage('http://localhost/vectortiles/media/Marker_with_Shadow.png', function(error, image) {
  map.loadImage(
    "https://leipzig-einkaufen.de/media/Marker_with_Shadow.png",
    function(error, image) {
      if (error) {
        throw error;
      }
      map.addImage("marker_z", image);

      // Add the stores2 (locations_source) to the map
      map.addSource("locations_source", {
        type: "geojson",
        data: stores2
      });

      // Add the locations_source to the map as a layer
      map.addLayer({
        id: "locations",
        type: "symbol",
        // Add a GeoJSON source containing place coordinates and information.
        source: "locations_source",
        layout: {
          visibility: "visible",
          "icon-image": "marker_z",
          "icon-size": 0.9,
          "icon-allow-overlap": true
        }
      });

      // Add the bufferedLinestring to the map as a layer
      map.addSource("bufferedTraceSource", {
        type: "geojson",
        data: bufferedLinestring,
        maxzoom: 13
      });
      map.addLayer({
        id: "bufferedTraceLayer",
        type: "fill",
        source: "bufferedTraceSource",
        layout: {
          visibility: "visible"
        },
        paint: {
          "fill-color": "rgb(0,0,0)",
          "fill-opacity": 1,
          "fill-translate": [0, 2.5],
          "fill-pattern": "background_pattern"
        }
      });

      // Add Fullscreen control to the map.
      map.addControl(new mapboxgl.FullscreenControl());

      // Add geolocate control to the map.
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );

      // When a click event occurs on a feature in the places layer, open a popup at the
      // location of the feature, with description HTML from its properties.
      map.on("click", "locations", function(e) {
        var currentFeature = e.features[0];
        // 1. Create Popup
        createPopUp(currentFeature);

        // 2. Highlight listing in sidebar (and remove highlight for other listing)
        var activeItem = document.getElementsByClassName("is-active");
        if (activeItem[0]) {
          activeItem[0].classList.remove("is-active");
        }

        var headingElement = document.getElementById(
          "heading" + currentFeature.properties.id
        );
        if (headingElement) {
          headingElement.classList.add("is-active");
        }
        var collapseElement = document.getElementById(
          "collapse" + currentFeature.properties.id
        );
        if (collapseElement) {
          $(collapseElement).collapse("show");
        }
      });

      map.on("moveend", function() {
        // Query all the rendered points in the view
        var features = map.queryRenderedFeatures({
          layers: ["locations"]
        });

        if (features) {
          //var uniqueFeatures = getUniqueFeatures(features, "Categories");

          // Populate features for the listing overlay.
          buildLocationList(features);

          // Clear the input container
          filterEl.value = "";

          // Store the current features in sn `locations_on_map` variable to later use for filtering on `keyup`.
          //locations = features;
        }
      });

      map.on("mousemove", "locations", function() {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = "pointer";
      });

      map.on("mouseleave", "locations", function() {
        map.getCanvas().style.cursor = "";
        //popup.remove();
      });

      $(".dropdown-item").click(function() {
        var value = normalizeString($(this).text());

        var filtered = map.querySourceFeatures("locations_source");
        if (value !== "alle") {
          // Filter visible features that don't match the input value.
          filtered = filtered.filter(function(feature) {
            var name = normalizeString(feature.properties.name);
            var Categories = normalizeString(feature.properties.Categories);
            return name.indexOf(value) > -1 || Categories.indexOf(value) > -1;
          });
        }
        if (!filtered) {
          return;
        }

        var uniqueFeatures = getUniqueFeatures(filtered, "Categories");
        // Populate the sidebar with filtered results
        buildLocationList(uniqueFeatures);

        // Set the filter to populate features into the layer.
        map.setFilter(
          "locations",
          ["in", "name"].concat(
            uniqueFeatures.map(function(feature) {
              return feature.properties.name;
            })
          )
        );

        txtCategoriesEl.value = value;
      });
    }
  );
});

// Direction event listener
mapDirections.on("route", function() {
  filterOnRoute();
});

// Display Direction
$("#btnDisplayControls").on("click", function() {
  displayDirectionControls();
});


		@@ 3-523 (lines=521) @@
1		/global: $, mapboxgl, MapboxDirections, turf/
2
3		$(window).on("scroll", function() {
4		var scrollValue = $(window).scrollTop();
5		if (scrollValue > 220) {
6		$(".navbar").addClass("affix");
7		} else {
8		$(".navbar").removeClass("affix");
9		}
10		});
11
12		/Load location (stores2)/
13		function loadLocations() {
14		var locations = null;
15		$.ajax({
16		async: false,
17		global: false,
18		url: "https://leipzig-einkaufen.de/location.json",
19		//"url": "http://localhost/vectortiles/museen.json",
20		dataType: "json",
21		success: function(data) {
22		locations = data;
23		}
24		});
25		return locations;
26		}
27
28		var stores2 = loadLocations();
29		// Set bounds to Leipzig, Germany
30		var bounds = [
31		[12.179, 51.227], // Southwest coordinates
32		[12.6, 51.459] // Northeast coordinates
33		];
34
35		// declare map
36		var map = new mapboxgl.Map({
37		container: "map",
38		style: "https://leipzig-einkaufen.de/json/style-local.json",
39		//style: "http://localhost/vectortiles/json/style-local.json",
40
41		center: [12.3722, 51.3272],
42		zoom: 11,
43		attributionControl: true,
44		hash: false,
45		maxZoom: 14.9,
46		maxBounds: bounds // Sets bounds as max
47		});
48
49		/Declare MapDirections/
50		var mapDirections = new MapboxDirections();
51		/MapDirections Settings/
52		mapDirections.accessToken =
53		"pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig";
54		mapDirections.unit = "metric";
55		mapDirections.proximity = false; /proximity ??/
56		mapDirections.interactive = false;
57		mapDirections.profile = "driving"; //, "walking", "cycling";
58		// UI controls
59		mapDirections.controls = {
60		inputs: true,
61		instructions: false
62		};
63
64		/Add mapDirections Controls/
65		map.addControl(new MapboxDirections(mapDirections), "top-left");
66
67		map.addControl(
68		new mapboxgl.ScaleControl({
69		maxWidth: 80,
70		unit: "metric"
71		})
72		);
73
74		var directionControl = document.getElementsByClassName(
75		"mapboxgl-ctrl-directions"
76		);
77		directionControl["0"].hidden = true;
78		var ptsWithin = null;
79
80		var filterEl = document.getElementById("feature-filter");
81		var listingsEl = document.getElementById("listings");
82		var txtCategoriesEl = document.getElementById("txtCategories");
83
84		// Empty Geojson Data
85		var bufferedLinestring = {
86		id: "0",
87		type: "Feature",
88		geometry: {
89		type: "Point",
90		coordinates: [0, 0]
91		},
92		properties: {}
93		};
94
95		// Functions
96		function normalizeString(string) {
97		return string.trim().toLowerCase();
98		}
99
100		function createPopUp(currentFeature) {
101		new mapboxgl
102		.Popup({
103		closeOnClick: true
104		})
105		.setLngLat(currentFeature.geometry.coordinates)
106		.setHTML(
107		"<h3>" +
108		currentFeature.properties.name +
109		"</h3>" +
110		"<h4>" +
111		currentFeature.properties.description +
112		"</h4>"
113		)
114		.addTo(map);
115		}
116
117		function getUniqueFeatures(array, comparatorProperty) {
118		var existingFeatureKeys = {};
119		// Because features come from tiled vector data, feature geometries may be split
120		// or duplicated across tile boundaries and, as a result, features may appear
121		// multiple times in query results.
122		var uniqueFeatures = array.filter(function(el) {
123		if (existingFeatureKeys[el.properties[comparatorProperty]]) {
124		return false;
125		}
126		existingFeatureKeys[el.properties[comparatorProperty]] = true;
127		return true;
128		});
129
130		return uniqueFeatures;
131		}
132
133		function colorLocationList(data) {
134		// Iterate through the list of stores
135		// WITHIN THE CALCULATED ROUTE !! and color in green
136		if (data.length) {
137		data.forEach(function(feature) {
138		// Shorten data.feature.properties to just `prop`.
139		var prop = feature.properties;
140		var cardHeader = document.getElementById("heading" + prop.id);
141		if (cardHeader === null) {
142		return;
143		}
144
145		var cardTitle = cardHeader.getElementsByClassName("title");
146		cardTitle[0].style.color = "#608BC7";
147		});
148		}
149		}
150
151		function buildLocationList(data) {
152		// Iterate through the list of stores
153		listingsEl.innerHTML = "";
154		if (data.length) {
155		data.forEach(function(feature) {
156		// Shorten feature.properties to just `prop` so we're not writing this long form over and over again.
157		var prop = feature.properties;
158
159		// Select the listing container in the HTML and append a div with the class 'item' for each store
160		var card = listingsEl.appendChild(document.createElement("div"));
161		card.className = "item card cardList";
162		card.id = prop.id;
163
164		var cardHeader = card.appendChild(document.createElement("div"));
165		cardHeader.className = "card-header";
166		cardHeader.setAttribute("role", "tab");
167
168		cardHeader.setAttribute("id", "heading" + card.id);
169		cardHeader.id = "heading" + card.id;
170
171		var cardMb0 = cardHeader.appendChild(document.createElement("h5"));
172		cardMb0.className = "mb-0";
173
174		// Create a new link with the class 'title' for each store and fill it with the store address
175		var link = cardMb0.appendChild(document.createElement("a"));
176		link.setAttribute("data-toggle", "collapse");
177		link.href = "#collapse" + card.id;
178		link.setAttribute("aria-expanded", "false");
179		link.setAttribute("aria-controls", "collapse" + card.id);
180		link.className = "title";
181		link.textContent = prop.name;
182		link.dataPosition = card.id;
183
184		var cardCollapse = card.appendChild(document.createElement("div"));
185		cardCollapse.className = "collapse";
186		cardCollapse.setAttribute("id", "collapse" + card.id);
187		cardCollapse.setAttribute("role", "tabpanel");
188		cardCollapse.setAttribute("aria-labelledby", "heading" + card.id);
189		cardCollapse.setAttribute("data-parent", "#listings");
190
191		if (prop.image) {
192		var cardImg = cardCollapse.appendChild(document.createElement("img"));
193		cardImg.className = "img-responsive img-listing";
194		cardImg.src = prop.image;
195		cardImg.alt = prop.name;
196		cardImg.title = prop.name;
197		}
198
199		var cardBody = cardCollapse.appendChild(document.createElement("div"));
200		cardBody.className = "card-body";
201		cardBody.textContent = prop.description;
202		cardBody.appendChild(document.createElement("br"));
203
204		if (prop.url) {
205		var linkBody = cardBody.appendChild(document.createElement("a"));
206		linkBody.textContent = prop.name;
207		linkBody.href = prop.url;
208		linkBody.target = "_blank";
209		linkBody.title = prop.name;
210		linkBody.rel="noopener";
211		}
212
213		// Add an event listener for the links in the sidebar listing
214		link.addEventListener("click", function() {
215		// Update the currentFeature to the store associated with the clicked link
216		var clickedListing = stores2.features[this.dataPosition];
217
218		var popUps = document.getElementsByClassName("mapboxgl-popup");
219		// Check if there is already a popup on the map and if so, remove it
220		if (popUps[0]) {
221		popUps[0].parentNode.removeChild(popUps[0]);
222		}
223
224		// 1. Close all other popups and display popup for clicked store
225		createPopUp(clickedListing);
226
227		// 2. Highlight listing in sidebar (and remove highlight for all other listings)
228		var activeItem = document.getElementsByClassName("is-active");
229		if (activeItem[0]) {
230		activeItem[0].classList.remove("is-active");
231		}
232		this.classList.add("is-active");
233		});
234		});
235		} else {
236		var empty = document.createElement("p");
237		empty.textContent = "Ziehen Sie die Karte, um die Ergebnisse zu füllen";
238		listingsEl.appendChild(empty);
239
240		// remove features filter
241		map.setFilter("locations", ["has", "Categories"]);
242		}
243
244		// Populate features for the listing overlay.
245		if (ptsWithin) {
246		colorLocationList(ptsWithin.features);
247		}
248		}
249
250		function filterOnRoute() {
251		var mapDirectionsSource = map.getSource("directions");
252		var radius = 0.6;
253		var unit = "kilometers";
254
255		//var distDuration = mapDirections.getDistanceAndDuration();
256
257		// buffer the route with a area of radius 'radius'
258		if (mapDirectionsSource._data.features.length < 2) {
259		return;
260		}
261		var bufferedLinestring = turf.buffer(
262		mapDirectionsSource._data.features[2].geometry,
263		radius,
264		{
265		units: unit
266		}
267		);
268
269		// update bufferedTraceSource
270		map.getSource("bufferedTraceSource").setData(bufferedLinestring);
271
272		// Get locations rendered on the map
273		var features = map.queryRenderedFeatures({
274		layers: ["locations"]
275		});
276
277		// use featureCollection to convert features (array of features) into a collection of features (Object type FeatureCollection);
278		var collection = turf.featureCollection(features);
279
280		// Filter the points to the area around the direction
281		ptsWithin = turf.pointsWithinPolygon(collection, bufferedLinestring);
282
283		// Populate features for the listing overlay.
284		if (ptsWithin) {
285		buildLocationList(features);
286		}
287		}
288
289		function displayDirectionControls() {
290		var directionControl = document.getElementsByClassName(
291		"mapboxgl-ctrl-directions"
292		);
293		if (directionControl["0"].hidden) {
294		directionControl["0"].hidden = false;
295		map.setLayoutProperty("bufferedTraceLayer", "visibility", "visible");
296
297		map.setLayoutProperty("directions-origin-point", "visibility", "visible");
298		map.setLayoutProperty(
299		"directions-destination-point",
300		"visibility",
301		"visible"
302		);
303		map.setLayoutProperty("directions-origin-label", "visibility", "visible");
304		map.setLayoutProperty(
305		"directions-destination-label",
306		"visibility",
307		"visible"
308		);
309
310		map.setLayoutProperty("directions-hover-point", "visibility", "visible");
311		map.setLayoutProperty("directions-waypoint-point", "visibility", "visible");
312		map.setLayoutProperty("directions-route-line", "visibility", "visible");
313		map.setLayoutProperty("directions-route-line-alt", "visibility", "visible");
314		filterOnRoute();
315		} else {
316		directionControl["0"].hidden = true;
317		// reinitialize ptsWithin
318		ptsWithin = null;
319
320		map.setLayoutProperty("bufferedTraceLayer", "visibility", "none");
321		map.setLayoutProperty("directions-origin-point", "visibility", "none");
322		map.setLayoutProperty("directions-destination-point", "visibility", "none");
323		map.setLayoutProperty("directions-origin-label", "visibility", "none");
324		map.setLayoutProperty("directions-destination-label", "visibility", "none");
325
326		map.setLayoutProperty("directions-hover-point", "visibility", "none");
327		map.setLayoutProperty("directions-waypoint-point", "visibility", "none");
328		map.setLayoutProperty("directions-route-line", "visibility", "none");
329		map.setLayoutProperty("directions-route-line-alt", "visibility", "none");
330
331		var features = map.queryRenderedFeatures({
332		layers: ["locations"]
333		});
334
335		if (features) {
336		// Populate features for the listing overlay.
337		buildLocationList(features);
338		}
339		}
340		}
341
342		// Call buildlist function on initialization
343		buildLocationList(stores2.features);
344
345		// Load map
346		map.on("load", function(e) {
347		//map.loadImage('http://localhost/vectortiles/media/diagonal-noise.png', function(error, image) {
348
349		map.loadImage(
350		"https://leipzig-einkaufen.de/media/diagonal-noise.png",
351		function(error, image) {
352		if (error) {
353		throw error;
354		}
355		map.addImage("background_pattern", image);
356		}
357		);
358
359		//map.loadImage('http://localhost/vectortiles/media/Marker_with_Shadow.png', function(error, image) {
360		map.loadImage(
361		"https://leipzig-einkaufen.de/media/Marker_with_Shadow.png",
362		function(error, image) {
363		if (error) {
364		throw error;
365		}
366		map.addImage("marker_z", image);
367
368		// Add the stores2 (locations_source) to the map
369		map.addSource("locations_source", {
370		type: "geojson",
371		data: stores2
372		});
373
374		// Add the locations_source to the map as a layer
375		map.addLayer({
376		id: "locations",
377		type: "symbol",
378		// Add a GeoJSON source containing place coordinates and information.
379		source: "locations_source",
380		layout: {
381		visibility: "visible",
382		"icon-image": "marker_z",
383		"icon-size": 0.9,
384		"icon-allow-overlap": true
385		}
386		});
387
388		// Add the bufferedLinestring to the map as a layer
389		map.addSource("bufferedTraceSource", {
390		type: "geojson",
391		data: bufferedLinestring,
392		maxzoom: 13
393		});
394		map.addLayer({
395		id: "bufferedTraceLayer",
396		type: "fill",
397		source: "bufferedTraceSource",
398		layout: {
399		visibility: "visible"
400		},
401		paint: {
402		"fill-color": "rgb(0,0,0)",
403		"fill-opacity": 1,
404		"fill-translate": [0, 2.5],
405		"fill-pattern": "background_pattern"
406		}
407		});
408
409		// Add Fullscreen control to the map.
410		map.addControl(new mapboxgl.FullscreenControl());
411
412		// Add geolocate control to the map.
413		map.addControl(
414		new mapboxgl.GeolocateControl({
415		positionOptions: {
416		enableHighAccuracy: true
417		},
418		trackUserLocation: true
419		})
420		);
421
422		// When a click event occurs on a feature in the places layer, open a popup at the
423		// location of the feature, with description HTML from its properties.
424		map.on("click", "locations", function(e) {
425		var currentFeature = e.features[0];
426		// 1. Create Popup
427		createPopUp(currentFeature);
428
429		// 2. Highlight listing in sidebar (and remove highlight for other listing)
430		var activeItem = document.getElementsByClassName("is-active");
431		if (activeItem[0]) {
432		activeItem[0].classList.remove("is-active");
433		}
434
435		var headingElement = document.getElementById(
436		"heading" + currentFeature.properties.id
437		);
438		if (headingElement) {
439		headingElement.classList.add("is-active");
440		}
441		var collapseElement = document.getElementById(
442		"collapse" + currentFeature.properties.id
443		);
444		if (collapseElement) {
445		$(collapseElement).collapse("show");
446		}
447		});
448
449		map.on("moveend", function() {
450		// Query all the rendered points in the view
451		var features = map.queryRenderedFeatures({
452		layers: ["locations"]
453		});
454
455		if (features) {
456		//var uniqueFeatures = getUniqueFeatures(features, "Categories");
457
458		// Populate features for the listing overlay.
459		buildLocationList(features);
460
461		// Clear the input container
462		filterEl.value = "";
463
464		// Store the current features in sn `locations_on_map` variable to later use for filtering on `keyup`.
465		//locations = features;
466		}
467		});
468
469		map.on("mousemove", "locations", function() {
470		// Change the cursor style as a UI indicator.
471		map.getCanvas().style.cursor = "pointer";
472		});
473
474		map.on("mouseleave", "locations", function() {
475		map.getCanvas().style.cursor = "";
476		//popup.remove();
477		});
478
479		$(".dropdown-item").click(function() {
480		var value = normalizeString($(this).text());
481
482		var filtered = map.querySourceFeatures("locations_source");
483		if (value !== "alle") {
484		// Filter visible features that don't match the input value.
485		filtered = filtered.filter(function(feature) {
486		var name = normalizeString(feature.properties.name);
487		var Categories = normalizeString(feature.properties.Categories);
488		return name.indexOf(value) > -1 \|\| Categories.indexOf(value) > -1;
489		});
490		}
491		if (!filtered) {
492		return;
493		}
494
495		var uniqueFeatures = getUniqueFeatures(filtered, "Categories");
496		// Populate the sidebar with filtered results
497		buildLocationList(uniqueFeatures);
498
499		// Set the filter to populate features into the layer.
500		map.setFilter(
501		"locations",
502		["in", "name"].concat(
503		uniqueFeatures.map(function(feature) {
504		return feature.properties.name;
505		})
506		)
507		);
508
509		txtCategoriesEl.value = value;
510		});
511		}
512		);
513		});
514
515		// Direction event listener
516		mapDirections.on("route", function() {
517		filterOnRoute();
518		});
519
520		// Display Direction
521		$("#btnDisplayControls").on("click", function() {
522		displayDirectionControls();
523		});
524

		@@ 3-522 (lines=520) @@
1		/global: $, mapboxgl, MapboxDirections, turf/
2
3		$(window).on("scroll", function() {
4		var scrollValue = $(window).scrollTop();
5		if (scrollValue > 220) {
6		$(".navbar").addClass("affix");
7		} else {
8		$(".navbar").removeClass("affix");
9		}
10		});
11
12		/Load location (stores2)/
13		function loadLocations() {
14		var locations = null;
15		$.ajax({
16		async: false,
17		global: false,
18		url: "https://leipzig-einkaufen.de/location.json",
19		//"url": "http://localhost/vectortiles/museen.json",
20		dataType: "json",
21		success: function(data) {
22		locations = data;
23		}
24		});
25		return locations;
26		}
27
28		var stores2 = loadLocations();
29		// Set bounds to Leipzig, Germany
30		var bounds = [
31		[12.179, 51.227], // Southwest coordinates
32		[12.6, 51.459] // Northeast coordinates
33		];
34
35		// declare map
36		var map = new mapboxgl.Map({
37		container: "map",
38		style: "https://leipzig-einkaufen.de/json/style-local.json",
39		//style: "http://localhost/vectortiles/json/style-local.json",
40
41		center: [12.3722, 51.3272],
42		zoom: 11,
43		attributionControl: true,
44		hash: false,
45		maxZoom: 14.9,
46		maxBounds: bounds // Sets bounds as max
47		});
48
49		/Declare MapDirections/
50		var mapDirections = new MapboxDirections();
51		/MapDirections Settings/
52		mapDirections.accessToken =
53		"pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig";
54		mapDirections.unit = "metric";
55		mapDirections.proximity = false; /proximity ??/
56		mapDirections.interactive = false;
57		mapDirections.profile = "driving"; //, "walking", "cycling";
58		// UI controls
59		mapDirections.controls = {
60		inputs: true,
61		instructions: false
62		};
63
64		/Add mapDirections Controls/
65		map.addControl(new MapboxDirections(mapDirections), "top-left");
66
67		map.addControl(
68		new mapboxgl.ScaleControl({
69		maxWidth: 80,
70		unit: "metric"
71		})
72		);
73
74		var directionControl = document.getElementsByClassName(
75		"mapboxgl-ctrl-directions"
76		);
77		directionControl["0"].hidden = true;
78		var ptsWithin = null;
79
80		var filterEl = document.getElementById("feature-filter");
81		var listingsEl = document.getElementById("listings");
82		var txtCategoriesEl = document.getElementById("txtCategories");
83
84		// Empty Geojson Data
85		var bufferedLinestring = {
86		id: "0",
87		type: "Feature",
88		geometry: {
89		type: "Point",
90		coordinates: [0, 0]
91		},
92		properties: {}
93		};
94
95		// Functions
96		function normalizeString(string) {
97		return string.trim().toLowerCase();
98		}
99
100		function createPopUp(currentFeature) {
101		new mapboxgl.Popup({
102		closeOnClick: true
103		})
104		.setLngLat(currentFeature.geometry.coordinates)
105		.setHTML(
106		"<h3>" +
107		currentFeature.properties.name +
108		"</h3>" +
109		"<h4>" +
110		currentFeature.properties.description +
111		"</h4>"
112		)
113		.addTo(map);
114		}
115
116		function getUniqueFeatures(array, comparatorProperty) {
117		var existingFeatureKeys = {};
118		// Because features come from tiled vector data, feature geometries may be split
119		// or duplicated across tile boundaries and, as a result, features may appear
120		// multiple times in query results.
121		var uniqueFeatures = array.filter(function(el) {
122		if (existingFeatureKeys[el.properties[comparatorProperty]]) {
123		return false;
124		}
125		existingFeatureKeys[el.properties[comparatorProperty]] = true;
126		return true;
127		});
128
129		return uniqueFeatures;
130		}
131
132		function colorLocationList(data) {
133		// Iterate through the list of stores
134		// WITHIN THE CALCULATED ROUTE !! and color in green
135		if (data.length) {
136		data.forEach(function(feature) {
137		// Shorten data.feature.properties to just `prop`.
138		var prop = feature.properties;
139		var cardHeader = document.getElementById("heading" + prop.id);
140		if (cardHeader === null) {
141		return;
142		}
143
144		var cardTitle = cardHeader.getElementsByClassName("title");
145		cardTitle[0].style.color = "#608BC7";
146		});
147		}
148		}
149
150		function buildLocationList(data) {
151		// Iterate through the list of stores
152		listingsEl.innerHTML = "";
153		if (data.length) {
154		data.forEach(function(feature) {
155		// Shorten feature.properties to just `prop` so we're not writing this long form over and over again.
156		var prop = feature.properties;
157
158		// Select the listing container in the HTML and append a div with the class 'item' for each store
159		var card = listingsEl.appendChild(document.createElement("div"));
160		card.className = "item card cardList";
161		card.id = prop.id;
162
163		var cardHeader = card.appendChild(document.createElement("div"));
164		cardHeader.className = "card-header";
165		cardHeader.setAttribute("role", "tab");
166
167		cardHeader.setAttribute("id", "heading" + card.id);
168		cardHeader.id = "heading" + card.id;
169
170		var cardMb0 = cardHeader.appendChild(document.createElement("h5"));
171		cardMb0.className = "mb-0";
172
173		// Create a new link with the class 'title' for each store and fill it with the store address
174		var link = cardMb0.appendChild(document.createElement("a"));
175		link.setAttribute("data-toggle", "collapse");
176		link.href = "#collapse" + card.id;
177		link.setAttribute("aria-expanded", "false");
178		link.setAttribute("aria-controls", "collapse" + card.id);
179		link.className = "title";
180		link.textContent = prop.name;
181		link.dataPosition = card.id;
182
183		var cardCollapse = card.appendChild(document.createElement("div"));
184		cardCollapse.className = "collapse";
185		cardCollapse.setAttribute("id", "collapse" + card.id);
186		cardCollapse.setAttribute("role", "tabpanel");
187		cardCollapse.setAttribute("aria-labelledby", "heading" + card.id);
188		cardCollapse.setAttribute("data-parent", "#listings");
189
190		if (prop.image) {
191		var cardImg = cardCollapse.appendChild(document.createElement("img"));
192		cardImg.className = "img-responsive img-listing";
193		cardImg.src = prop.image;
194		cardImg.alt = prop.name;
195		cardImg.title = prop.name;
196		}
197
198		var cardBody = cardCollapse.appendChild(document.createElement("div"));
199		cardBody.className = "card-body";
200		cardBody.textContent = prop.description;
201		cardBody.appendChild(document.createElement("br"));
202
203		if (prop.url) {
204		var linkBody = cardBody.appendChild(document.createElement("a"));
205		linkBody.textContent = prop.name;
206		linkBody.href = prop.url;
207		linkBody.target = "_blank";
208		linkBody.title = prop.name;
209		linkBody.rel = "noopener";
210		}
211
212		// Add an event listener for the links in the sidebar listing
213		link.addEventListener("click", function() {
214		// Update the currentFeature to the store associated with the clicked link
215		var clickedListing = stores2.features[this.dataPosition];
216
217		var popUps = document.getElementsByClassName("mapboxgl-popup");
218		// Check if there is already a popup on the map and if so, remove it
219		if (popUps[0]) {
220		popUps[0].parentNode.removeChild(popUps[0]);
221		}
222
223		// 1. Close all other popups and display popup for clicked store
224		createPopUp(clickedListing);
225
226		// 2. Highlight listing in sidebar (and remove highlight for all other listings)
227		var activeItem = document.getElementsByClassName("is-active");
228		if (activeItem[0]) {
229		activeItem[0].classList.remove("is-active");
230		}
231		this.classList.add("is-active");
232		});
233		});
234		} else {
235		var empty = document.createElement("p");
236		empty.textContent = "Ziehen Sie die Karte, um die Ergebnisse zu füllen";
237		listingsEl.appendChild(empty);
238
239		// remove features filter
240		map.setFilter("locations", ["has", "Categories"]);
241		}
242
243		// Populate features for the listing overlay.
244		if (ptsWithin) {
245		colorLocationList(ptsWithin.features);
246		}
247		}
248
249		function filterOnRoute() {
250		var mapDirectionsSource = map.getSource("directions");
251		var radius = 0.6;
252		var unit = "kilometers";
253
254		//var distDuration = mapDirections.getDistanceAndDuration();
255
256		// buffer the route with a area of radius 'radius'
257		if (mapDirectionsSource._data.features.length < 2) {
258		return;
259		}
260		var bufferedLinestring = turf.buffer(
261		mapDirectionsSource._data.features[2].geometry,
262		radius,
263		{
264		units: unit
265		}
266		);
267
268		// update bufferedTraceSource
269		map.getSource("bufferedTraceSource").setData(bufferedLinestring);
270
271		// Get locations rendered on the map
272		var features = map.queryRenderedFeatures({
273		layers: ["locations"]
274		});
275
276		// use featureCollection to convert features (array of features) into a collection of features (Object type FeatureCollection);
277		var collection = turf.featureCollection(features);
278
279		// Filter the points to the area around the direction
280		ptsWithin = turf.pointsWithinPolygon(collection, bufferedLinestring);
281
282		// Populate features for the listing overlay.
283		if (ptsWithin) {
284		buildLocationList(features);
285		}
286		}
287
288		function displayDirectionControls() {
289		var directionControl = document.getElementsByClassName(
290		"mapboxgl-ctrl-directions"
291		);
292		if (directionControl["0"].hidden) {
293		directionControl["0"].hidden = false;
294		map.setLayoutProperty("bufferedTraceLayer", "visibility", "visible");
295
296		map.setLayoutProperty("directions-origin-point", "visibility", "visible");
297		map.setLayoutProperty(
298		"directions-destination-point",
299		"visibility",
300		"visible"
301		);
302		map.setLayoutProperty("directions-origin-label", "visibility", "visible");
303		map.setLayoutProperty(
304		"directions-destination-label",
305		"visibility",
306		"visible"
307		);
308
309		map.setLayoutProperty("directions-hover-point", "visibility", "visible");
310		map.setLayoutProperty("directions-waypoint-point", "visibility", "visible");
311		map.setLayoutProperty("directions-route-line", "visibility", "visible");
312		map.setLayoutProperty("directions-route-line-alt", "visibility", "visible");
313		filterOnRoute();
314		} else {
315		directionControl["0"].hidden = true;
316		// reinitialize ptsWithin
317		ptsWithin = null;
318
319		map.setLayoutProperty("bufferedTraceLayer", "visibility", "none");
320		map.setLayoutProperty("directions-origin-point", "visibility", "none");
321		map.setLayoutProperty("directions-destination-point", "visibility", "none");
322		map.setLayoutProperty("directions-origin-label", "visibility", "none");
323		map.setLayoutProperty("directions-destination-label", "visibility", "none");
324
325		map.setLayoutProperty("directions-hover-point", "visibility", "none");
326		map.setLayoutProperty("directions-waypoint-point", "visibility", "none");
327		map.setLayoutProperty("directions-route-line", "visibility", "none");
328		map.setLayoutProperty("directions-route-line-alt", "visibility", "none");
329
330		var features = map.queryRenderedFeatures({
331		layers: ["locations"]
332		});
333
334		if (features) {
335		// Populate features for the listing overlay.
336		buildLocationList(features);
337		}
338		}
339		}
340
341		// Call buildlist function on initialization
342		buildLocationList(stores2.features);
343
344		// Load map
345		map.on("load", function(e) {
346		//map.loadImage('http://localhost/vectortiles/media/diagonal-noise.png', function(error, image) {
347
348		map.loadImage(
349		"https://leipzig-einkaufen.de/media/diagonal-noise.png",
350		function(error, image) {
351		if (error) {
352		throw error;
353		}
354		map.addImage("background_pattern", image);
355		}
356		);
357
358		//map.loadImage('http://localhost/vectortiles/media/Marker_with_Shadow.png', function(error, image) {
359		map.loadImage(
360		"https://leipzig-einkaufen.de/media/Marker_with_Shadow.png",
361		function(error, image) {
362		if (error) {
363		throw error;
364		}
365		map.addImage("marker_z", image);
366
367		// Add the stores2 (locations_source) to the map
368		map.addSource("locations_source", {
369		type: "geojson",
370		data: stores2
371		});
372
373		// Add the locations_source to the map as a layer
374		map.addLayer({
375		id: "locations",
376		type: "symbol",
377		// Add a GeoJSON source containing place coordinates and information.
378		source: "locations_source",
379		layout: {
380		visibility: "visible",
381		"icon-image": "marker_z",
382		"icon-size": 0.9,
383		"icon-allow-overlap": true
384		}
385		});
386
387		// Add the bufferedLinestring to the map as a layer
388		map.addSource("bufferedTraceSource", {
389		type: "geojson",
390		data: bufferedLinestring,
391		maxzoom: 13
392		});
393		map.addLayer({
394		id: "bufferedTraceLayer",
395		type: "fill",
396		source: "bufferedTraceSource",
397		layout: {
398		visibility: "visible"
399		},
400		paint: {
401		"fill-color": "rgb(0,0,0)",
402		"fill-opacity": 1,
403		"fill-translate": [0, 2.5],
404		"fill-pattern": "background_pattern"
405		}
406		});
407
408		// Add Fullscreen control to the map.
409		map.addControl(new mapboxgl.FullscreenControl());
410
411		// Add geolocate control to the map.
412		map.addControl(
413		new mapboxgl.GeolocateControl({
414		positionOptions: {
415		enableHighAccuracy: true
416		},
417		trackUserLocation: true
418		})
419		);
420
421		// When a click event occurs on a feature in the places layer, open a popup at the
422		// location of the feature, with description HTML from its properties.
423		map.on("click", "locations", function(e) {
424		var currentFeature = e.features[0];
425		// 1. Create Popup
426		createPopUp(currentFeature);
427
428		// 2. Highlight listing in sidebar (and remove highlight for other listing)
429		var activeItem = document.getElementsByClassName("is-active");
430		if (activeItem[0]) {
431		activeItem[0].classList.remove("is-active");
432		}
433
434		var headingElement = document.getElementById(
435		"heading" + currentFeature.properties.id
436		);
437		if (headingElement) {
438		headingElement.classList.add("is-active");
439		}
440		var collapseElement = document.getElementById(
441		"collapse" + currentFeature.properties.id
442		);
443		if (collapseElement) {
444		$(collapseElement).collapse("show");
445		}
446		});
447
448		map.on("moveend", function() {
449		// Query all the rendered points in the view
450		var features = map.queryRenderedFeatures({
451		layers: ["locations"]
452		});
453
454		if (features) {
455		//var uniqueFeatures = getUniqueFeatures(features, "Categories");
456
457		// Populate features for the listing overlay.
458		buildLocationList(features);
459
460		// Clear the input container
461		filterEl.value = "";
462
463		// Store the current features in sn `locations_on_map` variable to later use for filtering on `keyup`.
464		//locations = features;
465		}
466		});
467
468		map.on("mousemove", "locations", function() {
469		// Change the cursor style as a UI indicator.
470		map.getCanvas().style.cursor = "pointer";
471		});
472
473		map.on("mouseleave", "locations", function() {
474		map.getCanvas().style.cursor = "";
475		//popup.remove();
476		});
477
478		$(".dropdown-item").click(function() {
479		var value = normalizeString($(this).text());
480
481		var filtered = map.querySourceFeatures("locations_source");
482		if (value !== "alle") {
483		// Filter visible features that don't match the input value.
484		filtered = filtered.filter(function(feature) {
485		var name = normalizeString(feature.properties.name);
486		var Categories = normalizeString(feature.properties.Categories);
487		return name.indexOf(value) > -1 \|\| Categories.indexOf(value) > -1;
488		});
489		}
490		if (!filtered) {
491		return;
492		}
493
494		var uniqueFeatures = getUniqueFeatures(filtered, "Categories");
495		// Populate the sidebar with filtered results
496		buildLocationList(uniqueFeatures);
497
498		// Set the filter to populate features into the layer.
499		map.setFilter(
500		"locations",
501		["in", "name"].concat(
502		uniqueFeatures.map(function(feature) {
503		return feature.properties.name;
504		})
505		)
506		);
507
508		txtCategoriesEl.value = value;
509		});
510		}
511		);
512		});
513
514		// Direction event listener
515		mapDirections.on("route", function() {
516		filterOnRoute();
517		});
518
519		// Display Direction
520		$("#btnDisplayControls").on("click", function() {
521		displayDirectionControls();
522		});
523

sheub / vectortiles

Code Duplication Length = 520-521 lines in 2 locations

js/app.js 1 location

dist/app.js 1 location