Feladat: Sri Lanka térképes látnivalóinak megjelenítése

 Készíts egy reszponzív weboldalt, amely:

• Sri Lanka híres helyeit jeleníti meg kártyákon (név, leírás, kép, GPS)
• A helyeket térképen is jelöli (markerrel)
• Külső JSON fájlból (sl.json) olvassa be az adatokat
• Bootstrapet használ a kártyák elrendezésére
• AngularJS-t használ az adatok kezelésére
• Leaflet.js-t használ a térképes megjelenítéshez

Szükséges fájlok

• map.html – a weboldal fájl
• sl.json – az adatokat tartalmazó JSON fájl
• images/ mappa – képek a nevezetességekről (pl. sigirya.jpg stb.)

Szükséges külső linkek

Bootstrap 5 (CSS):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

AngularJS:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Leaflet (CSS és JS):

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

Leaflet.js

A Leaflet egy könnyű, gyors és egyszerűen használható JavaScript könyvtár, amellyel térképet jeleníthetünk meg a weboldalon. Ingyenes és nem igényel API kulcsot, szemben például a Google Maps-szel.

Használat menete:

1. Térkép létrehozása egy div elemben:

<div id="map" style="height: 500px;"></div>

2. Leaflet inicializálás JavaScript-ben:

const map = L.map('map').setView([7.8731, 80.7718], 7); // Sri Lanka középpontja

3. OpenStreetMap csempe (tile) réteg hozzáadása:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

  attribution: '&copy; OpenStreetMap contributors'

}).addTo(map);

4. Marker (jelölő) hozzáadása:

L.marker([7.9570, 80.7603]).addTo(map)

  .bindPopup('<strong>Sigiriya</strong><br>UNESCO világörökség')

  .openPopup();

5. Több marker hozzáadásához használhatunk forEach-et, ha AngularJS segítségével töltjük be az adatokat JSON-ból.

Feladat leírás

1. Hozz létre egy map.html fájlt.
2. Használj benne Bootstrapet a reszponzív megjelenítéshez:
• Mobilon 1 kártya
• Tableten 2 kártya
• Számítógépen 3 kártya egy sorban
3. AngularJS segítségével olvasd be a sl.json fájlt.
4. A sl.json fájl minden eleme tartalmazza:
• filename – a kép fájlnevét
• title – a látnivaló nevét
• description – rövid leírást
• coordinates – lat, lng formában
5. A térképet a weboldal tetején helyezd el, a kártyák felett.
6. Leaflet segítségével jelenítsd meg az összes helyet markerrel.
7. Ha a markerre kattintasz, jelenjen meg a hely neve és leírása (popup).
8. A képeket egy images mappába tedd, és .jpg formátumban használhatók (pl. sigirya.jpg).

Továbbfejlesztési lehetőség:

• A popup stílusát testre szabhatod.
• A térképet egészítsd ki zoom gombokkal, térkép mozgatással.
• Helyezz el kezdő animációt, vagy szűrési lehetőséget.

Képek szükséges fájlok elérhetősége: https://github.com/latiza/sri_lanka_map