LitMap/map.html at main · Ram-N/LitMap · 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
<!-- Navbar for map controls -->
<div class="map-navbar">
    <!-- Center Map control -->
    <div class="control-group">
        <label for="locationSelect">Center Map at:</label>
        <select id="locationSelect" class="control-item">
            <option value="default" data-zoom="3">-- Select a Location --</option>
            <optgroup label="Cities">
                <option value="new_york" data-zoom="10">New York</option>
                <option value="london" data-zoom="10">London</option>
                <option value="tokyo" data-zoom="10">Tokyo</option>
                <option value="sydney" data-zoom="10">Sydney</option>
            </optgroup>
            <optgroup label="Countries">
                <option value="india" data-zoom="5">India</option>
                <option value="uk" data-zoom="6">UK</option>
                <option value="usa" data-zoom="4">USA</option>
            </optgroup>
            <optgroup label="Continents">
                <option value="africa" data-zoom="3">Africa</option>
                <option value="south_america" data-zoom="3">South America</option>
            </optgroup>
            <optgroup label="Regions">
                <option value="sub_saharan_africa" data-zoom="4">Sub-Saharan Africa</option>
                <option value="middle_east" data-zoom="4">Middle East</option>
                <option value="eastern_europe" data-zoom="5">Eastern Europe</option>
            </optgroup>
        </select>
    </div>

    <!-- Search Location control -->
    <div class="control-group">
        <label for="locationInput">Enter Location:</label>
        <input type="text" id="locationInput" placeholder="Enter a city or place" class="control-item">
    </div>

    <div class="control-group">
        <label>Zoom Level:</label>
        <button id="zoomOutButton" class="control-item">-</button>
        <span id="zoomValue" class="control-item">10</span>
        <button id="zoomInButton" class="control-item">+</button>
    </div>

    <!-- Map Type control -->
    <div class="control-group">
        <label for="mapTypeSelect">Select Map Type:</label>
        <select id="mapTypeSelect" class="control-item">
            <option value="roadmap">Roadmap</option>
            <option value="satellite">Satellite</option>
            <option value="hybrid">Hybrid</option>
            <option value="terrain">Terrain</option>
        </select>
    </div>


</div>

<!-- Map div -->
<div id="map"></div>
</div>