<script src="/wp-content/js/jquery-3.3.1.min.js"></script><!-- [et_pb_line_break_holder] --> <script src="/wp-content/js/typeahead.bundle.min.js"></script><!-- [et_pb_line_break_holder] --> <script src="/wp-content/js/leaflet.js"></script><!-- [et_pb_line_break_holder] --> <script src="/wp-content/js/leaflet-gesture-handling.min.js"></script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div id="the-basics" style="max-width: 500px; margin: 0 auto;"><!-- [et_pb_line_break_holder] --> <div class="et_pb_module et_pb_search et_pb_search_0 et_pb_bg_layout_light et_pb_text_align_left"><!-- [et_pb_line_break_holder] --> <div><!-- [et_pb_line_break_holder] --> <input type="text" value="" name="s" class="et_pb_s typeahead" placeholder="Strassenname" style="padding-right: 70px; width: 100%;"><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </div></div><!-- [et_pb_line_break_holder] --> <div style="margin-bottom: 2em;"></div> <!-- [et_pb_line_break_holder] --> <!--<input class="typeahead et_pb_search_0" type="text" placeholder="Strassenname"> --><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div id="map" style="height: 550px;"></div><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <script src="/wp-content/js/wahlkreis.js"></script><!-- [et_pb_line_break_holder] --> <script src="/wp-content/js/streets.js"></script><!-- [et_pb_line_break_holder] --> <script src="/wp-content/js/numbers.js"></script><!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --> jQuery(function ($) {<!-- [et_pb_line_break_holder] --> var substringMatcher = function (strs) {<!-- [et_pb_line_break_holder] --> return function findMatches(q, cb) {<!-- [et_pb_line_break_holder] --> var matches, substringRegex;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // an array that will be populated with substring matches<!-- [et_pb_line_break_holder] --> matches = [];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // regex used to determine if a string contains the substring `q`<!-- [et_pb_line_break_holder] --> substrRegex = new RegExp(q, 'i');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // iterate through the pool of strings and for any string that<!-- [et_pb_line_break_holder] --> // contains the substring `q`, add it to the `matches` array<!-- [et_pb_line_break_holder] --> $.each(strs, function (i, str) {<!-- [et_pb_line_break_holder] --> if (substrRegex.test(str)) {<!-- [et_pb_line_break_holder] --> matches.push(str);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> cb(matches);<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --> var areaLayers = {};<!-- [et_pb_line_break_holder] --> var map = L.map('map', {<!-- [et_pb_line_break_holder] --> minZoom: 11,<!-- [et_pb_line_break_holder] --> maxZoom: 13,<!-- [et_pb_line_break_holder] --> maxBounds: [<!-- [et_pb_line_break_holder] --> [51.668565, 6.258990],<!-- [et_pb_line_break_holder] --> [51.248434, 7.124849]],<!-- [et_pb_line_break_holder] --> gestureHandling: true<!-- [et_pb_line_break_holder] --> }).setView([51.44535, 6.760586], 11);<!-- [et_pb_line_break_holder] --> L.tileLayer('https://api.mapbox.com/styles/v1/denesk/cjg2haubh0mbm2sqrhzwytmqx/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGVuZXNrIiwiYSI6ImNqZzJhNW15bjBza3YyeW1vZDl3MDczdjAifQ.UST5vhx6aKs5CfYFK3qnVg', {<!-- [et_pb_line_break_holder] --> attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'<!-- [et_pb_line_break_holder] --> }).addTo(map);<!-- [et_pb_line_break_holder] --> var geojson = L.geoJSON(geoJson, {<!-- [et_pb_line_break_holder] --> onEachFeature: onEachFeature,<!-- [et_pb_line_break_holder] --> style: style<!-- [et_pb_line_break_holder] --> }).addTo(map);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> for (var key in geojson._layers) {<!-- [et_pb_line_break_holder] --> var bezirk = geojson._layers[key].feature.properties._Wahlbezir;<!-- [et_pb_line_break_holder] --> var layer_id = key;<!-- [et_pb_line_break_holder] --> areaLayers[bezirk] = layer_id;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function onEachFeature(feature, layer) {<!-- [et_pb_line_break_holder] --> var bezirk = feature.properties._Wahlbezir;<!-- [et_pb_line_break_holder] --> layer.on({<!-- [et_pb_line_break_holder] --> mouseover: highlightFeature,<!-- [et_pb_line_break_holder] --> mouseout: resetHighlight,<!-- [et_pb_line_break_holder] --> click: clickEvent,<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function selection(layerID, bezirk) {<!-- [et_pb_line_break_holder] --> map.closePopup();<!-- [et_pb_line_break_holder] --> clearAllHighlights();<!-- [et_pb_line_break_holder] --> var layer = geojson._layers[layerID];<!-- [et_pb_line_break_holder] --> var latlng = layer.getBounds().getCenter();<!-- [et_pb_line_break_holder] --> map.flyTo(latlng, 13);<!-- [et_pb_line_break_holder] --> _highlightFeature(layer);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> layer.off('mouseout');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var popup = L.popup()<!-- [et_pb_line_break_holder] --> .setLatLng(latlng)<!-- [et_pb_line_break_holder] --> .setContent(layer.feature.properties.hover)<!-- [et_pb_line_break_holder] --> .openOn(map);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $(popup._closeButton).on('click', function(e) { <!-- [et_pb_line_break_holder] --> clearAllHighlights();<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $('#the-basics .typeahead').typeahead({<!-- [et_pb_line_break_holder] --> hint: true,<!-- [et_pb_line_break_holder] --> highlight: true,<!-- [et_pb_line_break_holder] --> minLength: 2<!-- [et_pb_line_break_holder] --> }, {<!-- [et_pb_line_break_holder] --> name: 'streets',<!-- [et_pb_line_break_holder] --> source: substringMatcher(streets)<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function resetHighlight(e) {<!-- [et_pb_line_break_holder] --> geojson.resetStyle(e.target);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function clearAllHighlights() {<!-- [et_pb_line_break_holder] --> for (lId in geojson._layers) {<!-- [et_pb_line_break_holder] --> geojson.resetStyle(geojson._layers[lId]);<!-- [et_pb_line_break_holder] --> geojson._layers[lId].on('mouseout', resetHighlight);<!-- [et_pb_line_break_holder] --> geojson._layers[lId].on('mouseover', highlightFeature);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function style(feature) {<!-- [et_pb_line_break_holder] --> return {<!-- [et_pb_line_break_holder] --> fillColor: '#E3000F',<!-- [et_pb_line_break_holder] --> weight: 2,<!-- [et_pb_line_break_holder] --> opacity: 1,<!-- [et_pb_line_break_holder] --> color: 'white',<!-- [et_pb_line_break_holder] --> fillOpacity: 0.4<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function _highlightFeature(layer) {<!-- [et_pb_line_break_holder] --> layer.setStyle({<!-- [et_pb_line_break_holder] --> weight: 5,<!-- [et_pb_line_break_holder] --> color: '#E3000F',<!-- [et_pb_line_break_holder] --> fillOpacity: 0.7<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {<!-- [et_pb_line_break_holder] --> layer.bringToFront();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function clickEvent(e) {<!-- [et_pb_line_break_holder] --> var layer = e.target;<!-- [et_pb_line_break_holder] --> selection(layer._leaflet_id, layer.feature.properties._Wahlbezir);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function highlightFeature(e) {<!-- [et_pb_line_break_holder] --> var layer = e.target;<!-- [et_pb_line_break_holder] --> _highlightFeature(layer);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function selectStreet(ev, street) {<!-- [et_pb_line_break_holder] --> console.log(street);<!-- [et_pb_line_break_holder] --> var idx = streets.indexOf(street)<!-- [et_pb_line_break_holder] --> selection(areaLayers[orderdBezirke[idx]], orderdBezirke[idx])<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> $('.typeahead').bind('typeahead:select', selectStreet);<!-- [et_pb_line_break_holder] --> $('.typeahead').bind('typeahead:autocomplete', selectStreet);<!-- [et_pb_line_break_holder] --> $('.typeahead').on('keyup', function (e) {<!-- [et_pb_line_break_holder] --> if (e.keyCode == 13) {<!-- [et_pb_line_break_holder] --> var myVal = $('.tt-hint').val();<!-- [et_pb_line_break_holder] --> if (myVal != '') {<!-- [et_pb_line_break_holder] --> selectStreet(e, myVal);<!-- [et_pb_line_break_holder] --> $('.typeahead').typeahead('close');<!-- [et_pb_line_break_holder] --> $('.typeahead').val(myVal);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> </script>