Marker clusters (draft)
This commit is contained in:
parent
381c3bfe69
commit
e865ada571
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,6 +6,7 @@
|
||||
*.log
|
||||
*.zip
|
||||
*.pdf
|
||||
*.tif
|
||||
vendor/
|
||||
progetto_QGIS/
|
||||
conf.json
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
|
||||
<link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
|
||||
@ -17,6 +19,7 @@
|
||||
}
|
||||
</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/index.js" type="module"></script>
|
||||
<title>WebGIS Isola di Capri</title>
|
||||
|
||||
@ -96,7 +96,7 @@ export class Finding {
|
||||
|
||||
this.biblioElements.push(`
|
||||
<div class="p-2 mt-2" id="ref-${biblio.id}">
|
||||
<p>${biblio.reference}</p>
|
||||
<p class="p-3">${biblio.reference}</p>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
@ -66,7 +66,7 @@ export class NotConservedSheet {
|
||||
|
||||
this.biblioElements.push(`
|
||||
<div class="p-2 mt-2" id="ref-${record.id}">
|
||||
<p>${record.reference}</p>
|
||||
<p class="p-3">${record.reference}</p>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
@ -106,7 +106,7 @@ export class SiteSheet {
|
||||
|
||||
this.biblioElements.push(`
|
||||
<div class="p-2 mt-2" id="ref-${record.id}">
|
||||
<p>${record.reference}</p>
|
||||
<p class="p-3">${record.reference}</p>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = ['coords'];
|
||||
END_ZOOM = 20;
|
||||
mapAnimate = {
|
||||
animate: true,
|
||||
duration: 1,
|
||||
@ -14,7 +15,7 @@ export default class extends Controller {
|
||||
|
||||
map.setView(
|
||||
coords,
|
||||
19,
|
||||
this.END_ZOOM,
|
||||
this.mapAnimate
|
||||
);
|
||||
|
||||
|
||||
@ -160,10 +160,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
/**
|
||||
* Create markers for sites
|
||||
* @param {L.LayerGroup} sitesGroup
|
||||
* @returns {L.LayerGroup}
|
||||
* @returns {L.markerClusterGroup}
|
||||
*/
|
||||
GIS.sitesMarkers = async function (sitesGroup) {
|
||||
let sitesMarkers = [];
|
||||
let sitesMarkers = L.markerClusterGroup();
|
||||
|
||||
for (let id in MARKER_NAMES.sites) {
|
||||
let layer = sitesGroup.customGetLayer(id);
|
||||
@ -191,23 +191,23 @@ GIS.sitesMarkers = async function (sitesGroup) {
|
||||
|
||||
marker.on('click', () => UI.openSiteModal(data, '#site-data'));
|
||||
|
||||
sitesMarkers.push(marker);
|
||||
sitesMarkers.addLayer(marker);
|
||||
}
|
||||
|
||||
return L.layerGroup(sitesMarkers);
|
||||
return sitesMarkers;
|
||||
}
|
||||
/**
|
||||
* Create not conserved group
|
||||
* @returns {L.LayerGroup}
|
||||
* @returns {L.MarkerClusterGroup}
|
||||
*/
|
||||
GIS.notConserved = async function () {
|
||||
let notConserData = await fetch(`${API_URL}/not_conserved`)
|
||||
.then(data => data.json());
|
||||
|
||||
let notConserved = [];
|
||||
let notConserved = L.markerClusterGroup();
|
||||
|
||||
for (let record of notConserData.records) {
|
||||
notConserved.push(L.marker(
|
||||
notConserved.addLayer(L.marker(
|
||||
record.coordinates,
|
||||
{icon: Icons.notConserved}
|
||||
).bindTooltip(record.denomination)
|
||||
@ -218,20 +218,20 @@ GIS.notConserved = async function () {
|
||||
);
|
||||
}
|
||||
|
||||
return L.layerGroup(notConserved);
|
||||
return notConserved;
|
||||
}
|
||||
/**
|
||||
* Create findings group
|
||||
* @returns {L.LayerGroup}
|
||||
* @returns {L.MarkerClusterGroup}
|
||||
*/
|
||||
GIS.findings = async function () {
|
||||
let findingsData = await fetch(`${API_URL}/finding`)
|
||||
.then(data => data.json());
|
||||
|
||||
let findings = [];
|
||||
let findings = L.markerClusterGroup();
|
||||
|
||||
for (let record of findingsData) {
|
||||
findings.push(L.marker(
|
||||
findings.addLayer(L.marker(
|
||||
record.coordinates,
|
||||
{icon: Icons.finding}
|
||||
).bindTooltip(record.object)
|
||||
@ -242,7 +242,7 @@ GIS.findings = async function () {
|
||||
);
|
||||
}
|
||||
|
||||
return L.layerGroup(findings);
|
||||
return findings;
|
||||
}
|
||||
/*
|
||||
GIS._prepareLayers = async function(layer) {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"bulma": "^1.0.1",
|
||||
"fontawesome-free": "^1.0.4",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
"spotlight.js": "^0.7.8"
|
||||
},
|
||||
"devDependencies": {}
|
||||
|
||||
@ -29,6 +29,11 @@ fontawesome-free@^1.0.4:
|
||||
resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
|
||||
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:
|
||||
version "1.9.4"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user