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

Add fruit tree theme prototype; cleanup and split of the mobile layout (fix #120), allow overzoom on baselayers (fix #97)

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-24 00:33:23 +02:00
parent d7083131a1
commit ca5b4297b3
6 changed files with 265 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Logic/Leaflet/Basemap.ts
View file

@ -24,7 +24,7 @@ export class BaseLayers {
{
// omwrgbmrvl
attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
maxZoom: 20,
maxZoom: 22,
minZoom: 1,
wmts: true
})

169
assets/themes/fruit_trees/fruit_trees.json Normal file
View file

@ -0,0 +1,169 @@
{
"id": "boomgaarden",
"title": {
"nl": "Open Boomgaardenkaart"
},
"shortDescription": {
"nl": "Boomgaarden en fruitbomen"
},
"description": {
"nl": "Op deze kaart vindt je boomgaarden en fruitbomen"
},
"language": [
"nl"
],
"maintainer": "",
"icon": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Low_Hanging_Fruit_-_The_Noun_Project.svg",
"version": "0",
"startLat": 0,
"startLon": 0,
"startZoom": 1,
"widenFactor": 0.001,
"socialImage": "",
"layers": [
{
"id": "orchards",
"name": {
"nl": "Boomgaarden"
},
"minzoom": 12,
"overpassTags": {
"and": [
"landuse=orchard"
]
},
"title": {
"render": {
"nl": "Boomgaard"
}
},
"description": {},
"tagRenderings": [],
"hideUnderlayingFeaturesMinPercentage": 0,
"icon": {
"render": "./assets/themes/buurtnatuur/forest.svg"
},
"width": {
"render": "8"
},
"iconSize": {
"render": "40,40,center"
},
"color": {
"render": "#00f"
},
"presets": [
{
"tags": [
"landuse=orchard",
"fixme=Added with mapcomplete - geometry still to draw"
],
"title": {
"nl": "Boomgaard"
},
"description": {
"nl": "Voeg een boomgaard toe (als punt - omtrek nog te tekenen)"
}
}
]
},
{
"id": "fruitboom",
"name": {
"nl": "Boom"
},
"minzoom": 12,
"overpassTags": {
"and": [
"natural=tree"
]
},
"title": {
"render": {
"nl": "Boom"
}
},
"description": {
"nl": "Een boom"
},
"tagRenderings": [
{
"render": {
"nl": "De soort is {species:nl}"
},
"question": {
"nl": "Wat is de soort van deze boom (in het Nederlands)?"
},
"freeform": {
"key": "species:nl"
}
},
{
"render": {
"nl": "Het ras (taxon) van deze boom is <b>{taxon}</b>"
},
"question": {
"nl": "Wat is het taxon (ras) van deze boom?"
},
"freeform": {
"key": "taxon"
},
"condition": {
"and": [
"species:nl~*"
]
}
},
{
"render": {
"nl": "Beschrijving: <i>{description}</i>"
},
"question": {
"nl": "Welke beschrijving past bij deze boom?"
},
"freeform": {
"key": "description"
}
},
{
"render": {
"nl": "Referentienummer: <b>{ref}</b>"
},
"question": {
"nl": "Is er een refernetienummer?"
},
"freeform": {
"key": "ref"
}
}
],
"hideUnderlayingFeaturesMinPercentage": 0,
"icon": {
"render": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Low_Hanging_Fruit_-_The_Noun_Project.svg"
},
"width": {
"render": "8"
},
"iconSize": {
"render": "40,40,center"
},
"color": {
"render": "#00f"
},
"presets": [
{
"tags": [
"natural=tree"
],
"title": {
"nl": "Boom"
},
"description": {
"nl": "Voeg hier een boom toe"
}
}
]
}
],
"roamingRenderings": []
}

93
css/mobile.css
View file

@ -0,0 +1,93 @@
/*
Contains tweaks for small screens
*/
.only-on-mobile {
display: none;
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
.only-on-mobile {
display: unset;
}
.hidden-on-mobile {
display: none !important;
}
#messagesbox {
display: none;
}
#help-button-mobile{
display: unset;
pointer-events: all;
}
#help-button-mobile div {
box-shadow: 0 0 10px #0006;
margin-bottom: 10px;
}
#geolocate-button {
display: block;
}
.leaflet-popup {
/* Popups are hidden on mobile */
display: none;
}
#centermessage {
top: 30%;
left: 15%;
width: 60%;
}
.add-popup-all-buttons {
/* Buttons in the 'add new point' have a default of 50vh maxheight which is ugly in the new context*/
max-height: unset !important;
}
#messagesboxmobile {
display: block;
position: absolute;
z-index: 10000;
background-color: white;
width: 100vw;
}
#welcomeMessage {
display: inline-block;
background-color: white;
border-radius: 0;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
max-height: max-content;
box-shadow: unset;
overflow-y: unset;
}
}
@media only screen and (max-width: 600px) {
/* Portrait */
#userbadge-and-search {
display: inline-block;
width: auto;
max-width: 100vw;
}
#topleft-tools {
padding: 0.2em !important;
padding-top: 0.3em !important;
}
#userbadge {
margin-bottom: 0.3em;
}
}

164
index.css
View file

@ -24,7 +24,6 @@ body {
cursor: pointer;
width: 43px;
height: 43px;
display: none; /*Hidden by default, only visible on mobile*/
}
#geolocate-button img {
@ -188,12 +187,6 @@ body {
padding-bottom: 0.2em;
}
#hidden-on-mobile {
display: none; /*Only shown on small screens - this is probably named wrongly*/
}
.add-popup-all-buttons {
max-height: 50vh;
display: inline-block;
@ -201,61 +194,6 @@ body {
width: 100%;
}
@media only screen and (max-height: 600px) and (not (max-width:700px)) {
/* Landscape and portrait */
#topleft-tools {
padding: 0.1em 0.1em 0.1em unset;
}
.hidden-on-mobile {
display: none !important;
}
#userbadge-and-search {
position: relative;
display: inline-block;
width: auto;
max-width: 50vw;
margin: 0;
}
#userbadge {
position: fixed;
right: 0.3em;
width: min-content;
max-width: 50vw;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 600px) {
/* Portrait */
#userbadge-and-search {
display: inline-block;
width: auto;
max-width: 100vw;
}
.hidden-on-mobile {
display: none !important;
}
#topleft-tools {
padding: 0.2em !important;
padding-top: 0.3em !important;
}
#userbadge {
margin-bottom: 0.3em;
}
}
/**************************************/
@ -365,108 +303,6 @@ body {
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
#hidden-on-mobile {
display: block;
}
.hidden-on-mobile {
display: none !important;
}
#messagesbox-wrapper {
display: none;
}
#messagesbox {
display: none;
}
#help-button-mobile{
display: unset;
pointer-events: all;
}
#help-button-mobile div {
box-shadow: 0 0 10px #0006;
margin-bottom: 10px;
}
#geolocate-button {
display: block;
}
.leaflet-popup {
/* Popups are hidden on mobile */
display: none;
}
#centermessage {
top: 30%;
left: 15%;
width: 60%;
}
.add-popup-all-buttons {
max-height: calc(100vh - 12em);
height: min-content;
display: inline-block;
overflow-y: auto;
width: 100%;
}
#messagesboxmobile {
display: block;
position: absolute;
z-index: 10000;
background-color: white;
}
#welcomeMessage {
display: inline-block;
background-color: white;
border-radius: 0;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
max-height: max-content;
box-shadow: unset;
overflow-y: unset;
}
}
@media only screen and (max-height: 400px) {
/* Landscape: small 'to the map' */
#hidden-on-mobile {
display: unset;
}
.hidden-on-mobile {
display: none !important;
}
#messagesboxmobile {
position: absolute;
display: block;
z-index: 10000;
padding-bottom: 5em;
}
#welcomeMessage {
box-shadow: unset;
max-height: 100vh;
}
}
.imgWithAttr {
max-height: 20em;

3
index.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="./css/userbadge.css"/>
<link rel="stylesheet" href="./css/tabbedComponent.css"/>
<link rel="stylesheet" href="./css/slideshow.css"/>
<link rel="stylesheet" href="./css/mobile.css"/>
<link rel="manifest" href="./manifest.manifest">
<link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">
@ -34,7 +35,7 @@
<!-- DECORATION 0 END -->
</div>
<div id="hidden-on-mobile">
<div class="only-on-mobile">
<div id="messagesboxmobile">
</div>
</div>

1
index.ts
View file

@ -18,7 +18,6 @@ if (location.href.startsWith("http://buurtnatuur.be")) {
window.location.replace("https://buurtnatuur.be");
}
let defaultLayout = "bookcases"
if (location.href.indexOf("buurtnatuur.be") >= 0) {
// Reload the https version. This is important for the 'locate me' button
defaultLayout = "buurtnatuur"