sheub / vectortiles

  var scrollValue = $(window).scrollTop();

  if (scrollValue > 220) {

    $(".navbar").addClass("affix");

  } else {

    $(".navbar").removeClass("affix");

  }

});

/*Load location (stores2)*/

function loadLocations(asynchr = true) {

  var locations = null;

  $.ajax({

    async: asynchr,

    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 = null; // = 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

// });

mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig';

var map = new mapboxgl.Map({

  container: 'map',

  style: 'mapbox://styles/mapbox/light-v9',

  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.title =  "Brief description of " + 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 lazyload";

        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

if (!stores2) {

  stores2 = loadLocations(false);

  buildLocationList(stores2.features);

}

// Load map

map.on("load", function (e) {

  map.loadImage(

    "https://leipzig-einkaufen.de/media/diagonal-noise.png",

    function (error, image) {

      if (error) {

        throw error;

      }

      map.addImage("background_pattern", image);

    }

  );

  map.loadImage(

    "https://leipzig-einkaufen.de/media/Marker_with_Shadow.png",

  // 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 = "";

  });

  $(".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();