Skip to content

Commit 79795db

Browse files
dgraf-ghdgraf-gh
committed
fix: added grayscale to the main map
1 parent 69ddff6 commit 79795db

2 files changed

Lines changed: 73 additions & 20 deletions

File tree

‎src/main/resources/static/js/TileLayer.Grayscale.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* L.TileLayer.Grayscale is a regular tilelayer with grayscale makeover.
3+
*/
4+
5+
L.TileLayer.Grayscale = L.TileLayer.extend({
6+
options: {
7+
quotaRed: 21,
8+
quotaGreen: 71,
9+
quotaBlue: 8,
10+
quotaDividerTune: 0,
11+
quotaDivider: function() {
12+
return this.quotaRed + this.quotaGreen + this.quotaBlue + this.quotaDividerTune;
13+
}
14+
},
15+
16+
initialize: function (url, options) {
17+
options = options || {}
18+
options.crossOrigin = true;
19+
L.TileLayer.prototype.initialize.call(this, url, options);
20+
21+
this.on('tileload', function(e) {
22+
this._makeGrayscale(e.tile);
23+
});
24+
},
25+
26+
_createTile: function () {
27+
var tile = L.TileLayer.prototype._createTile.call(this);
28+
tile.crossOrigin = "Anonymous";
29+
return tile;
30+
},
31+
32+
_makeGrayscale: function (img) {
33+
if (img.getAttribute('data-grayscaled'))
34+
return;
35+
36+
img.crossOrigin = '';
37+
var canvas = document.createElement("canvas");
38+
canvas.width = img.width;
39+
canvas.height = img.height;
40+
var ctx = canvas.getContext("2d");
41+
ctx.drawImage(img, 0, 0);
42+
43+
var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
44+
var pix = imgd.data;
45+
for (var i = 0, n = pix.length; i < n; i += 4) {
46+
pix[i] = pix[i + 1] = pix[i + 2] = (this.options.quotaRed * pix[i] + this.options.quotaGreen * pix[i + 1] + this.options.quotaBlue * pix[i + 2]) / this.options.quotaDivider();
47+
}
48+
ctx.putImageData(imgd, 0, 0);
49+
img.setAttribute('data-grayscaled', true);
50+
img.src = canvas.toDataURL();
51+
}
52+
});
53+
54+
L.tileLayer.grayscale = function (url, options) {
55+
return new L.TileLayer.Grayscale(url, options);
56+
};

‎src/main/resources/templates/index.html‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,10 @@
1313
<link rel="stylesheet" href="/css/lineicons.css">
1414
<script src="/js/HumanizeDuration.js"></script>
1515
<script src="/js/horizontal-date-picker.js"></script>
16-
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"
17-
rel="stylesheet">
16+
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap" rel="stylesheet">
1817
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
19-
20-
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
21-
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
18+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
19+
<script src="/js/TileLayer.Grayscale.js"></script>
2220
</head>
2321
<body>
2422
<div id="map"></div>
@@ -55,21 +53,21 @@
5553
<script>
5654
// Function to initialize maps for place cards
5755
function initPlaceMaps() {
58-
const placeMap = L.map(mapElement, {
59-
zoomControl: false,
60-
attributionControl: false,
61-
dragging: false,
62-
scrollWheelZoom: false
63-
})
64-
65-
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
66-
maxZoom: 19,
67-
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
68-
}).addTo(placeMap);
6956

7057
document.querySelectorAll('.place-map').forEach(mapElement => {
7158
const lat = parseFloat(mapElement.dataset.lat);
7259
const lng = parseFloat(mapElement.dataset.lng);
60+
const placeMap = L.map(mapElement, {
61+
zoomControl: false,
62+
attributionControl: false,
63+
dragging: false,
64+
scrollWheelZoom: false
65+
})
66+
67+
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
68+
maxZoom: 19,
69+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
70+
}).addTo(placeMap);
7371

7472
if (!isNaN(lat) && !isNaN(lng)) {
7573
placeMap.setView([lat, lng], 14);
@@ -239,10 +237,9 @@
239237

240238
// Initialize the map
241239
const map = L.map('map').setView([60.1699, 24.9384], 12); // Helsinki coordinates as default
242-
243-
L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
244-
maxZoom: 20,
245-
attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
240+
L.tileLayer.grayscale('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
241+
maxZoom: 19,
242+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
246243
}).addTo(map);
247244

248245
// Add scale control

0 commit comments

Comments
 (0)