midgard/blokmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Share button

Browse source
This commit is contained in:
feliciaan 2014-12-11 18:26:15 +01:00
parent 9cfcf6125f
commit a519c2f21e
2 changed files with 75 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
map.html
View file

@ -13,7 +13,8 @@
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBAuXgl_O24GqLMl-ylUPLEH7O0wbK3J4A&v=3.2&sensor=false"></script> <script src="http://maps.google.com/maps/api/js?key=AIzaSyBAuXgl_O24GqLMl-ylUPLEH7O0wbK3J4A&v=3.2&sensor=false"></script>
<script src="leaflet-google.js"></script> <script src="leaflet-google.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.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> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
@ -80,58 +81,20 @@
<script id="info-template" type="text/x-handlebars-template"> <script id="info-template" type="text/x-handlebars-template">
<a href="http://zeus.ugent.be/"><img src='logo.png'></a> <a href="http://zeus.ugent.be/"><img src='logo.png'></a>
</script> </script>
<script type="text/javascript"> <script id="share-template" type="text/x-handlebars-template">
var popuptemplate = Handlebars.compile($('#popup-template').html()); <div class="fb-share-button" data-href="http://zeus.ugent.be/blok/" data-layout="button_count"></div>
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});
}
$(document).ready(function() {
var map = L.map('map').setView([51.0475378, 3.7261835], 13);
var googleLayer = new L.Google('TERRAIN');
map.addLayer(googleLayer);
$.getJSON('data.json')
.done(function(data) {
var geojson = L.geoJson(data, {
onEachFeature: onEachFeature,
pointToLayer: pointToLayer
});
map.addLayer(geojson);
});
var info = L.control();
info.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info');
div.innerHTML = Handlebars.compile($('#info-template').html())();
return div;
};
info.addTo(map);
});
</script> </script>
<!-- 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> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

60
map.js Normal file
View file

@ -0,0 +1,60 @@
$(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 googleLayer = new L.Google('TERRAIN');
map.addLayer(googleLayer);
$.getJSON('data.json')
.done(function(data) {
var geojson = L.geoJson(data, {
onEachFeature: onEachFeature,
pointToLayer: pointToLayer
});
map.addLayer(geojson);
});
var info = L.control();
info.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info');
div.innerHTML = Handlebars.compile($('#info-template').html())();
return div;
};
info.addTo(map);
var sharePane = L.control().setPosition("bottomleft");
sharePane.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info');
div.innerHTML = Handlebars.compile($('#share-template').html())();
return div;
};
sharePane.addTo(map);
});