diff options
| -rw-r--r-- | assets/css/style.css | 28 | ||||
| -rw-r--r-- | assets/mapper.js | 39 | ||||
| -rw-r--r-- | index.html | 22 |
3 files changed, 86 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() @@ -56,5 +56,27 @@ </footer> </article> </script> + <script id="attribution-template" type="x-tmpl-mustache"> + <article class="marker popup"> + <h2>Crédits</h2> + <p>Cette carte est rendue possible grâce au soutien de la Région Wallone.</p> + <h3>Logiciel</h3> + <p>Réalisé par <a + href="{{ data.incommon_url }}">Incommon</a>, utilisant <a + href="{{ data.leaflet_url }}">Leaflet</a>, sous licence AGPL. + (<a href="https://code.cepheide.org/wallonie-demain-proto.git">source</a>) + </p> + <h3>Données</h3> + <p><a href="{{ data.dewey_url }}">Dewey ASBL</a> et + le <a href="{{ data.rt_url }}">Réseau Transition</a></p> + <p>© 2014-2018 Dewey Maps, Réseau Transition</p> + <p>Toutes les données sur cette carte sont libres et + disponibles selon les termes de la licence ODBL.</p> + <h3>Cartes</h3> + <p>© <a href="{{ data.osm_url }}">OpenStreetMap</a> contributors</p> + <h3>Création graphique</h3> + <p><a href="https://ps.lesoiseaux.io/" class="icon ps">Petites Singularités</a></p> + </article> + </script> </body> </html> |