Initial commit
This commit is contained in:
commit
e6a1d8083b
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*.rar
|
||||||
|
*.shp*
|
||||||
|
*.log
|
||||||
|
vendor/
|
||||||
|
docs/
|
||||||
129
css/app.css
Normal file
129
css/app.css
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
@import url("./spectre.css");
|
||||||
|
@import url("../fonts/fonts.css");
|
||||||
|
/* Variables */
|
||||||
|
:root {
|
||||||
|
--ispc-red: #ce1417;
|
||||||
|
--ispc-blue: #1b3152;
|
||||||
|
--links-color: #263aac;
|
||||||
|
--ispc-blue-tr: rgba(27,49,80,0.5);
|
||||||
|
--din-regular: 'din_next_w1gregular';
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--din-regular);
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--links-color);
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: var(--links-color);
|
||||||
|
}
|
||||||
|
.main.credits {
|
||||||
|
width: 60vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: 75vh;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.leaflet-container {
|
||||||
|
background: #fff;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.leaflet-control a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: initial;
|
||||||
|
}
|
||||||
|
.wait,
|
||||||
|
.wait-lg {
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
.wait {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
.wait-lg {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
padding-top: 25vh;
|
||||||
|
}
|
||||||
|
/* Popup */
|
||||||
|
.welcome .leaflet-popup-content {
|
||||||
|
min-height: 350px;
|
||||||
|
min-width: 700px;
|
||||||
|
padding: 2rem;
|
||||||
|
margin-right: 42px;
|
||||||
|
}
|
||||||
|
.welcome p {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.ped-popup .leaflet-popup-content {
|
||||||
|
font-size: large;
|
||||||
|
min-height: 700px;
|
||||||
|
min-width: 700px;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
margin-right: 42px;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--ispc-blue) transparent;
|
||||||
|
}
|
||||||
|
.ped-popup.country .leaflet-popup-content {
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
.leaflet-popup-content::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.leaflet-popup-content::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--ispc-blue);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.leaflet-popup-content img {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.leaflet-popup-close-button {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.leaflet-popup-close-button > span {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.leaflet-popup-tip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.text-lead a,
|
||||||
|
.tit_prog {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.maximize path {
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
stroke: black;
|
||||||
|
}
|
||||||
|
#fullscreen {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
/* Leaflef map container */
|
||||||
|
@media (max-width: 840px) {
|
||||||
|
.map-sm {
|
||||||
|
height: 650px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 840px) and (max-width: 960px) {
|
||||||
|
.map-sm {
|
||||||
|
height: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 960px) and (max-width: 1280px) {
|
||||||
|
.map-lg {
|
||||||
|
height: 750px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.map-lg {
|
||||||
|
height: 820px;
|
||||||
|
}
|
||||||
|
}
|
||||||
3760
css/spectre.css
Normal file
3760
css/spectre.css
Normal file
File diff suppressed because it is too large
Load Diff
0
geojson/.gitignore
vendored
Normal file
0
geojson/.gitignore
vendored
Normal file
49
index.html
Normal file
49
index.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="it" data-text="html">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
|
||||||
|
<script src="js/vendor/leaflet/dist/leaflet.js"></script>
|
||||||
|
<link rel="stylesheet" href="css/app.css" />
|
||||||
|
<script src="js/index.js" type="module"></script>
|
||||||
|
<title>Carta Archeologica di Capri</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar mt-2 p-2">
|
||||||
|
<section class="navbar-section">
|
||||||
|
<span class="navbar-brand">
|
||||||
|
<img loading="eager" alt="Logo" class="img-fit-contain" src="./img/logo.svg" height="62"/>
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
<section class="navbar-section">
|
||||||
|
<span class="navbar-center text-center text-large">
|
||||||
|
Capri - Carta archeologica
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
<section class="navbar-section">
|
||||||
|
<a href="about.html" class="btn btn-link" title="About">ABOUT</a>
|
||||||
|
<a href="progetto.html" class="btn btn-link" title="Progetto">PROGETTO</a>
|
||||||
|
</section>
|
||||||
|
</header>
|
||||||
|
<div class="wait-lg text-center d-hide" style="clear: both;">
|
||||||
|
<p>Loading...</p>
|
||||||
|
<div class="loading loading-lg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container main">
|
||||||
|
<div id="map" class="map-lg map-sm"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="container text-center p-2 mt-2 navbar">
|
||||||
|
<section class="navbar-section mt-2">
|
||||||
|
<a class="navbar-brand" title="Vai alla home page di ISPC CNR" href="https://www.ispc.cnr.it" data-text="linkispc">
|
||||||
|
<img loading="eager" alt="Logo ISPC CNR" class="img-fit-contain" src="./img/logo_ispc.svg" height="72"/>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<section class="navbar-center">
|
||||||
|
<p class="mt-2 pt-2">
|
||||||
|
<a href="credits.html" data-text="credits">Crediti</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
53
js/caprigis.js
Normal file
53
js/caprigis.js
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
'use strict';
|
||||||
|
// Global leaflet
|
||||||
|
/**
|
||||||
|
* @namespace GIS
|
||||||
|
*/
|
||||||
|
const GIS = {};
|
||||||
|
|
||||||
|
const BASE_URL = location.href;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} mapId
|
||||||
|
* @param {number} zoomLevel
|
||||||
|
* @returns {Map}
|
||||||
|
*/
|
||||||
|
GIS.initMap = function (mapId, zoomLevel = 15) {
|
||||||
|
let map = L.map(mapId, {
|
||||||
|
attributionControl: false,
|
||||||
|
minZoom: 3
|
||||||
|
}).setView([40.5492, 14.2317], zoomLevel);
|
||||||
|
|
||||||
|
// Il sistema di riferimento per i livelli geoJSON è EPSG3857
|
||||||
|
map.crs = L.CRS.EPSG3857;
|
||||||
|
|
||||||
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {string} geoJSON
|
||||||
|
* @param {Map} map
|
||||||
|
*/
|
||||||
|
GIS.loadLayer = async function (geoJSON, map, color = '#555') {
|
||||||
|
const layer = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
|
||||||
|
.then(res => res.json())
|
||||||
|
.catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
|
||||||
|
|
||||||
|
L.geoJson(layer, {
|
||||||
|
style: function (feature) {
|
||||||
|
let style = {
|
||||||
|
color: color,
|
||||||
|
opacity: 0.4,
|
||||||
|
weight: 2,
|
||||||
|
fillColor: color,
|
||||||
|
fillOpacity: 1
|
||||||
|
};
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
}).addTo(map);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GIS;
|
||||||
9
js/index.js
Normal file
9
js/index.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import GIS from './caprigis.js';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
let map = GIS.initMap('map');
|
||||||
|
|
||||||
|
// Layer vincoli
|
||||||
|
GIS.loadLayer('vincoli.geojson', map);
|
||||||
|
|
||||||
|
});
|
||||||
10
js/package.json
Normal file
10
js/package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "caprigis",
|
||||||
|
"version": "0.01",
|
||||||
|
"main": "index.js",
|
||||||
|
"author": "Nicolò P.",
|
||||||
|
"license": "GPLv3",
|
||||||
|
"dependencies": {
|
||||||
|
"leaflet": "^1.9.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
js/yarn.lock
Normal file
8
js/yarn.lock
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||||
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
||||||
|
leaflet@^1.9.4:
|
||||||
|
version "1.9.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
|
||||||
|
integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
|
||||||
Loading…
Reference in New Issue
Block a user