-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
74fa723
commit eb38d97
Showing
1 changed file
with
171 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| <html> | ||
| <head> | ||
| <title>damals Karte</title> | ||
| <meta charset="UTF-8"/> | ||
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" /> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/jquery.fancybox.css" /> | ||
| <style> | ||
| #map{ height: 100% } | ||
| .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; } | ||
| .legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="progress"><div id="progressbar"></div></div> | ||
| <div id="map" /> | ||
|
|
||
| <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script> | ||
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script> | ||
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.fancybox.pack.js"></script> | ||
| <script> | ||
| function style(feature) { | ||
| return { | ||
| fillColor: '#FFEDA0', | ||
| weight: 2, | ||
| opacity: 1, | ||
| color: 'white', | ||
| fillOpacity: 1 | ||
| }; | ||
| } | ||
|
|
||
| var scores = 0; | ||
|
|
||
| var blueIcon = new L.Icon.Default({}); | ||
| var redIcon = new L.Icon({ | ||
| iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', | ||
| shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', | ||
| iconSize: [25, 41], | ||
| iconAnchor: [12, 41], | ||
| popupAnchor: [1, -34], | ||
| shadowSize: [41, 41] | ||
| }); | ||
|
|
||
| var oldLayer = undefined; | ||
| var lastCoordinates = undefined; | ||
|
|
||
| var map = L.map('map').setView([51.3399028, 12.3742236], 14) | ||
| L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | ||
| attribution: 'Map data @ <a href="http://openstreetmap.org">OpenStreetMap</a> contributors</a>' | ||
| }).addTo(map); | ||
|
|
||
| var progress = document.getElementById('progress'); | ||
| var progressBar = document.getElementById('progressbar'); | ||
|
|
||
| function updateProgressBar(processed, total, elapsed, layersArray) { | ||
| if (elapsed > 1000) { | ||
| progress.style.display = 'block'; | ||
| progressBar.style.width = Math.round(processed / total * 100) + '%'; | ||
| } | ||
| if (processed === total) { | ||
| progress.style.display = 'none'; | ||
| } | ||
| } | ||
|
|
||
| var realMarkerPosition = undefined; | ||
| var markerPosition = undefined; | ||
| var tries = 0; | ||
|
|
||
| $.ajaxSetup({ | ||
| scriptCharset: "utf-8", | ||
| contentType: "application/json; charset=utf-8" | ||
| }); | ||
| var jsonMimeType = "application/json;charset=UTF-8"; | ||
| $.ajax({ | ||
| type: "GET", | ||
| url: "photos.geojson", | ||
| beforeSend: function(x) { | ||
| if (x && x.overrideMimeType) { | ||
| x.overrideMimeType(jsonMimeType); | ||
| } | ||
| }, | ||
| dataType: "json", | ||
| success: function(data) { | ||
|
|
||
| var init = false; | ||
|
|
||
| map.on('click', | ||
| function handleClickOnMap(e) { | ||
| if(init) return; | ||
|
|
||
| var marker = L.marker(e.latlng, { draggable: true } ); | ||
| marker.on('dragend', function(e) { | ||
| setTimeout(function() { | ||
| setMarkerPosition(e.target.latlng ? e.target.latlng : e.latlng); | ||
| }, 10); | ||
| }); | ||
| marker.addTo(map); | ||
| setMarkerPosition(e.target.latlng ? e.target.latlng : e.latlng); | ||
| init = true; | ||
| } | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| // control that shows state info on hover | ||
| var info = L.control(); | ||
|
|
||
| info.onAdd = function(map) { | ||
| this._div = L.DomUtil.create('div', 'info'); | ||
| this.update(); | ||
| return this._div; | ||
| }; | ||
|
|
||
| info.update = function(id, props) { | ||
| var realMarkerPosition = L.latLng(51.3439179,12.3801743) | ||
| var realMarker = L.marker(realMarkerPosition, { draggable: false } ); | ||
| realMarker.setIcon(redIcon); | ||
| realMarker.addTo(map); | ||
|
|
||
| var htmlInner = '<div style="width: 300px;"><h4>Quiz</h4>'; | ||
|
|
||
| htmlInner += 'Wie hieß der heutige Willy-Brandt-Platz 1900?'; | ||
| htmlInner += '<br /><br />'; | ||
| htmlInner += '<form id="quizcontainer" name="quizform" action="javascript:checkQuiz()">'; | ||
| htmlInner += '<input type="radio" name="quizgroup" value="1" checked="checked"> Karl-Marx-Platz<br/>'; | ||
| htmlInner += '<input type="radio" name="quizgroup" value="2"> Blücher-Platz<br/>'; | ||
| htmlInner += '<input type="radio" name="quizgroup" value="3"> Platz der Republik<br/>'; | ||
| htmlInner += '<input type="radio" name="quizgroup" value="4"> Richard-Wagner-Platz'; | ||
| htmlInner += '<br /><br />'; | ||
| htmlInner += '<button type="submit">Prüfen</button>' | ||
| htmlInner += '</form>' | ||
| htmlInner += '<br /><br /><div id="damalsPhotoContainer"><img src="https://opendata.leipzig.de/dataset/da00ca5b-8f95-5a58-9395-bee46614cf8f/resource/ef4bf849-d0d1-433d-b503-58149d2ce28a/download/tmparchivba198111821.jpg" style="width:295px" /></div>' | ||
| this._div.innerHTML = htmlInner; | ||
| }; | ||
|
|
||
| info.addTo(map); | ||
|
|
||
| function checkQuiz() { | ||
| tries = tries + 1; | ||
|
|
||
| var thisRoundScore = 0; | ||
| var firstMessage; | ||
| if ($("#quizContainer > input")[1].checked == true) { | ||
| if(tries == 1) { | ||
| thisRoundScore = 100; | ||
| } else if(tries == 2) { | ||
| thisRoundScore = 60; | ||
| } else if(tries == 3) { | ||
| thisRoundScore = 20; | ||
| } | ||
| scores = scores + thisRoundScore; | ||
| alert("Sie haben die Frage beim " + tries + ". Mal richtig beantwortet." + | ||
| "\nSie bekommen " + thisRoundScore + " Punkte." + | ||
| "\nIhre Punkte nach dieser Runde: " + scores); | ||
| } else if (tries < 3) { | ||
| alert("Das ist leider nicht richtig, Bitte versuchen sie es erneut."); | ||
| } else { | ||
| alert("Das ist leider nicht richtig, die richtige Antwort ist 'Blücher-Platz'." + | ||
| "\nIhre Gesamt-Punktzahl nach dieser Runde: " + scores); | ||
| } | ||
| } | ||
|
|
||
| function setMarkerPosition(mp) { | ||
| markerPosition = mp; | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |