kopia lustrzana https://github.com/openstreetmap-polska/aed-mapa
ttomasz
GitHub
commit
f997c4bcb4
13
index.html
13
index.html
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar has-background-green p-1 has-shadow" role="navigation" aria-label="main navigation">
|
||||
<nav class="navbar has-background-green p-1" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="has-text-weight-light navbar-item has-text-white-ter is-size-4 is-size-5-mobile" href="#">
|
||||
Mapa <span class="has-text-weight-semibold pl-1 r-1">AED</span>
|
||||
|
|
@ -66,20 +66,17 @@
|
|||
<div class="sidebar is-invisible">
|
||||
<div id="poi-sidebar" class="card">
|
||||
<div id="sidebar-header">
|
||||
<button class="delete is-medium is-pulled-right close-button m-3" onclick="hideSidebar()" aria-label="Close button"></button>
|
||||
<div class="columns is-vcentered is-flex p-1">
|
||||
<div class="columns is-vcentered is-flex p-1 mr-0">
|
||||
<div class="column is-one-quarter is-one-fifth-mobile "><img class="image" src="./src/img/card-image.png" alt="Placeholder image" id="sidebar-card-image" ></div>
|
||||
<div class="column"><p class="title has-text-white-ter has-text-weight-light py-2" id="sidebar-caption"></p></div>
|
||||
</div>
|
||||
<button class="delete is-medium is-hidden-touch is-pulled-right close-button mr-2 mt-4" onclick="hideSidebar()" aria-label="Close button"></button>
|
||||
<button class="delete is-large is-hidden-desktop is-pulled-right close-button mr-2 mt-4" onclick="hideSidebar()" aria-label="Close button"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-1" />
|
||||
<div class="card-content py-1 has-text-right ">
|
||||
<span id="refresh-time" class="has-text-grey is-size-7 has-text-weight-light">Dane z OpenStreetMap - odświeżane co ok. godzinę</span>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a href="" class="has-background-success-light card-footer-item has-text-centered is-size-7 has-text-weight-semibold" target="_blank" rel="noopener" >Dodaj brakujące informacje</a>
|
||||
<a href="https://wiki.openstreetmap.org/wiki/Pl:Przewodnik_dla_pocz%C4%85tkuj%C4%85cych"
|
||||
|
|
|
|||
32
src/map.js
32
src/map.js
|
|
@ -1,20 +1,21 @@
|
|||
let aedSource = './aed_poland.geojson';
|
||||
let aedMetadata = './aed_poland_metadata.json';
|
||||
let aedNumber = document.getElementById('aed-number');
|
||||
let refreshTime = document.getElementById('refresh-time');
|
||||
|
||||
fetch(aedMetadata)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
aedNumber.innerHTML = data.number_of_elements;
|
||||
let refreshTimeValue = new Date(data.data_download_ts_utc);
|
||||
let refreshTimeValueLocale = new Date(data.data_download_ts_utc).toLocaleString('pl-PL');
|
||||
let currentDate = new Date();
|
||||
let dateDiff = Math.abs(currentDate - refreshTimeValue);
|
||||
let dateDiffMinutes = Math.round(dateDiff / 60000);
|
||||
refreshTime.innerHTML = `Ostatnia aktualizacja danych OSM: <span class="has-text-grey-dark" title="${refreshTimeValueLocale}">${dateDiffMinutes} minut temu</span>`;
|
||||
}
|
||||
);
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
aedNumber.innerHTML = data.number_of_elements;
|
||||
let refreshTimeValue = new Date(data.data_download_ts_utc);
|
||||
let refreshTimeValueLocale = new Date(data.data_download_ts_utc).toLocaleString('pl-PL');
|
||||
let currentDate = new Date();
|
||||
let dateDiff = Math.abs(currentDate - refreshTimeValue);
|
||||
let dateDiffMinutes = Math.round(dateDiff / 60000);
|
||||
let refreshTime = document.getElementById('refresh-time');
|
||||
refreshTime.innerHTML = `Synchronizacja z bazą OSM: <span class="has-text-grey-dark" title="${refreshTimeValueLocale}">${dateDiffMinutes} minut temu</span> | `;
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
var map = new maplibregl.Map({
|
||||
'container': 'map', // container id
|
||||
|
|
@ -36,7 +37,7 @@ var map = new maplibregl.Map({
|
|||
'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||
],
|
||||
'tileSize': 256,
|
||||
'attribution': 'dane © <a target="_top" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.',
|
||||
'attribution': `<span id="refresh-time"></span>dane © <a target="_top" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.`,
|
||||
},
|
||||
'aed-locations': {
|
||||
'type': 'geojson',
|
||||
|
|
@ -86,6 +87,7 @@ function defineAccessDescription(access) {
|
|||
'no': 'prywatny',
|
||||
'private': 'prywatny',
|
||||
'permissive': 'o ograniczonym dostępie',
|
||||
'permit': 'o ograniczonym dostępie',
|
||||
'default': ''
|
||||
};
|
||||
|
||||
|
|
@ -294,7 +296,6 @@ map.on('load', () => {
|
|||
console.log('Ready.');
|
||||
});
|
||||
});
|
||||
|
||||
// Bulma controls
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
|
|
@ -320,4 +321,5 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
71
src/nasz.css
71
src/nasz.css
|
|
@ -21,16 +21,21 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.delete
|
||||
{
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.sidebar {
|
||||
z-index: 1;
|
||||
margin: 0.5rem !important;
|
||||
width: 425px;
|
||||
width: 408px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 .5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
|
||||
max-height: 90vh;
|
||||
overflow: auto !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,8 +46,16 @@
|
|||
display: block !important;
|
||||
overflow-wrap: break-word;
|
||||
max-height: 90vh;
|
||||
z-index: 1002 !important;
|
||||
overflow: auto !important;
|
||||
z-index: 2 !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.navbar {
|
||||
height: 1vh;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,30 +64,52 @@
|
|||
}
|
||||
|
||||
#sidebar-card-image {
|
||||
padding-left: 15px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
max-height: 94px;
|
||||
margin-left: 10px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
max-height: 60px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 500px) {
|
||||
#sidebar-header {
|
||||
border: 4px solid hsl(0, 0%, 96%);
|
||||
border-radius: 7px;
|
||||
box-shadow: inset 0 0 1em #0000000c;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
#sidebar-header {
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar
|
||||
{
|
||||
box-shadow: inset 0 0 1em #0000000c;
|
||||
}
|
||||
|
||||
.has-background-green {
|
||||
background-color: #008954eb !important;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
border-left: 5px solid hsl(0, 0%, 96%);
|
||||
border-right: 5px solid hsl(0, 0%, 96%);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-bottom: 1px solid hsl(0, 0%, 96%);
|
||||
}
|
||||
|
||||
.navbar-menu.is-active
|
||||
{
|
||||
background-color: #008954eb !important;
|
||||
}
|
||||
.mapboxgl-ctrl-attrib-inner {
|
||||
font-size: 0.6rem !important;
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
.mapboxgl-ctrl.mapboxgl-ctrl-attrib
|
||||
{
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.menu-item
|
||||
{
|
||||
padding-right: 7px !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"data_format": 1,
|
||||
"data_url": "https://github.com/openstreetmap-polska/aed-mapa/raw/main/taginfo.json",
|
||||
"project": {
|
||||
"name": "Mapa AED",
|
||||
"description": "Map of defibrillators in Poland [polish language only]",
|
||||
"project_url": "https://aed.openstreetmap.org.pl",
|
||||
"doc_url": "https://github.com/openstreetmap-polska/aed-mapa",
|
||||
"icon_url": "https://github.com/openstreetmap-polska/aed-mapa/raw/main/src/favicon/favicon-16x16.png",
|
||||
"contact_name": "Włodzimierz Bartczak",
|
||||
"contact_email": "zarzad@openstreetmap.pl"
|
||||
},
|
||||
"tags": [
|
||||
{
|
||||
"key": "emergency", "value": "defibrillator", "object_types": ["node"],
|
||||
"icon_url": "https://github.com/openstreetmap-polska/aed-mapa/raw/main/src/img/marker-image_50.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
Ładowanie…
Reference in New Issue