christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve map: higher DPR + circle markers for small countries (Cyprus, Malta)
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 2s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-09 07:29:37 +03:00
parent f45a999b09
commit 418300068d
1 changed files with 51 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
static/map-embed.html
View File

@@ -97,7 +97,7 @@ body { margin: 0; overflow: hidden; }
// Render choropleth as image overlay — re-renders at high res for visible area
var MAX_LAT = 85.051129;
var offscreen = document.createElement('canvas');
var dpr = window.devicePixelRatio || 1;
var dpr = Math.max(2, window.devicePixelRatio || 1);
function mercY(lat, north, south, H) {
var toMerc = function(l) { var r = l * Math.PI / 180; return Math.log(Math.tan(Math.PI/4 + r/2)); };
@@ -183,6 +183,36 @@ body { margin: 0; overflow: hidden; }
renderChoropleth();
_ifkMap.on('moveend', function() { if (needsRerender()) renderChoropleth(); });
// Circle markers for small countries that are hard to see on the choropleth
var SMALL_COUNTRY_COORDS = {
'196': [33.4, 35.1], // Cyprus
'470': [14.4, 35.9], // Malta
'702': [103.8, 1.35], // Singapore
'036': [134, -25] // Australia (large but southern hemisphere, keep for reference)
};
var smallFeatures = [];
countries.forEach(function(c) {
var coords = SMALL_COUNTRY_COORDS[c.isoNum];
if (coords) {
smallFeatures.push({
type: 'Feature',
geometry: { type: 'Point', coordinates: coords },
properties: { isoNum: c.isoNum, color: STATUS_COLORS[c.status], name: (c[LANG] || c.en).name }
});
}
});
if (smallFeatures.length) {
_ifkMap.addSource('small-countries', { type: 'geojson', data: { type: 'FeatureCollection', features: smallFeatures } });
_ifkMap.addLayer({
id: 'small-countries-circle', type: 'circle', source: 'small-countries',
paint: {
'circle-radius': 8, 'circle-color': ['get', 'color'],
'circle-stroke-width': 2, 'circle-stroke-color': '#ffffff',
'circle-opacity': 0.9
}
});
}
// Invisible GeoJSON layer for hover/click interaction
_ifkMap.addSource('countries', { type: 'geojson', data: geo });
_ifkMap.addLayer({
@@ -229,6 +259,26 @@ body { margin: 0; overflow: hidden; }
}
popup.setLngLat(e.lngLat).setHTML(html).addTo(_ifkMap);
});
// Click handler for small country circles
if (smallFeatures.length) {
_ifkMap.on('mouseenter', 'small-countries-circle', function() { _ifkMap.getCanvas().style.cursor = 'pointer'; });
_ifkMap.on('mouseleave', 'small-countries-circle', function() { _ifkMap.getCanvas().style.cursor = ''; });
_ifkMap.on('click', 'small-countries-circle', function(e) {
var id = e.features[0].properties.isoNum;
var c = byIsoNum[id];
if (!c) return;
var loc = c[LANG] || c.en;
var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
'<em>' + loc.law + '</em><br>' +
'<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
'<div class="ifk-popup-age">&#x1F464; ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
'<div class="ifk-popup-detail">' + loc.detail + '</div>';
popup.setLngLat(e.lngLat).setHTML(html).addTo(_ifkMap);
});
}
}).catch(function(e) { console.error('Choropleth load error:', e); });
});
})();