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