summaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2018-03-09 22:58:08 +0100
committerhellekin <hellekin@cepheide.org>2018-03-09 22:58:49 +0100
commit02cd9f4217f0011ce7f95cd5d3d03dababb28625 (patch)
tree334b5b3d5932f242cd1f4dc34dc92eb8bec30ce8 /assets
parent44238a2723e413fa8036df87d5511318f20169a2 (diff)
downloadwallonie-demain-proto-02cd9f4217f0011ce7f95cd5d3d03dababb28625.tar.gz
Add collapsable attribution and logo (fixes #2)
Diffstat (limited to 'assets')
-rw-r--r--assets/css/style.css28
-rw-r--r--assets/mapper.js39
2 files changed, 64 insertions, 3 deletions
diff --git a/assets/css/style.css b/assets/css/style.css
index d5048d1..6248d54 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -37,7 +37,7 @@ body {
body > header > h1 {
background: var(--icon-menu-on) left top no-repeat;
- margin: -0.1rem 0 -0.1rem 5rem;
+ margin: -0.1rem 0 -0.1rem 2rem;
font-size: 2rem;
}
body > header > h1 span { line-height: 2rem; }
@@ -95,6 +95,10 @@ body > header {
background-color: #008080;
color: #000000;
}
+body > header > h1 a:link span:first-child {
+ background: url(/assets/svg/wallonie-demain-sq.svg) left 0.5rem/contain no-repeat;
+ padding-left: 3rem;
+}
body > aside {
background-color: #67736280;
color: #791515;
@@ -124,3 +128,25 @@ body > aside nav > ul > li#c-9 { background-color: #D3A9B5; }
.marker.popup .change.c-13 { border-color: #677362; }
.marker.popup .change.c-9 { border-color: #D3A9B5; }
+/**
+ * Attribution
+ **/
+
+#attribution {
+ width: 1.8rem;
+ height: 2.4rem;
+ background: #008080;
+ border-radius: 50%;
+}
+#attribution h1 {
+ margin: 0;
+ text-align:center;
+ line-height: 1.8;
+}
+#attribution.expanded {
+ background: #cdd9c8c0;
+ width: 20rem;
+ height: auto;
+ padding: 1rem;
+ border-radius: 0;
+}
diff --git a/assets/mapper.js b/assets/mapper.js
index cfdee54..a948202 100644
--- a/assets/mapper.js
+++ b/assets/mapper.js
@@ -115,8 +115,8 @@ const Categories = [
// Store known sections (refs #3)
const KnownSections = []
-// Our map
-const map = L.map('map')
+// Our map -- We customize attribution down below
+const map = L.map('map', {attributionControl: false})
const mcg = L.markerClusterGroup({
disableClusteringAtZoom: 18,
spiderfyOnMaxZoom: false,
@@ -462,6 +462,39 @@ L.control.watermark = function(opts) {
}
L.control.watermark({ position: 'bottomleft' }).addTo(map);
+/**
+ * Collapsable attribution
+ **/
+const attribution = L.control({ position: 'bottomright' })
+attribution.onAdd = function(map) {
+ var div = L.DomUtil.create('div')
+ div.id = 'attribution'
+ div.innerHTML = '<h1>©</h1>'
+ div.setAttribute('onmouseenter', 'expandAttribution()')
+ div.setAttribute('onmouseleave', 'collapseAttribution()')
+ return div
+}
+function expandAttribution() {
+ $('#attribution').addClass('expanded')
+ .html(renderAttribution())
+}
+function collapseAttribution() {
+ $('#attribution').removeClass('expanded')
+ .html('<h1>©</h1>')
+}
+
+function renderAttribution() {
+ var template = $('#attribution-template').html()
+ var attribution = {
+ leaflet_url: 'http://leafletjs.com/',
+ osm_url: 'https://osm.org/',
+ rt_url: 'http://www.reseautransition.be/',
+ incommon_url: 'https://incommon.cc/'
+ }
+ return Mustache.render(template, { data: attribution })
+}
+
+
/*
function show_markers(sec_id) {
// Create corresponding layer
@@ -559,6 +592,8 @@ $(document).ready(function() {
OpenStreetMap_HOT.addTo(map)
+ attribution.addTo(map)
+
mcg.addTo(map)
navSetup()