Added most big cities, rulers, and zoomify
This commit is contained in:
Alexis
@@ -1,33 +1,347 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<script lang="ts">
|
||||
const map = L.map('map', {
|
||||
crs: L.CRS.Simple,
|
||||
zoom: -.75,
|
||||
minZoom: -.75,
|
||||
maxZoom: 4,
|
||||
zoomSnap: 0,
|
||||
bounceAtZoomLimits: false,
|
||||
maxBoundsViscosity: .8
|
||||
});
|
||||
const mapHeight = 15168;
|
||||
const mapWidth = 14658;
|
||||
|
||||
const bounds = [
|
||||
[0, 0],
|
||||
[1551, 1605]
|
||||
];
|
||||
L.imageOverlay('/maps/alliance-kaldelienne.svg', bounds).addTo(map);
|
||||
const map = L.map('map', {
|
||||
crs: L.CRS.Simple,
|
||||
maxZoom: 12,
|
||||
minZoom: 2.5,
|
||||
zoom: 2.5,
|
||||
zoomSnap: 0,
|
||||
});
|
||||
|
||||
const marker = L.marker([75, 50]).addTo(map);
|
||||
marker.bindPopup("<b>Hello world!</b><br>I am a popup. SVG coordinates: x: 378; y:303.5").openPopup();
|
||||
// Layers
|
||||
const layer = L.tileLayer.zoomify('/zoomify/alliance-kaldelienne/{g}/{z}-{x}-{y}.jpg', {
|
||||
width: mapWidth,
|
||||
height: mapHeight,
|
||||
}).addTo(map);
|
||||
|
||||
map.fitBounds(bounds);
|
||||
map.setMaxBounds(map.getBounds());
|
||||
const layerGroups = {
|
||||
capitals: L.layerGroup(),
|
||||
cities: L.layerGroup(),
|
||||
towns: L.layerGroup(),
|
||||
landmarks: L.layerGroup(),
|
||||
};
|
||||
|
||||
/**
|
||||
* Build all markers and their related info
|
||||
*/
|
||||
const markers = [
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Ambrose",
|
||||
description: "Chef-lieu de Nacride et Capitale économique de l'Alliance Kaldélienne.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Ambrose",
|
||||
markerCoords: {
|
||||
x: 83.6,
|
||||
y: -185.2,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Cordouac",
|
||||
description: "Chef-lieu d'Héraldie et Capitale administrative de l'Alliance Kaldélienne.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Cordouac",
|
||||
markerCoords: {
|
||||
x: 133.46875,
|
||||
y: -146.0625 ,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Bordelac",
|
||||
description: "Chef-lieu des Hautes-Berges",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Bordelac",
|
||||
markerCoords: {
|
||||
x: 151.22656,
|
||||
y: -173.63281,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Tourgrise",
|
||||
description: "Chef-lieu de Ternâcre. C'est une cité de mages archivistes, mais c'est aussi ici qu'on trouve la plus grande population carcérale de l'Alliance.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Tourgrise",
|
||||
markerCoords: {
|
||||
x: 132.26953,
|
||||
y: -98.19141,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Valsoie",
|
||||
description: "Chef-lieu de Mireloin.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Valsoie",
|
||||
markerCoords: {
|
||||
x: 103.4375,
|
||||
y: -79.5,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Prismalline",
|
||||
description: "Chef-lieu de Corambre.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Prismalline",
|
||||
markerCoords: {
|
||||
x: 103.00329,
|
||||
y: -138.02162,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Port-brisé",
|
||||
description: "Chef-lieu d'Émerose.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Port-brisé",
|
||||
markerCoords: {
|
||||
x: 168.39491,
|
||||
y: -109.13376,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Berce",
|
||||
description: "Chef-lieu des Basses-berges.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Berce",
|
||||
markerCoords: {
|
||||
x: 173.39874,
|
||||
y: -164.39011,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Lamière",
|
||||
description: "Chef-lieu de Quillon.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Lamière",
|
||||
markerCoords: {
|
||||
x: 140.20731,
|
||||
y: -195.77923,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Halport",
|
||||
description: "Chef-lieu de Lagarde.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Halport",
|
||||
markerCoords: {
|
||||
x: 76.6803,
|
||||
y: -198.76159,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Soubreciel",
|
||||
description: "Chef-lieu de Rougefer.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Soubreciel",
|
||||
markerCoords: {
|
||||
x: 204.42515,
|
||||
y: -226.85883,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Dramast",
|
||||
description: "Chef-lieu d'Asharos.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Dramast",
|
||||
markerCoords: {
|
||||
x: 119.35456,
|
||||
y: -27.53623,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Briseroc",
|
||||
description: "Chef-lieu de Pergaré.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Briseroc",
|
||||
markerCoords: {
|
||||
x: 41.96763,
|
||||
y: -48.83056,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "capitals",
|
||||
title: "Demilieu",
|
||||
description: "Ancienne cité militaire laissée à l'abandon depuis plusieurs centaines d'années.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Demilieu",
|
||||
markerCoords: {
|
||||
x: 204.75462,
|
||||
y: -116.80687,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "cities",
|
||||
title: "Borélis",
|
||||
description: "Cité côtière vivant principalement de la pêche.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Borélis",
|
||||
markerCoords: {
|
||||
x: 138.44531,
|
||||
y: -51.54687,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "cities",
|
||||
title: "Alcombe",
|
||||
description: "",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Alcombe",
|
||||
markerCoords: {
|
||||
x: 165.42471,
|
||||
y: -164.00393,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: "cities",
|
||||
title: "Cristaline",
|
||||
description: "",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Cristaline",
|
||||
markerCoords: {
|
||||
x: 167.06242,
|
||||
y: -176.47233,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: 'landmarks',
|
||||
title: "L'Ange d'Aldys",
|
||||
description: "Monument dédié à la mémoire des morts du sang noir pendant la Rupture.",
|
||||
markerCoords: {
|
||||
x: 90.125,
|
||||
y: -166.4375,
|
||||
}
|
||||
},
|
||||
{
|
||||
group: 'landmarks',
|
||||
title: "Les Cages Handaniennes",
|
||||
description: "Complexe pénitencier réservé aux criminels maîtrisant la magie.",
|
||||
link: "https://alexcreates.fr/leim/index.php?title=Cages_Handaniennes",
|
||||
markerCoords: {
|
||||
x: 168.31641,
|
||||
y: -60.54297,
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
for (let i = 0; i < markers.length; i++) {
|
||||
const m = markers[i];
|
||||
|
||||
const coords = [m.markerCoords.y, m.markerCoords.x];
|
||||
|
||||
let markerIcon
|
||||
|
||||
switch (m.group) {
|
||||
case "capitals":
|
||||
markerIcon = L.icon({
|
||||
iconUrl: `icons/castle.png`,
|
||||
shadowUrl: `icons/castle-shadow.png`,
|
||||
iconSize: [25, 25],
|
||||
shadowSize: [40, 30],
|
||||
iconAnchor: [12.5, 8],
|
||||
shadowAnchor: [12.5, 12]
|
||||
});
|
||||
break;
|
||||
|
||||
case "cities":
|
||||
markerIcon = L.icon({
|
||||
iconUrl: `icons/circle.png`,
|
||||
iconSize: [12, 12],
|
||||
});
|
||||
break;
|
||||
|
||||
case "landmarks":
|
||||
markerIcon = L.icon({
|
||||
iconUrl: `icons/monument.png`,
|
||||
shadowUrl: `icons/monument-shadow.png`,
|
||||
iconSize: [18, 18],
|
||||
shadowSize: [32, 14],
|
||||
iconAnchor: [12.5, 8],
|
||||
shadowAnchor: [15, 6]
|
||||
});
|
||||
break;
|
||||
|
||||
case "towns":
|
||||
default:
|
||||
iconKey = "house"
|
||||
break;
|
||||
}
|
||||
|
||||
const marker = L.marker(coords, { icon: markerIcon }).addTo(map);
|
||||
const popupContent = `
|
||||
<b>
|
||||
<a href="${m.link}" target="_blank">
|
||||
${m.title}
|
||||
</a>
|
||||
</b>
|
||||
<br>
|
||||
${m.description}
|
||||
`;
|
||||
marker.bindPopup(popupContent).openPopup();
|
||||
|
||||
const displayTooltip = m.group === 'capitals';
|
||||
|
||||
if (displayTooltip) {
|
||||
L.tooltip({ permanent: true, direction: 'top', offset: [0, -10], content: m.title, className: "capital-name", opacity: 1 }).setLatLng(coords).addTo(map);
|
||||
}
|
||||
|
||||
marker.addTo(layerGroups[m.group])
|
||||
}
|
||||
|
||||
map.fitBounds(layer.getBounds());
|
||||
|
||||
// L.control.layers({ "base": layer }, layerGroups).addTo(map);
|
||||
|
||||
/**
|
||||
* RULER
|
||||
*/
|
||||
/**
|
||||
* Workaround specific to leaflet version
|
||||
* See https://github.com/ljagis/leaflet-measure/issues/171 for details
|
||||
*/
|
||||
L.Control.Measure.include({
|
||||
// set icon on the capture marker
|
||||
_setCaptureMarkerIcon: function () {
|
||||
// disable autopan
|
||||
this._captureMarker.options.autoPanOnFocus = false;
|
||||
|
||||
// default function
|
||||
this._captureMarker.setIcon(
|
||||
L.divIcon({
|
||||
iconSize: this._map.getSize().multiplyBy(2)
|
||||
})
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const rulerOptions = {
|
||||
position: 'topleft',
|
||||
primaryLengthUnit: 'kilometers',
|
||||
secondaryLengthUnit: 'days',
|
||||
primaryAreaUnit: 'hectares',
|
||||
units: {
|
||||
kilometers: {
|
||||
factor: 0.00013,
|
||||
display: 'Kilomètres',
|
||||
},
|
||||
days: {
|
||||
factor: 0.000001,
|
||||
display: 'Jours de marche',
|
||||
decimals: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const measureControl = L.control.measure(rulerOptions);
|
||||
measureControl.addTo(map);
|
||||
|
||||
/**
|
||||
* DEBUGS
|
||||
*/
|
||||
map.addEventListener('click', (event) => {
|
||||
let lat = Math.round(event.latlng.lat * 100000) / 100000;
|
||||
let lng = Math.round(event.latlng.lng * 100000) / 100000;
|
||||
console.log(lat, lng);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" is:global>
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
@@ -40,6 +354,18 @@ body {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
aspect-ratio: 1551/1605;
|
||||
background: #98bcd0;
|
||||
background: #98bcd0 !important;
|
||||
|
||||
.leaflet-map-pane {
|
||||
.leaflet-tooltip-pane {
|
||||
.leaflet-tooltip {
|
||||
&.capital-name {
|
||||
padding: .2rem .4rem;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,6 +15,14 @@ const { title } = Astro.props;
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="">
|
||||
</script>
|
||||
<script is:inline type="text/javascript" src="/js/leaflet-zoomify.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="leaflet-measure/leaflet-measure.css" />
|
||||
<script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
|
||||
Reference in New Issue
Block a user