needed some help #145449

iirsh · 2024-11-24T00:00:05Z

iirsh
Nov 24, 2024

is it possible to make a campus navigation where the map is offline, and is it possible to make the app using html and css? if so can someone help me?

CyberSphinxxx · 2024-11-27T19:09:24Z

CyberSphinxxx
Nov 27, 2024

Hello @iirsh

Yes, it's definitely possible to create a campus navigation app with an offline map!

While HTML and CSS can help you design the app, you'll need JavaScript for the map functionality. You can use libraries like Leaflet.js or OpenLayers to display maps offline by saving the map tiles locally on the user's device. JavaScript can also help you track the user's location and show points of interest on the map.

So, HTML and CSS are great for the layout, but JavaScript will be key for implementing offline map features.

0 replies

enzodelcompare · 2024-11-27T19:26:53Z

enzodelcompare
Nov 27, 2024

Hi @iirsh!

Yes, it's possible to create an offline campus navigation app using HTML, CSS, and JavaScript. You can use:

Leaflet.js: For interactive maps.
Offline Map Tiles: Store map tiles locally (e.g., MBTiles format or pre-downloaded PNG tiles).
JavaScript: For route calculations and navigation logic (e.g., using Dijkstra or A* algorithms).
PWA (Progressive Web App): To enable offline functionality and caching.
Storage Options: Use localStorage or IndexedDB for offline data storage.

Here’s a basic structure:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>#map { height: 100vh; }</style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([latitude, longitude], 15);
        L.tileLayer('path_to_tiles/{z}/{x}/{y}.png', {
            maxZoom: 18,
            minZoom: 12,
        }).addTo(map);
        L.marker([latitude, longitude]).addTo(map).bindPopup('You are here').openPopup();
    </script>
</body>
</html>

0 replies

ghostinhershell · 2025-02-04T20:22:00Z

ghostinhershell
Feb 4, 2025
Maintainer

Hi @iirsh 👋🏾

Have you tried using Copilot to build this project with you? If you haven't gotten a chance to try it out, you can get started for free here.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

needed some help #145449

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

GitHub Community

needed some help #145449

iirsh Nov 24, 2024

Replies: 3 comments

CyberSphinxxx Nov 27, 2024

enzodelcompare Nov 27, 2024

ghostinhershell Feb 4, 2025 Maintainer

iirsh
Nov 24, 2024

CyberSphinxxx
Nov 27, 2024

enzodelcompare
Nov 27, 2024

ghostinhershell
Feb 4, 2025
Maintainer