regional

ANZEIGEN ZURÜCKSETZEN

Alle Nachtkritiken - {{ currentCategoryTitle }}

`); jQuery.get(url, function (data) { app.articlesLoading = false; jQuery("#article_container").html(data); if (callback != null) callback(); }); } }, computed: { selectedCountryName: function () { if (this.filter.country !== "") return categoryTree.countries[this.filter.country].name; return null; }, selectedStateName: function () { if (this.filter.country !== "" && this.filter.state !== "") return categoryTree.countries[this.filter.country].states[this.filter.state].name; return null; }, selectedCityName: function () { if (this.filter.country !== "" && this.filter.state !== "" && this.filter.city !== "") return categoryTree.countries[this.filter.country].states[this.filter.state].cities[this.filter.city].name; return null; }, selectedPlaceName: function () { if (this.filter.country !== "" && this.filter.state !== "" && this.filter.city !== "" && this.filter.place !== "") return categoryTree.countries[this.filter.country].states[this.filter.state].cities[this.filter.city].places[this.filter.place].name; return null; }, currentCategoryTitle: function () { if (this.filter.country === "") return null; let country = categoryTree.countries[this.filter.country]; if (this.filter.state !== "") { let state = country.states[this.filter.state]; if (this.filter.city !== "") { let city = state.cities[this.filter.city]; if (this.filter.place !== "") { let place = city.places[this.filter.place]; return place.name; } return city.name; } return state.name; } return country.name; }, currentCategoryId: function () { if (this.filter.country === "") return null; let country = categoryTree.countries[this.filter.country]; if (this.filter.state !== "") { let state = country.states[this.filter.state]; if (this.filter.city !== "") { let city = state.cities[this.filter.city]; if (this.filter.place !== "") { let place = city.places[this.filter.place]; return place.id; } return city.id; } return state.id; } return country.id; }, dropdownCountries: function () { return Object.values(categoryTree.countries).sort(function (a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); }, dropdownStates: function () { if (this.filter.country !== "") return Object.values(categoryTree.countries[this.filter.country].states).sort(function (a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); return null; }, dropdownCities: function () { if (this.filter.country !== "" && this.filter.state !== "") return Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities).sort(function (a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); return null; }, dropdownPlaces: function () { if (this.filter.country !== "" && this.filter.state !== "" && this.filter.city !== "") return Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities[this.filter.city].places).sort(function (a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); return null; }, selectedCountryTOPOJSON: function () { if (this.filter.country === "DE") { return regionalTopoJsonData.objects.DE; } else if (this.filter.country === "AT") { return regionalTopoJsonData.objects.AT; } else if (this.filter.country === "CH") { return regionalTopoJsonData.objects.CH; } else if (this.filter.country === "LU") { return regionalTopoJsonData.objects.LU; } else if (this.filter.country === "LI") { return regionalTopoJsonData.objects.LI; } else if (this.filter.country === "IT") { return regionalTopoJsonData.objects.IT; } return null; } }, watch: { 'filter.country': function (newState, oldState) { if (newState !== "") { this.filter.state = ""; this.filter.city = ""; this.filter.place = ""; if (Object.values(categoryTree.countries[this.filter.country].states).length === 1) { this.selectState(Object.values(categoryTree.countries[this.filter.country].states)[0].state_id); } d3.selectAll(".state").classed("selected", false); d3.selectAll("[data-type=\"country\"]").style("visibility", "visible"); d3.selectAll("[data-type=\"country\"]").classed("dimmed", true); d3.select("#" + newState).style("visibility", "hidden"); [[x0, y0], [x1, y1]] = map.path.bounds(d3.select("#" + newState).data()[0]); map.zoomTo(x0, y0, x1, y1); } }, 'filter.state': function (newState, oldState) { this.filter.city = ""; this.filter.place = ""; if (newState === "") { map.removeCities(); } else { if (Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities).length === 1) { this.selectCity(Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities)[0].id); } map.replaceCities(Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities)); d3.selectAll(".state").classed("selected", false); d3.selectAll("[data-state-group=\"" + this.filter.state + "\"]").classed("selected", true); [[x0, y0], [x1, y1]] = map.path.bounds(topojson.merge(regionalTopoJsonData, this.selectedCountryTOPOJSON.geometries.filter(function (geometry) { return geometry.properties.group === app.filter.state || geometry.properties.id === app.filter.state; }))); map.zoomTo(x0, y0, x1, y1); } }, 'filter.city': function (newState, oldState) { this.filter.place = ""; jQuery(`.city`).removeClass("hovered"); if (newState !== "") { jQuery(`#city-${newState}`).addClass("hovered"); if (Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities[this.filter.city].places).length === 1) { this.selectPlace(Object.values(categoryTree.countries[this.filter.country].states[this.filter.state].cities[this.filter.city].places)[0].id); } } }, currentCategoryId: function (newState, oldState) { if (newState !== null) { this.refreshArticles(); } } } }); let map = { mapWidth: jQuery("#map").width(), mapHeight: jQuery("#map").height(), zoom: null, svg: null, svgMap: null, projection: null, path: null, tooltip: null, init: function () { map.zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", map.zoomed); map.projection = d3.geoMercator(); map.projection.fitSize([map.mapWidth, map.mapHeight], regionMapGeoJSON); map.path = d3.geoPath().projection(map.projection); map.svg = d3.select("#map").append("svg"); jQuery("#map > svg").height(jQuery("#map").height()) jQuery("#map > svg").width(jQuery("#map").width()) map.svg.on("click", function (event, data) { app.resetFilter(); event.stopPropagation(); }); map.svgMap = map.svg.append("g"); [ { id: "DE", label: "Deutschland", map: germany, mergedMap: germanyMerged }, { id: "AT", label: "Österreich", map: austria, mergedMap: austriaMerged }, { id: "CH", label: "Schweiz", map: switzerland, mergedMap: switzerlandMerged }, { id: "IT", label: "Italien", map: italy, mergedMap: italyMerged }, { id: "LU", label: "Luxemburg", map: luxembourg, mergedMap: luxembourgMerged }, { id: "LI", label: "Liechtenstein", map: liechtenstein, mergedMap: liechtensteinMerged }, ].forEach(function (country) { map.svgMap.append("g").selectAll("path") .data(country.map.features) .enter() .append("path") .attr("d", map.path) .attr("id", function (element) { return element.properties.id; }) .attr("class", function (d) { if (!categoryTree.countries.hasOwnProperty(country.id)) { return "state noClick"; } return "state"; }) .attr("data-type", "state") .attr("data-state-group", function (element) { return element.properties.group ?? element.properties.id; }) .attr("data-label", function (d) { return d.properties.group_label ?? d.properties.na; }) .on("mouseover", map.mouseOverState) .on("mouseout", map.mouseOutState) .on("mousemove", map.mouseMoveState) .on("click", map.clickedMapShape); map.svgMap.append("g").append("path") .data([country.mergedMap]) .attr("d", map.path) .attr("id", country.id) .attr("class", function (d) { if (!categoryTree.countries.hasOwnProperty(country.id)) { return "country noClick"; } return "country"; }) .attr("data-label", function (d) { return country.label; }) .attr("data-type", "country") .on("mouseover", map.mouseOverCountry) .on("mouseout", map.mouseOutCountry) .on("mousemove", map.mouseMoveCountry) .on("click", map.clickedMapShape); } ); map.svg.call(map.zoom); this.tooltip = d3.select("#map") .append("div") .style("opacity", 0) .attr("class", "tooltip-popup"); }, removeCities: function () { d3.select("g#cities_container").remove(); }, replaceCities: function (cityList) { this.removeCities(); map.svgMap.append("g").attr("id", "cities_container") .selectAll("path") .data(cityList) .enter() .append("path") .attr("id", function (city) { return "city-" + city.id; }) .attr("class", "city") .attr("d", "M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z") .attr("transform", function (city) { let coords = map.projection([city.longitude, city.latitude]); return "translate(" + coords[0] + "," + coords[1] + ") scale(0)" }) .attr("data-label", function (city) { return city.name; }) .on("mouseover", map.mouseOverCity) .on("mouseout", map.mouseOutCity) .on("click", map.clickedCity) .transition() .delay(400) .duration(800) .attr("transform", function (city) { let coords = map.projection([city.longitude, city.latitude]); return "translate(" + coords[0] + "," + coords[1] + ") scale(.25)" }); }, reset: function () { // Remove styling d3.selectAll("[data-type=\"country\"]").style("visibility", "visible"); d3.selectAll("[data-type=\"country\"]").classed("dimmed", false); map.svg.transition().duration(750).call( map.zoom.transform, d3.zoomIdentity, d3.zoomTransform(map.svg.node()).invert([map.mapWidth / 2, map.mapHeight / 2]) ); }, zoomTo: function (x0, y0, x1, y1) { map.svg.transition().duration(750).call( map.zoom.transform, d3.zoomIdentity .translate(map.mapWidth / 2, map.mapHeight / 2) .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / map.mapWidth, (y1 - y0) / map.mapHeight))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), //d3.pointer(event, svg.node()) ); }, zoomed: function (event) { const {transform} = event; map.svgMap.attr("transform", transform); }, mouseOverCountry: function (event, Country) { map.tooltip.style("opacity", 1); }, mouseOutCountry: function (event, Country) { map.tooltip.style("opacity", 0); }, mouseMoveCountry: function (event, Country) { map.tooltip .html(d3.select(this).attr("data-label")) .style("left", (event.offsetX + 60) + "px") .style("top", (event.offsetY + 250) + "px"); }, mouseOverState: function (event, state) { let id = (state.properties.group ?? state.properties.id); d3.selectAll("path[data-state-group='" + id + "']").classed("hovered", true); jQuery("select#state").val(id); map.tooltip.style("opacity", 1); }, mouseOutState: function (event, state) { d3.selectAll("path[data-state-group='" + (state.properties.group ?? state.properties.id) + "']").classed("hovered", false); jQuery("select#state").val(app.filter.state); map.tooltip.style("opacity", 0); }, mouseMoveState: function (event, state) { map.tooltip .html(d3.select(this).attr("data-label")) .style("left", (event.offsetX + 60) + "px") .style("top", (event.offsetY + 250) + "px"); }, mouseOverCity: function (event, city) { jQuery("select#city").val(city.id); map.tooltip.style("opacity", 1); map.tooltip .html(d3.select(this).attr("data-label")) .style("left", (d3.select(this).offsetX + 60) + "px") .style("top", (d3.select(this).offsetY + 250) + "px"); }, mouseOutCity: function (event, city) { jQuery("select#city").val(app.filter.city); map.tooltip.style("opacity", 0); }, clickedMapShape: function (event, d) { let element = d3.select(this); if (element.attr("data-type") === "country") { app.selectCountry(element.attr("id")); } else if (element.attr("data-type") === "state") { app.selectState(element.attr("data-state-group")); } event.stopPropagation(); }, clickedCity: function (event, city) { app.selectCity(city.id); event.stopPropagation(); }, } map.init(); app.refreshArticles();

dertheaterpodcast

nachtkritiknewsletter

JETZT ABONNIEREN

digitalerspielplan

DIGITALER SPIELPLAN