awesome-maps-examples/leaflet-implementation/turf-point-in-polygon.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
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet + Turf.js - Point in Polygon</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%; }
        .instructions { position: absolute; top: 10px; right: 10px; z-index: 1000; background: rgba(15, 23, 42, 0.85); color: white; padding: 15px; border-radius: 8px; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); max-width: 280px; font-size: 13px; line-height: 1.5; }
        .result { padding: 6px 10px; border-radius: 4px; margin-top: 8px; font-weight: bold; }
        .result.inside { background: rgba(16,185,129,0.2); color: #10b981; }
        .result.outside { background: rgba(239,68,68,0.2); color: #ef4444; }
    </style>
</head>
<body>
    <div class="instructions">
        <strong>🎯 Point in Polygon</strong><br>
        Click anywhere to test if the point is inside the polygon.
        <div id="result"></div>
    </div>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script>
    <script src="turf-point-in-polygon.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>