then
/
opencoil-paracity
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

added client position to the map

master
dennisdebel 4 years ago
parent
ec7ea32aab
commit
9bed67236e
2 changed files with 57 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      website/map/index.php
  2. 18
      website/map/main.css

62
website/map/index.php
View File

@ -6,17 +6,17 @@ $scooters = array(
//array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ),
//array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ),
//array('https://opencoil.show/test-json.php?scooterID=3', 'artist name 2', 'title 2', 'desciption 2' ),
array('https://platform.tier-services.io/v1/vehicle/024449e3-8061-4cf5-88b9-546a95df8b33', 'Aram Bartholl', 'Fossils of late capitalism', 'Aram Bartholl has salvaged rental bikes and scooters from the Spree River and is now exhibiting them as material relics of the platform economy.'),
array('https://platform.tier-services.io/v1/vehicle/857af6ef-457d-49bb-841f-1b63de59ae4c', '!Mediengruppe Bitnik', 'Follow the Rider ƪ(ړײ)ƪ', 'Follow the next person you see on an e-scooter. 👠 Keep distance but don\'t lose your guide.'),
array('https://platform.tier-services.io/v1/vehicle/5f57b04b-7048-40d7-8e68-13fd302277d8', 'Jonas Lund', 'Hello Capitalism', '\'Hello Capitalism\' is a text-based work by Jonas Lund, exploring a wide range of different types of capitalistic systems.'),
array('https://platform.tier-services.io/v1/vehicle/145e671c-a68b-4bcb-966b-1a65127e2b6f', 'Martin Howse', 'wok_the_cables', 'Adventure game for psychogeophysical divination of portals, realtime instructions to follow #wokthecables'),
array('https://platform.tier-services.io/v1/vehicle/8bb82e88-ac12-4158-a172-eaeefae320fd', 'Sofya Aleynikova', 'followers', 'Eine weibliche Protagonistin manifestiert sich als Meme im Web und stellt die richtigen Fragen.'),
array('https://platform.tier-services.io/v1/vehicle/f28617c5-9570-4581-a255-bfee04541293', 'JODI', '#4b38$R0ut.IDx', '██████████████████████████████████████████████████▒▒'),
array('https://platform.tier-services.io/v1/vehicle/4d6484c1-318b-4827-83e2-e143e79ebae3', 'Rosa Menkmann', 'Ariane', 'Ariane is a famous Shutterstock model. She also worries about getting older.'),
array('https://platform.tier-services.io/v1/vehicle/9506fa18-1062-4d0b-94bf-9a2da236d94f', 'Sarah Grant', 'Plague Rave 2020', 'Take a katamari style tour with corona through the vibrant Berlin club scene. Download a souvenir photo at the end of the trip!'),
array('https://platform.tier-services.io/v1/vehicle/54aaed50-dd24-4c10-9580-b05b3bfc6985', 'Danja Vasiliev', 'need4speed', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/481f9ae7-bca5-469f-b4c0-91c3140aafc8', 'Constant Dullaart', 'constant time', 'Your network, your home, as temporary as seconds on the clock. Reconnect.'),
array('https://platform.tier-services.io/v1/vehicle/fb0f58d0-c231-4bba-94d7-f12c8544ae6c', 'Dennis de Bel & Anton Jehle', 'Paracity Gallery v0.41', 'HOW TO: diy scooter gallery'),
array('https://platform.tier-services.io/v1/vehicle/1cec9f29-0e56-459b-a30f-6341cc09ba84', 'Aram Bartholl', 'Fossils of late capitalism', 'Aram Bartholl has salvaged rental bikes and scooters from the Spree River and is now exhibiting them as material relics of the platform economy.'),
array('https://platform.tier-services.io/v1/vehicle/9c8902e0-8351-4809-a24a-a8eefe5249b5', '!Mediengruppe Bitnik', 'Follow the Rider ƪ(ړײ)ƪ', 'Follow the next person you see on an e-scooter. 👠 Keep distance but don\'t lose your guide.'),
array('https://platform.tier-services.io/v1/vehicle/27f129e5-6e2a-415f-afdf-075f6aa1bc37', 'Jonas Lund', 'Hello Capitalism', '\'Hello Capitalism\' is a text-based work by Jonas Lund, exploring a wide range of different types of capitalistic systems.'),
array('https://platform.tier-services.io/v1/vehicle/00020bdd-ee4c-486a-90f5-dd04672cfc54', 'Martin Howse', 'wok_the_cables', 'Adventure game for psychogeophysical divination of portals, realtime instructions to follow #wokthecables'),
array('https://platform.tier-services.io/v1/vehicle/acd0c627-5b16-461e-a662-65cef778d94d', 'Sofya Aleynikova', 'followers', 'Eine weibliche Protagonistin manifestiert sich als Meme im Web und stellt die richtigen Fragen.'),
array('https://platform.tier-services.io/v1/vehicle/7eebb2e6-2694-43a2-b390-d8fc70124377', 'JODI', '#4b38$R0ut.IDx', '██████████████████████████████████████████████████▒▒'),
array('https://platform.tier-services.io/v1/vehicle/50e749fc-1ebb-41b0-9de7-952db5c0aa05', 'Rosa Menkmann', 'Ariane', 'Ariane is a famous Shutterstock model. She also worries about getting older.'),
array('https://platform.tier-services.io/v1/vehicle/30895827-25f1-4c07-8528-25c215e80336', 'Sarah Grant', 'Plague Rave 2020', 'Take a katamari style tour with corona through the vibrant Berlin club scene. Download a souvenir photo at the end of the trip!'),
array('https://platform.tier-services.io/v1/vehicle/2de46e02-d816-47eb-9ad8-0ecb4178af25', 'Danja Vasiliev', 'need4speed', 'A situationist game in public space adapted for the micro-mobility sector. Rent a scooter, ride while making continuous and sharp turns and find l00t!'),
array('https://platform.tier-services.io/v1/vehicle/f42debc7-2dd3-4b64-9956-de96a12d2af9', 'Constant Dullaart', 'constant time', 'Your network, your home, as temporary as seconds on the clock. Reconnect.'),
array('https://platform.tier-services.io/v1/vehicle/8cd255ae-e144-4a45-aa7d-8317908a2465', 'Dennis de Bel & Anton Jehle', 'Paracity Gallery v0.41', 'HOW TO: DIY Scooter Gallery Module'),
);
@ -185,8 +185,11 @@ function callAPI($url){
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<!-- location -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.72.0/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.72.0/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<!-- main css -->
<link rel="stylesheet" href="main.css"/>
<!-- begin timeslider
<script src="SliderControl.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
@ -200,6 +203,7 @@ function callAPI($url){
</script>
</head>
<body>
<div id="map"></div>
<div id="title-container">
<h1>OPENCOIL</h1>
@ -226,12 +230,12 @@ function callAPI($url){
<span>Ein schwarzer Pin mit Werkzeug Icon bedeuted, dass der Roller aktuell gewartet wird.</span><br><br>
2. Verbinde dich mit dem Wifi Netzwerk. Es trägt den Namen der Arbeit die in der Gallerie zu sehen ist.<br>
Auf dem iPhone sollte sich automatisch ein Fenster öffnen, indem nach kurzer Ladezeit die Arbeit zu sehen ist. Sollte dies einmal nicht funktionieren, öffne selbst den Browser und tipp die folgende Adresse ein: opencoil.local<br>
Auf Android Geräten bekommst du eventuell ein Popup bekommen welches dich fragt ob du die Verbindung zum Netzwerk behalten möchtest, da keine Verbindung zum Internet besteht. Klicke Verbindung behalten. Sollte dich dein Gerät fragen ob du dich ins Netzwerk einloggen möchtest, klicke einloggen. Alternativ kannst du einen Browser deiner Wahl öffnen und entweder 'opencoil.local' oder eine beliebige Zeichenfolge gefolgt von '.com' in das URL Feld eingeben.<br><br>
Auf Android Geräten bekommst du eventuell ein Popup bekommen welches dich fragt ob du die Verbindung zum Netzwerk behalten möchtest, da keine Verbindung zum Internet besteht. Klicke Verbindung behalten. Sollte dich dein Gerät fragen ob du dich ins Netzwerk einloggen möchtest, klicke einloggen. Alternativ kannst du einen Browser deiner Wahl öffnen und entweder 'opencoil.show' oder eine beliebige Zeichenfolge gefolgt von '.com' in das URL Feld eingeben.<br><br>
Solltest du Hilfe benötigen, zögere nicht uns per <a href="mailto:service@opencoil.show">Mail</a> oder <a href="https://t.me/opencoil">Telegram App</a> zu kontaktieren.<br><br>
Support kann sowohl in Deutsch als auch in Englisch geleistet werden.<br><br>
Allgemeine Infos<br><br>
Die Arbeiten von Constant Dulaart & Martin Howse nutzen den Namen des Netzwerks, der sich bei ihnen konstant ändert. Es ist normal, dass du dich nicht mit ihnen verbinden kannst.<br>
Die Arbeit von Danja Vasiliev wurde für den Chrome Browser optimiert. Dieser muss auf einem iPhone gegebenenfalls erst installiert werden.<br>
Die Arbeit von Danja Vasiliev wurde für Android Geräte optimiert. Auf dem iPhone kannst du, indem du mit zwei Fingern über das Bild streichst, ein Rennen simulieren.<br>
Generell braucht es eventuell kurz bis die Arbeiten im Browser angezeigt werden. Geduld bitte.<br><br>
Viel Spaß!
</p>
@ -246,12 +250,12 @@ function callAPI($url){
<span>a black marker & wrench icon means the scooter is beeing serviced.</span><br><br>
2. Connect to the wifi network. The name should be the same as the artwork title.<br>
Using an iPhone there should be a portal page popping up automatically. After a few seconds it will display the artwork. Should this not work for you, open up a browser and type 'opencoil.local' in the adressbar.<br>
On an Android device you might get a popup asking you wether you want to stay connected to the network even without an internet connection. select yes. Should your device ask wether you want to log in to the network, select yes as well. Otherwise open up a browser and type either 'opencoil.local' or any short combination of letters followed by '.com' into the adressbar.<br><br>
On an Android device you might get a popup asking you wether you want to stay connected to the network even without an internet connection. select yes. Should your device ask wether you want to log in to the network, select yes as well. Otherwise open up a browser and type either 'opencoil.show' or any short combination of letters followed by '.com' into the adressbar.<br><br>
if you can't get it to work, don't hesitate to contact us via <a href="mailto:service@opencoil.show">mail</a> or <a href="https://t.me/opencoil">Telegram app</a><br><br>
Support is available in german and english.<br><br>
General information<br><br>
The works by Constant Dullaart & Martin Howse use the actual network name, wich changes constantly. It's normal that you can not connect to these.<br>
Die Arbeit von Danja Vasiliev wurde für den Chrome Browser optimiert. Dieser muss auf einem iPhone gegebenenfalls erst installiert werden.<br>
Danja Vasiliev's work was optimized for Android devices. On an iPhone you can simulate a race by swiping over the picture displayed using two fingers.<br>
In general the works might sometimes take a second to load. be patient.<br><br>
Have fun!
</p>
@ -350,7 +354,7 @@ function callAPI($url){
Alle Arbeiten wurden von den Künstler*innen speziell für die Betrachtung auf Smartphones optimiert.
<br><br>
OPENCOIL ist in keiner Weise mit der den „Mikro-Mobilitätsdiensten“ assoziiert, sondern bedient sich lediglich am bestehenden Rollernetzwerk. Die Umnutzung der Roller zu einem Ausstellungsort ist nach der Ausstellung komplett reversibel und schränkt den herkömmlichen Gebrauch der Roller (auch während der Ausstellung) in keiner Weise ein. Die Roller werden nicht beschädigt.<br><br>
Die Ausstellung startet am 26. Oktober auf dem öffentlichen Platz vor dem Zentrum für Netzkunst (Haus der Statistik) und wird in der Woche bis zum 1. November täglich von unserem Team gewartet und am Laufen gehalten. Sollte eine Arbeit beschädigt oder nicht auffindbar sein bitte per Mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) oder über die Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)<br><br>
Die Ausstellung startet am 26. Oktober mit Rollern in ganz Berlin und wird in der Woche bis zum 1. November täglich von unserem Team gewartet und am Laufen gehalten. Sollte eine Arbeit beschädigt oder nicht auffindbar sein bitte per Mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) oder über die Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)<br><br>
</p>
<div id="closeButtonbottom" onclick="document.getElementById('infotext').style.visibility='hidden';">less info</div>
</div>
@ -401,7 +405,7 @@ function callAPI($url){
<br><br>
OPENCOIL is in no way associated with the "micro-mobility services", but only uses the existing scooter network. The conversion of the scooters into an exhibition space is completely reversible after the exhibition ends and in no way restricts the conventional use of the scooters (even during the exhibition). The scooters will not be damaged.
<br><br>
The exhibition will start on October 26th in the public space in front of Zentrum für Netzkunst (Haus der Statistik). For one week, until November 1st, the exhibition will be serviced and kept running daily by our team. Should a work be damaged or not be found, please send an e-mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) or use the Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)
The exhibition will start on October 26th with scooters spread around Berlin. For one week, until November 1st, the exhibition will be serviced and kept running daily by our team. Should a work be damaged or not be found, please send an e-mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) or use the Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)
</p>
<div id="closeButtonbottom" onclick="document.getElementById('infotext').style.visibility='hidden'; document.getElementById('infotext_en').style.visibility='hidden';">less info</div>
</div>
@ -477,11 +481,23 @@ function callAPI($url){
//var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
// var map = marker1;
// layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]);
layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic
var sliderControl = L.control.sliderControl({layer:layerGroup});
map.addControl(sliderControl);
sliderControl.startSlider();
//layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic
//var sliderControl = L.control.sliderControl({layer:layerGroup});
//map.addControl(sliderControl);
//sliderControl.startSlider();
// client location
L.control.locate(
{ "keepCurrentZoomLevel": "true",
icon: 'fa fa-crosshairs',
follow: true,
circleStyle: {}, // change the style of the circle around the user's location
markerStyle: {},
locateOptions: {
enableHighAccuracy: true
}
}).addTo(map);
</script>
</body>
</html>

18
website/map/main.css
View File

@ -201,6 +201,24 @@ h3 {
cursor: pointer;
}
/*client location*/
.leaflet-control-locate a {
padding-top: 4px;
}
.leaflet-control-locate a span {
font-size: 1.4em;
cursor: pointer;
}
.leaflet-control-locate.active a {
color: #2A93EE;
}
.leaflet-control-locate.active.following a {
color: #2A93EE;
}
@media only screen and (max-width: 768px) {
h1 {

Write Preview
Loading…
Cancel
Save