nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Marker clusters (draft)

Browse Source
This commit is contained in:
Nicolò P. 2024-11-29 11:41:05 +01:00
parent 381c3bfe69
commit e865ada571
9 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -6,6 +6,7 @@
*.log *.log
*.zip *.zip
*.pdf *.pdf
*.tif
vendor/ vendor/
progetto_QGIS/ progetto_QGIS/
conf.json conf.json

3
webgis/index.html
View File

@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" /> <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="../css/app.css" /> <link rel="stylesheet" href="../css/app.css" />
<link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" /> <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
<link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" /> <link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
@ -17,6 +19,7 @@
} }
</script> </script>
<script src="js/vendor/leaflet/dist/leaflet.js"></script> <script src="js/vendor/leaflet/dist/leaflet.js"></script>
<script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script> <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
<script src="js/index.js" type="module"></script> <script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title> <title>WebGIS Isola di Capri</title>

2
webgis/js/components/Finding.js
View File

@ -96,7 +96,7 @@ export class Finding {
this.biblioElements.push(` this.biblioElements.push(`
<div class="p-2 mt-2" id="ref-${biblio.id}"> <div class="p-2 mt-2" id="ref-${biblio.id}">
<p>${biblio.reference}</p> <p class="p-3">${biblio.reference}</p>
</div> </div>
`); `);
}); });

2
webgis/js/components/NotConservedSheet.js
View File

@ -66,7 +66,7 @@ export class NotConservedSheet {
this.biblioElements.push(` this.biblioElements.push(`
<div class="p-2 mt-2" id="ref-${record.id}"> <div class="p-2 mt-2" id="ref-${record.id}">
<p>${record.reference}</p> <p class="p-3">${record.reference}</p>
</div> </div>
` `
); );

2
webgis/js/components/SiteSheet.js
View File

@ -106,7 +106,7 @@ export class SiteSheet {
this.biblioElements.push(` this.biblioElements.push(`
<div class="p-2 mt-2" id="ref-${record.id}"> <div class="p-2 mt-2" id="ref-${record.id}">
<p>${record.reference}</p> <p class="p-3">${record.reference}</p>
</div> </div>
` `
); );

3
webgis/js/controllers/marker_controller.js
View File

@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller { export default class extends Controller {
static targets = ['coords']; static targets = ['coords'];
END_ZOOM = 20;
mapAnimate = { mapAnimate = {
animate: true, animate: true,
duration: 1, duration: 1,
@ -14,7 +15,7 @@ export default class extends Controller {
map.setView( map.setView(
coords, coords,
19, this.END_ZOOM,
this.mapAnimate this.mapAnimate
); );

24
webgis/js/gis.js
View File

@ -160,10 +160,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
/** /**
* Create markers for sites * Create markers for sites
* @param {L.LayerGroup} sitesGroup * @param {L.LayerGroup} sitesGroup
* @returns {L.LayerGroup} * @returns {L.markerClusterGroup}
*/ */
GIS.sitesMarkers = async function (sitesGroup) { GIS.sitesMarkers = async function (sitesGroup) {
let sitesMarkers = []; let sitesMarkers = L.markerClusterGroup();
for (let id in MARKER_NAMES.sites) { for (let id in MARKER_NAMES.sites) {
let layer = sitesGroup.customGetLayer(id); let layer = sitesGroup.customGetLayer(id);
@ -191,23 +191,23 @@ GIS.sitesMarkers = async function (sitesGroup) {
marker.on('click', () => UI.openSiteModal(data, '#site-data')); marker.on('click', () => UI.openSiteModal(data, '#site-data'));
sitesMarkers.push(marker); sitesMarkers.addLayer(marker);
} }
return L.layerGroup(sitesMarkers); return sitesMarkers;
} }
/** /**
* Create not conserved group * Create not conserved group
* @returns {L.LayerGroup} * @returns {L.MarkerClusterGroup}
*/ */
GIS.notConserved = async function () { GIS.notConserved = async function () {
let notConserData = await fetch(`${API_URL}/not_conserved`) let notConserData = await fetch(`${API_URL}/not_conserved`)
.then(data => data.json()); .then(data => data.json());
let notConserved = []; let notConserved = L.markerClusterGroup();
for (let record of notConserData.records) { for (let record of notConserData.records) {
notConserved.push(L.marker( notConserved.addLayer(L.marker(
record.coordinates, record.coordinates,
{icon: Icons.notConserved} {icon: Icons.notConserved}
).bindTooltip(record.denomination) ).bindTooltip(record.denomination)
@ -218,20 +218,20 @@ GIS.notConserved = async function () {
); );
} }
return L.layerGroup(notConserved); return notConserved;
} }
/** /**
* Create findings group * Create findings group
* @returns {L.LayerGroup} * @returns {L.MarkerClusterGroup}
*/ */
GIS.findings = async function () { GIS.findings = async function () {
let findingsData = await fetch(`${API_URL}/finding`) let findingsData = await fetch(`${API_URL}/finding`)
.then(data => data.json()); .then(data => data.json());
let findings = []; let findings = L.markerClusterGroup();
for (let record of findingsData) { for (let record of findingsData) {
findings.push(L.marker( findings.addLayer(L.marker(
record.coordinates, record.coordinates,
{icon: Icons.finding} {icon: Icons.finding}
).bindTooltip(record.object) ).bindTooltip(record.object)
@ -242,7 +242,7 @@ GIS.findings = async function () {
); );
} }
return L.layerGroup(findings); return findings;
} }
/* /*
GIS._prepareLayers = async function(layer) { GIS._prepareLayers = async function(layer) {

1
webgis/js/package.json
View File

@ -11,6 +11,7 @@
"bulma": "^1.0.1", "bulma": "^1.0.1",
"fontawesome-free": "^1.0.4", "fontawesome-free": "^1.0.4",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"spotlight.js": "^0.7.8" "spotlight.js": "^0.7.8"
}, },
"devDependencies": {} "devDependencies": {}

5
webgis/js/yarn.lock
View File

@ -29,6 +29,11 @@ fontawesome-free@^1.0.4:
resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b" resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw== integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw==
leaflet.markercluster@^1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
leaflet@^1.9.4: leaflet@^1.9.4:
version "1.9.4" version "1.9.4"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"