HErevolutionDev/map.html at main · Shashvat-bbx/HErevolutionDev · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map Routing</title>
    <link rel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* Add your custom styles here */
        #mapContainer {
            width: 100%;
            height: 400px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="max-w-md mx-auto">
        <!-- Starting Location Input -->
        <div class="relative">
            <input id="startingLocation" type="text" placeholder="Starting Location"
                class="w-full py-2 px-4 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
            <div id="startingSuggestions"
                class="absolute z-10 bg-white border border-gray-300 w-full mt-1 rounded-b-md shadow-lg hidden"></div>
        </div>
        <!-- Ending Location Input -->
        <div class="relative mt-4">
            <input id="endingLocation" type="text" placeholder="Ending Location"
                class="w-full py-2 px-4 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500">
            <div id="endingSuggestions"
                class="absolute z-10 bg-white border border-gray-300 w-full mt-1 rounded-b-md shadow-lg hidden"></div>
        </div>
    </div>

    <div id="mapContainer" class="my-3"></div>

    <!-- Include the HERE Maps JavaScript API -->
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

    <!-- JavaScript code -->
    <script>
        const startingInput = document.getElementById('startingLocation');
        const endingInput = document.getElementById('endingLocation');
        const startingSuggestionsList = document.getElementById('startingSuggestions');
        const endingSuggestionsList = document.getElementById('endingSuggestions');
        const apiUrl = 'https://autosuggest.search.hereapi.com/v1/autosuggest';
        const apiKey = 'YOUR_AUTOSUGGEST_API_KEY';
        const language = 'en';
        const limit = 5;
        const termsLimit = 3;

        // Initialize HERE platform
        const platform = new H.service.Platform({
            'apikey': 'IWkZZG8yg7_sabfcdfXNKPSM5vnzmShxTHVPipi99XE'
        });

        // Function to fetch suggestions
        function fetchSuggestions(input, suggestionsList) {
            const query = input.value.trim();
            if (query.length === 0) {
                suggestionsList.innerHTML = '';
                return;
            }
            const url = `${apiUrl}?q=${query}&lang=${language}&limit=${limit}&termsLimit=${termsLimit}&apiKey=${apiKey}`;

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Clear previous suggestions
                    suggestionsList.innerHTML = '';

                    // Extract suggestions from the response and add them to the suggestions list
                    data.items.forEach(item => {
                        // Create a div element for each suggestion
                        const suggestionDiv = document.createElement('div');
                        suggestionDiv.textContent = item.title;

                        // Add a class to the suggestion div
                        suggestionDiv.classList.add('suggestion-item');

                        // Handle suggestion selection
                        suggestionDiv.addEventListener('click', () => {
                            // Log selected data to console
                            console.log('Selected:', item.position, item.title);
                            // Display selected data in the input box
                            input.value = item.title;
                            // Hide suggestions dropdown
                            suggestionsList.classList.add('hidden');
                        });

                        // Append the suggestion div to the suggestions list container
                        suggestionsList.appendChild(suggestionDiv);
                    });
                    suggestionsList.classList.remove('hidden');
                })
                .catch(error => {
                    console.error('There was a problem with your fetch operation:', error);
                });
        }

        // Event listener for starting location input
        startingInput.addEventListener('input', function () {
            fetchSuggestions(startingInput, startingSuggestionsList);
        });

        // Event listener for ending location input
        endingInput.addEventListener('input', function () {
            fetchSuggestions(endingInput, endingSuggestionsList);
        });

        // Event listener for form submission
        document.querySelector('form').addEventListener('submit', function (event) {
            event.preventDefault();
            calculateRoute(startingInput.value, endingInput.value);
        });

        function calculateRoute(startingLocation, endingLocation) {
            // Initialize the geocoding and routing services
            const service = platform.getSearchService();
            const router = platform.getRoutingService();

            // Geocode starting location
            service.geocode({ q: startingLocation }, (result) => {
                const startPoint = result.items[0].position;
                // Geocode ending location
                service.geocode({ q: endingLocation }, (result) => {
                    const endPoint = result.items[0].position;
                    // Create routing parameters
                    const params = {
                        mode: 'fastest;car',
                        waypoint0: `${startPoint.lat},${startPoint.lng}`,  // starting point
                        waypoint1: `${endPoint.lat},${endPoint.lng}`,      // ending point
                        representation: 'display'
                    };

                    // Calculate the route
                    router.calculateRoute(params, onSuccess, onError);
                }, onError);
            }, onError);
        }

        function onSuccess(result) {
            const route = result.routes[0];
            const routeShape = route.shape;

            // Create a polyline to display the route:
            const strip = new H.geo.Strip();
            routeShape.forEach(point => {
                const parts = point.split(',');
                strip.pushLatLngAlt(parts[0], parts[1]);
            });

            const routeLine = new H.map.Polyline(strip, {
                style: { strokeColor: '#4354b3', lineWidth: 5 }
            });

            // Clear previous route and markers
            map.removeObjects(map.getObjects());

            // Add route to the map
            map.addObject(routeLine);

            // Set map view to show entire route
            map.getViewModel().setLookAtData({ bounds: routeLine.getBoundingBox() });
        }

        function onError(error) {
            console.error('Error occurred:', error);
        }

        // Initialize HERE map
        const map = new H.Map(
            document.getElementById('mapContainer'),
            new H.map.Provider.DefaultLayers.vector.normal.map,
            {
                center: { lat: 0, lng: 0 },
                zoom: 2,
                pixelRatio: window.devicePixelRatio || 1
            }
        );

        const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Enable map resize
window.addEventListener('resize', () => map.getViewPort().resize());
</script>
</body>

</html>