awesome-maps-examples/leaflet-implementation/geocoding.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
62
63
64
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet - Geocoding with Nominatim</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%; }
        .search-box { position: absolute; top: 10px; right: 10px; z-index: 1000; background: white; padding: 12px; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.2); }
        .search-box input { width: 250px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .search-box button { padding: 8px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 4px; }
        .search-box button:hover { background: #2563eb; }
        #results { position: absolute; top: 60px; right: 10px; z-index: 1000; background: white; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.2); max-height: 300px; overflow-y: auto; display: none; width: 260px; }
        .result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; }
        .result-item:hover { background: #f0f4ff; }
    </style>
</head>
<body>

    <div class="search-box">
        <input type="text" id="search-input" placeholder="Search location..." />
        <button onclick="search()">Search</button>
    </div>
    <div id="results"></div>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="geocoding.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>