FRONTEND
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
A Leaflet egy nyílt forráskódú, JavaScript alapú térképes
könyvtár, amelyet interaktív térképek egyszerű és gyors megjelenítésére
terveztek webes alkalmazásokban.
hogy használd:
<!DOCTYPE
html>
<html
lang="hu">
<head>
<title>Leaflet példa</title>
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map =
L.map('map').setView([47.497913, 19.040236], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
</script>
</body>
</html>
Készíts egy hasonló oldalt, ahová beolvasod az adatokat a
json fájlból:
[
{
"accident_id": 1,
"city": "Budapest",
"street": "Andrássy út",
"latitude": "47.497913",
"longitude": "19.040236",
"accident_date": "2024-03-01",
"year": 2024,
"month": 3,
"day": 1,
"day_of_week": "Friday",
"weather_condition": "Clear",
"temperature": "15.50",
"precipitation": "0.00",
"visibility": "10.00",
"vehicle_type": "Car",
"cause_description": "Speeding",
"severity": "High",
"num_casualties": 2,
"num_vehicles": 2
},
{
"accident_id": 2,
"city": "Debrecen",
"street": "Piac utca",
"latitude": "47.531605",
"longitude": "21.627312",
"accident_date": "2024-03-02",
"year": 2024,
"month": 3,
"day": 2,
"day_of_week": "Saturday",
"weather_condition": "Rainy",
"temperature": "9.20",
"precipitation": "5.60",
"visibility": "4.50",
"vehicle_type": "Motorcycle",
"cause_description": "Distracted driving",
"severity": "Medium",
"num_casualties": 1,
"num_vehicles": 2
},
{
"accident_id": 3,
"city": "Szeged",
"street": "Kossuth Lajos sugárút",
"latitude": "46.253000",
"longitude": "20.141425",
"accident_date": "2024-03-02",
"year": 2024,
"month": 3,
"day": 2,
"day_of_week": "Saturday",
"weather_condition": "Foggy",
"temperature": "6.00",
"precipitation": "0.20",
"visibility": "1.00",
"vehicle_type": "Motorcycle",
"cause_description": "Alcohol consumption",
"severity": "Low",
"num_casualties": 0,
"num_vehicles": 1
}
]
Nincsenek megjegyzések:
Megjegyzés küldése