awesome-maps-examples/leaflet-implementation/basic-map.html at main · naranyala/awesome-maps-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet - Basic Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; }
        #map { height: 100%; width: 100%; }
    </style>
</head>
<body>

    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="basic-map.js"></script>

<!-- INJECTED MAP CONTROL SCRIPT -->
<script>
window.addEventListener('message', function(e) {
    if(!e.data || typeof map === 'undefined') return;
    try {
        const action = e.data.action;
        const lib = e.data.library;

        if (action === 'zoom_in') {
            if (lib === 'leaflet' || lib === 'maplibre') map.zoomIn();
            else if (lib === 'openlayers') map.getView().animate({zoom: map.getView().getZoom() + 1, duration: 250});
        }
        else if (action === 'zoom_out') {
            if (lib === 'leaflet' || lib === 'maplibre') map.zoomOut();
            else if (lib === 'openlayers') map.getView().animate({zoom: map.getView().getZoom() - 1, duration: 250});
        }
        else if (action === 'pan') {
            const dx = e.data.dx || 0;
            const dy = e.data.dy || 0;
            if (lib === 'leaflet') map.panBy([dx, dy]);
            else if (lib === 'maplibre') map.panBy([dx, dy], {duration: 250});
            else if (lib === 'openlayers') {
                const view = map.getView();
                const center = view.getCenter();
                const res = view.getResolution();
                view.animate({center: [center[0] + dx * res, center[1] - dy * res], duration: 250});
            }
        }
    } catch(err) { console.warn('Map control injection failed:', err); }
});
</script>

</body>
</html>