Merge pull request #1 from ZeusWPI/mapbox

Mapbox
This commit is contained in:
Feliciaan De Palmenaer 2015-03-03 23:00:22 +01:00
commit 7bb7dce61c
14 changed files with 700 additions and 69 deletions

BIN
Arteveldehogeschool.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
Odisee.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
Stad Gent.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
UGent.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

409
data.json Normal file
View file

@ -0,0 +1,409 @@
[{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.726759, 51.045660]
},
"properties": {
"name": "Studentenrestaurant De Brug",
"address": "Sint-Pietersnieuwstraat 45",
"capacity": 700,
"period": { "start": "05/01/2015", "end": "23/01/2015" },
"hours": {
"monday": "8u - 22u",
"tuesday": "8u - 22u",
"wednesday": "8u - 22u",
"thursday": "8u - 22u",
"friday": "8u - 22u",
"saturday": false,
"sunday": false
},
"extra": "2 aparte zaaltjes doorlopend beschikbaar (120 plaatsen). Restaurant (1ste en 2de verdieping) gesloten tussen 11u15 en 14u en na 17u",
"type": "UGent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.728294, 51.039980]
},
"properties": {
"name": "Studentenrestaurant Kantienberg",
"address": "Stalhof 45",
"capacity": 600,
"period": { "start": "05/01/2015", "end": "23/01/2015" },
"hours": {
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"saturday": "8u30 - 22u",
"sunday": "8u30 - 22u"
},
"extra": "Enkel weekend, kerstverlof en feestdagen,Registratie noodzakelijk! Registreer <a href=\"http://student.UGent.be/blok_kantien/\">hier</a>. Vanaf 9u kunnen studenten zonder registratie toegang krijgen.",
"type": "UGent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 3.724770, 51.045507 ]
},
"properties": {
"name": "Faculteit Letteren en Wijsbegeerte, faculteitsbibliotheek, vleugels Magnel & Loveling",
"address": "Rozier 44",
"capacity": 580,
"period": { "start": "24/11/2014", "end": "30/01/2014" },
"hours": {
"monday": "9u - 20u",
"tuesday": "9u - 20u",
"wednesday": "9u - 20u",
"thursday": "9u - 20u",
"friday": "9u - 17u",
"saturday": false,
"sunday": false
},
"extra": "Toegangkelijk voor iedereen. Gesloten tijdens het kerstverlof",
"type": "UGent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.727952, 51.044599]
},
"properties": {
"name": "Blok@Therminal",
"address": "Hoveniersberg 24",
"capacity": 300,
"period": { "start": "18/08/2014", "end": "12/09/2014" },
"hours": {
"monday": "8u30 - 22u",
"tuesday": "8u30 - 22u",
"wednesday": "8u30 - 22u",
"thursday": "8u30 - 22u",
"friday": "8u30 - 22u",
"saturday": "8u30 - 22u",
"sunday": "8u30 - 22u"
},
"extra": "Registratie noodzakelijk! Registreer <a href=\"http://student.UGent.be/blok/\">hier</a>. Vanaf 9u kunnen studenten zonder registratie toegang krijgen.",
"type": "UGent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.723510, 51.052041]
},
"properties": {
"name": "Blok@Aula",
"address": "Volderstraat 9",
"capacity": 210,
"period": { "start": "20/12/2014", "end": "23/01/2015" },
"hours": {
"monday": "8u30 - 22u",
"tuesday": "8u30 - 22u",
"wednesday": "8u30 - 22u",
"thursday": "8u30 - 22u",
"friday": "8u30 - 22u",
"saturday": "8u30 - 22u",
"sunday": "8u30 - 22u"
},
"extra": "Registratie noodzakelijk! Registreer <a href=\"http://student.UGent.be/blok_aula/\">hier</a>. Vanaf 9u kunnen studenten zonder registratie toegang krijgen. Sluitingsdagen: 25/12, 01/01, 3/01, 4/01, 5/01,6/01, 13/01 en 20/01.<br/>24/12 en 31/12: 8u-16u",
"type": "UGent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.702897, 51.031507]
},
"properties": {
"name": "BYTES & BOOKS @ gebouw D",
"address": "Openleercentrum campus Schoonmeersen",
"capacity": 444,
"period": { "start": "15/12/2014", "end": "30/01/2015" },
"hours": {
"monday": "8u - 21u45*",
"tuesday": "8u - 21u45",
"wednesday": "8u - 21u45",
"thursday": "8u - 21u45",
"friday": "8u - 16u45*",
"saturday": false,
"sunday": false
},
"extra": "Toegankelijk voor alle Gentse studenten. * Tot 19/12 gewone openingsuren, op 29/12, 30/12 en 2/01 open van 8u-16u45 en op31/12 open van 8u 12u45",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.702700, 51.031201]
},
"properties": {
"name": "Resto D als blokruimte",
"address": "Openleercentrum campus Schoonmeersen",
"capacity": 250,
"period": { "start": "03/01/2015", "end": "25/01/2015" },
"hours": {
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"saturday": "8u - 18u",
"sunday": "8u - 18u"
},
"extra": "Tijdens het weekend enkel HoGent en UGent studenten in bezit van campuskaart Schoonmeersen",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.724278, 51.036589]
},
"properties": {
"name": "BYTES & BOOKS LERA",
"address": "K.L. Ledeganckstraat 8",
"capacity": 110,
"period": { "start": "15/12/2014", "end": "30/01/2015" },
"hours": {
"monday": "8u15 - 18u",
"tuesday": "8u15 - 18u",
"wednesday": "8u15 - 18u",
"thursday": "8u15 - 18u",
"friday": "8u15 - 18u",
"saturday": false,
"sunday": false
},
"extra": "Toegankelijk voor alle Gentse studenten.",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.726827, 51.019702]
},
"properties": {
"name": "BYTES & BOOKS VESALIUS",
"address": "Keramiekstraat 80",
"capacity": 58,
"period": { "start": "05/01/2014", "end": "30/01/2015" },
"hours": {
"monday": "9u - 17u",
"tuesday": "9u - 18u",
"wednesday": "9u - 11u30 <br> 12u45 - 16u45",
"thursday": "9u - 18u",
"friday": "9u - 17u",
"saturday": false,
"sunday": false
},
"extra": "Toegankelijk voor alle Gentse studenten.",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.718445, 51.045588]
},
"properties": {
"name": "BYTES & BOOKS BIJLOKE",
"address": "J. Kluyskensstraat 2",
"capacity": 44,
"period": { "start": "05/01/2014", "end": "30/01/2015" },
"hours": {
"monday": "8u30 - 17u",
"tuesday": "8u30 - 17u",
"wednesday": "8u30 - 17u",
"thursday": "8u30 - 17u",
"friday": "9u - 16u30",
"saturday": false,
"sunday": false
},
"extra": "Toegankelijk voor alle Gentse studenten.",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.726340, 51.054186]
},
"properties": {
"name": "BYTES & BOOKS CONSERVATORIUM",
"address": "Hoogpoort 64",
"capacity": 15,
"period": { "start": "05/01/2014", "end": "30/01/2015" },
"hours": {
"monday": "10u - 12u30<br />13u - 16u15",
"tuesday": "10u - 12u30<br />13u - 16u15",
"wednesday": "10u - 12u30<br />13u - 16u15",
"thursday": "10u - 12u",
"friday": "10u - 12u30<br />13u - 16u15",
"saturday": false,
"sunday": false
},
"extra": "Toegankelijk voor alle Gentse studenten.",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.746496, 51.038855]
},
"properties": {
"name": "BYTES & BOOKS MELLE",
"address": "Brusselsesteenweg 161",
"capacity": 50,
"period": { "start": "05/01/2014", "end": "30/01/2015" },
"hours": {
"monday": "9u - 12u30<br />13u - 17u",
"tuesday": "8u30u - 12u30<br />13u - 17u",
"wednesday": "9u - 12u30<br />13u - 17u",
"thursday": "8u - 12u<br />12u30 - 17u",
"friday": "8u - 12u<br />12u30 - 17u",
"saturday": false,
"sunday": false
},
"extra": "Toegankelijk voor alle Gentse studenten.",
"type": "hogent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.728505, 51.040832]
},
"properties": {
"name": "Mediatheek campus Kantienberg",
"address": "Voetweg 66",
"capacity": 190,
"period": { "start": "05/01/2015", "end": "06/02/2015" },
"hours": {
"monday": "9u - 17u",
"tuesday": "9u - 17u",
"wednesday": "9u - 17u",
"thursday": "9u - 17u",
"friday": "9u - 16u",
"saturday": false,
"sunday": false
},
"extra": "Gesloten op 16 januari. Toegankelijk voor alle Gentse studenten. 40 stille plaatsen.",
"type": "Arteveldehogeschool"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 3.719359, 51.042548 ]
},
"properties": {
"name": "Studentenhuis - Persellezaal",
"address": "Kortrijksepoortstraat 254",
"capacity": 20,
"period": { "start": "05/01/2015", "end": "06/02/2015" },
"hours": {
"monday": "9u - 21u",
"tuesday": "9u - 21u",
"wednesday": "9u - 21u",
"thursday": "9u - 21u",
"friday": "9u - 21u",
"saturday": false,
"sunday": false
},
"extra": "Ingang door groen poortje",
"type": "Arteveldehogeschool"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.708694, 51.061123]
},
"properties": {
"name": "Bibliotheek",
"address": "Gebr. Desmetstraat 1",
"capacity": 50,
"period": { "start": "12/01/2015", "end": "30/01/2015" },
"hours": {
"monday": "8u30 - 17u30",
"tuesday": "8u30 - 17u30",
"wednesday": "8u30 - 17u30",
"thursday": "8u30 - 17u30",
"friday": "9u - 16u",
"saturday": false,
"sunday": false
},
"type": "Odisee",
"extra": false
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.726730, 51.042146]
},
"properties": {
"name": "Sint-Pietersabdij Kapittelzaal",
"address": "Sint-Pietersabdij Kapittelzaal",
"capacity": 60,
"period": { "start": "16/12/2014", "end": "30/01/2015" },
"hours": {
"monday": false,
"tuesday": "10u - 18u",
"wednesday": "10u - 18u",
"thursday": "10u - 18u",
"friday": "10u - 18u",
"saturday": "10u - 18u",
"sunday": "10u - 18u"
},
"extra": "Gesloten op 24, 25, 31/12 en 1/01.",
"type": "Stad Gent"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [3.731393, 51.047282]
},
"properties": {
"name": "Openbare Bibliotheek Zuid",
"address": "Achilles Musschezaal",
"capacity": 100,
"period": { "start": "18/08/2014", "end": "12/09/2014" },
"hours": {
"monday": "10u - 18u45",
"tuesday": "10u - 18u45",
"wednesday": "10u - 18u45",
"thursday": "10u - 18u45",
"friday": "8u30 - 16u45",
"saturday": "8u30 - 16u45",
"sunday": false
},
"extra": "Kerstverlof: 23/12 - 3/1: open 10u - 16u45 en niet beschikbaar op 18/12 (voormiddag), 25 en 26/12, 1 en 2/01, 14/01 (voormiddag)",
"type": "Stad Gent"
}
}
]

BIN
hogent.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -5,6 +5,6 @@
<title>Blokken in Gent</title>
</head>
<body>
<iframe id="iframe" src="map.html"></iframe>
<iframe id="iframe" src="map.html" style="width: 1000px; height: 500px"></iframe>
</body>
</html>

116
map.css
View file

@ -10,10 +10,116 @@ html, body {
height: 100%;
}
.gmnoprint, .gm-style-cc {
display: none;
}
#resto-popup {
.leaflet-popup-content-wrapper,
.leaflet-control-zoom {
border-radius: 0px;
}
.leaflet-popup-content-wrapper {
width: 600px;
max-height: 400px;
overflow-y:auto
}
.leaflet-popup-content {
width:auto !important;
}
a img {
border: none;
}
h4 {
margin-top: 5px;
margin-bottom: 5px;
}
table {
padding-bottom: 10px;
border-spacing: 0;
width: 100%
}
.desktop tr td {
padding-right: 5px;
width: 75;
vertical-align: top;
}
.mobile tr td:first-child {
padding: 0;
padding-right: 10px;
}
.mobile tr:nth-child(2n) {
background: rgb(244,244,244);
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.0);
}
#zeus {
padding-left: 10px;
}
.legend {
height: 52px;
width: 130px;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.type {
position: absolute;
top: 15px;
right: 15px;
}
.mobile {
display: none;
}
@media screen and (max-width: 1000px) {
.leaflet-popup-content-wrapper {
width: 250px;
}
.desktop {
display: none;
}
.mobile {
display: block;
width: 213px;
}
h3, .text {
max-width: 150px;
}
}
@media screen and (max-width: 800px) {
.info {
max-width: 90px;s
}
#schamper {
width: 90px;
}
#zeus {
width: 75px;
}
}
@media screen and (max-height: 400px) {
.leaflet-popup-content-wrapper {
max-height: 150px;
}
}

175
map.html
View file

@ -2,83 +2,132 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blokken in Gent</title>
<title>Bloklocaties in Gent</title>
<meta name="apple-itunes-app" content="app-id=602640924">
<meta name="google-play-app" content="app-id=be.ugent.zeus.hydra">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta property="og:site_name" content="Zeus WPI">
<meta property="og:type" content="article">
<meta property="og:title" content="Bloklocaties in Gent">
<meta property="og:description" content="Samenhokken om te blokken? Er zijn maar liefst 4000 zitjes in Gent om dat te doen. Schamper en Zeus maakten een overzicht!">
<meta property="og:url" content="http://zeus.ugent.be/blok/">
<meta property="og:image" content="http://zeus.ugent.be/blok/share.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://zeus.ugent.be/blok/">
<meta name="twitter:title" content="Bloklocaties in Gent">
<meta name="twitter:description" content="Samenhokken om te blokken? Er zijn maar liefst 4000 zitjes in Gent om dat te doen. Schamper en Zeus maakten een overzicht!">
<meta name="twitter:image" content="http://zeus.ugent.be/blok/share.jpg">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="map.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script type="text/javascript" src="map.js"></script>
</head>
<body>
<div id="map"></div>
<script id="popup-template" type="text/x-handlebars-template">
<div id="resto-popup">
<h3>{{name}}</h3>
<ul>
<li><b>Adres:</b> {{address}}</li>
<li><b>Capaciteit:</b> {{capacity}}</li>
<li><b>Periode:</b> Van {{period.start}} tot {{period.end}}</li>
</ul>
Openingsuren
<ul>
<li><b>Maandag:</b> {{hours.monday}}</li>
<li><b>Dinsdag:</b> {{hours.tuesday}}</li>
<li><b>Woensdag:</b> {{hours.wednesday}}</li>
<li><b>Donderdag:</b> {{hours.thursday}}</li>
<li><b>Vrijdag:</b> {{hours.friday}}</li>
<li><b>Zaterdag:</b> {{hours.saturday}}</li>
<li><b>Zondag:</b> {{hours.sunday}}</li>
</ul>
Extra: {{extra}}
<h3>{{name}} ({{capacity}} pl.)</h3>
<img src="{{type}}.png" class="type">
<div class="text">Locatie: {{address}}<br />
Van {{period.start}} tot {{period.end}}
</div>
<h4>Openingsuren</h4>
<table class="desktop">
<tr>
<td>Maandag</td>
<td>Dinsdag</td>
<td>Woensdag</td>
<td>Donderdag</td>
<td>Vrijdag</td>
<td>Zaterdag</td>
<td>Zondag</td>
</tr>
<tr>
<td>{{#if hours.monday}}{{{hours.monday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.tuesday}}{{{hours.tuesday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.wednesday}}{{{hours.wednesday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.thursday}}{{{hours.thursday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.friday}}{{{hours.friday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.saturday}}{{{hours.saturday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.sunday}}{{{hours.sunday}}}{{else}}Gesloten{{/if}}</td>
</tr>
</table>
<table class="mobile">
<tr>
<td>Maandag</td>
<td>{{#if hours.monday}}{{{hours.monday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Dinsdag</td>
<td>{{#if hours.tuesday}}{{{hours.tuesday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Woensdag</td>
<td>{{#if hours.wednesday}}{{{hours.wednesday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Donderdag</td>
<td>{{#if hours.thursday}}{{{hours.thursday}}}{{else}}Gesloten{{/if}}</td>
</tr><tr>
<td>Vrijdag</td>
<td>{{#if hours.friday}}{{{hours.friday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Zaterdag</td>
<td>{{#if hours.saturday}}{{{hours.saturday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Zondag</td>
<td>{{#if hours.sunday}}{{{hours.sunday}}}{{else}}Gesloten{{/if}}</td>
</tr>
</table>
{{#if extra}}{{{extra}}}{{/if}}
</div>
</script>
<script id="info-template" type="text/x-handlebars-template">
<a href="http://schamper.be/"><img id="schamper" src='schamper.png'></a>
<a href="http://zeus.ugent.be/"><img id="zeus" src='zeus.png'></a>
</script>
<script id="share-template" type="text/x-handlebars-template">
<div class="fb-share-button" data-href="http://zeus.ugent.be/blok/" data-layout="button_count"></div>
</script>
<script id="legend-template" type="text/x-handlebars-template">
<div style="padding-top: 5px;">
<div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
<div style="height: 10px; width: 10px; background: rgb(209,39,35); margin-top: -1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 5px;">Week en weekend</span>
</div>
<div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
<div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 30px;">Enkel week</span>
</div>
</div>
</script>
<script type="text/javascript">
var data = [{
'type': "Feature",
'geometry': {
'type': "Point",
'coordinates': [3.726759, 51.045660]
},
'properties': {
'name': "Studentenrestaurant De Brug",
'address': "Sint-Pietersnieuwstraat 45",
'capacity': 700,
'period': { 'start': "18/08/2014", 'end': "12/09/2014" },
'hours': {
'monday': "8u - 22u",
'tuesday': "8u - 22u",
'wednesday': "8u - 22u",
'thursday': "8u - 22u",
'friday': "8u - 22u",
'saturday': false,
'sunday': false
},
'extra': '2 aparte zaaltjes doorlopend beschikbaar (120 plaatsen).'
}
}];
var popuptemplate = Handlebars.compile($('#popup-template').html());
<!-- Facebook SDK -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=146947948791011&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Google Analytics SDK -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
function onEachFeature(feature, layer) {
if (feature.properties) {
layer.bindPopup(popuptemplate(feature.properties));
}
}
ga('create', 'UA-25444917-8', 'auto');
ga('send', 'pageview');
$(document).ready(function() {
var map = L.map('map').setView([51.0475378, 3.7261835], 13);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Made by <a href="http://zeus.ugent.be">Zeus</a> with ❤!'
}).addTo(map);
var geojson = L.geoJson(data, {
onEachFeature: onEachFeature
});
map.addLayer(geojson);
});
</script>
</body>
</html>

67
map.js Normal file
View file

@ -0,0 +1,67 @@
$(document).ready(function() {
var popuptemplate = Handlebars.compile($('#popup-template').html());
var RedIcon = L.Icon.Default.extend({
options: {
iconUrl: 'red-marker.png'
}
});
var redIcon = new RedIcon();
var BlueIcon = L.Icon.Default.extend({});
var blueIcon = new BlueIcon();
function onEachFeature(feature, layer) {
if (feature.properties) {
layer.bindPopup(popuptemplate(feature.properties));
}
}
function pointToLayer(feature, latlng) {
if (feature.properties) {
if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {
return L.marker(latlng, {icon:blueIcon});
}
}
return L.marker(latlng, {icon: redIcon});
}
var map = L.map('map').setView([51.0475378, 3.7261835], 13);
var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Mapbox</a> | Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a>'
}).addTo(map);
$.getJSON('data.json')
.done(function(data) {
var geojson = L.geoJson(data, {
onEachFeature: onEachFeature,
pointToLayer: pointToLayer
});
map.addLayer(geojson);
});
var SimpleControl = L.Control.extend({
initialize: function(templateId, divClass, options) {
this.template = Handlebars.compile($(templateId).html());
this.divClass = divClass;
L.Util.setOptions(this, options);
},
onAdd: function (map) {
this._div = L.DomUtil.create('div', this.divClass);
this._div.innerHTML = this.template();
return this._div;
}
});
var info = new SimpleControl('#info-template', 'info', {
position: 'topright'
}).addTo(map);
var sharePane = new SimpleControl('#share-template', 'info', {
position: 'bottomleft'
}).addTo(map);
var legend = new SimpleControl('#legend-template', 'legend', {
position: 'bottomright'
}).addTo(map);
});

BIN
red-marker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
schamper.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
share.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
zeus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB