diff options
| -rw-r--r-- | hackmap/hackmap.css | 18 | ||||
| -rw-r--r-- | hackmap/index.html | 87 |
2 files changed, 105 insertions, 0 deletions
diff --git a/hackmap/hackmap.css b/hackmap/hackmap.css new file mode 100644 index 0000000..bad62d8 --- /dev/null +++ b/hackmap/hackmap.css @@ -0,0 +1,18 @@ + + +html, body { + margin: 0; +} + + +#demo { + display: block; + width: 100%; + height: 50vh; +} + +iframe { + width:100%; + height:100%; + border: none; +} diff --git a/hackmap/index.html b/hackmap/index.html new file mode 100644 index 0000000..c12e011 --- /dev/null +++ b/hackmap/index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> + <head> + <meta charset="utf-8"> + <title></title> + <link rel="stylesheet" href="index.css"> + <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" + integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" + crossorigin=""/> + <!-- Make sure you put this AFTER Leaflet's CSS --> + <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" + crossorigin=""></script> + </head> + <body> + <div id="map" style="width:100vw; height:50vh"> + + </div> + <div id="demo" style=""> + + </div> + </body> + <script type="text/javascript"> + +L.MyMap = L.Map.extend({ +openPopup: function (popup, latlng, options) { +document.getElementById("demo").innerHTML = popup.getContent(); +console.log("meeeh"); +return this; +} +}); + +L.myMap = function (m) { +return new L.MyMap(m); +}; +var map = L.myMap('map').setView([50.87287, 4.377], 17); + +/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { +attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' +}).addTo(map);*/ + +var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', { +attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', +subdomains: 'abcd', +minZoom: 0, +maxZoom: 20, +ext: 'png' +}).addTo(map) ; + +var circle = L.circle([50.87286710651607, 4.377062022686005], { +color: 'orangered', +fillColor: 'orangered', +fillOpacity: 1 , +radius: 2 +}).addTo(map); +circle.bindPopup('<iframe src="hacklab.brussels"></iframe>'); + +circle = L.circle([50.884365143500744, 4.3793392181396475], { +color: 'orangered', +fillColor: 'orangered', +fillOpacity: 1 , +radius: 2 +}).addTo(map); +circle.bindPopup('<iframe src="http://www.ooooo.be/techotsukumogami/"></iframe>'); + +circle = L.circle([50.8286729,4.3385374], { +color: 'orangered', +fillColor: 'orangered', +fillOpacity: 1 , +radius: 2 +}).addTo(map); +circle.bindPopup('<iframe src="https://www.lesteki.be/"></iframe>'); + +circle = L.circle([50.8324117,4.3216929], { +color: 'orangered', +fillColor: 'orangered', +fillOpacity: 1 , +radius: 2 +}).addTo(map); +circle.bindPopup('<iframe src="https://hsbxl.be/"></iframe>'); + + + /*L.marker([50.87287, 4.377], { color:"blue" }).addTo(map) + .bindPopup('<a href="https://hacklab.brussels/" target="_self" >hacklab.brussels</a>');*/ + + </script> + +</html> |