Map page v1
This commit is contained in:
Josh-Dev-Quest
parent
2b2cd32847
commit
471d629a93
110
backend/app.py
110
backend/app.py
@ -1,27 +1,22 @@
|
||||
from flask import Flask, request, jsonify
|
||||
from flask_cors import CORS
|
||||
|
||||
# Initialize CORS
|
||||
app = Flask(__name__)
|
||||
CORS(app)
|
||||
import json
|
||||
import os
|
||||
from datetime import datetime
|
||||
|
||||
app = Flask(__name__)
|
||||
CORS(app) # Enable CORS for all routes
|
||||
|
||||
# Define the data directory
|
||||
# Data directory and file
|
||||
DATA_DIR = 'data'
|
||||
DATA_FILE = os.path.join(DATA_DIR, 'journeys.json')
|
||||
os.makedirs(DATA_DIR, exist_ok=True)
|
||||
|
||||
# Define the data file path
|
||||
DATA_FILE = os.path.join(DATA_DIR, 'journeys.json')
|
||||
|
||||
# Initialize journeys list
|
||||
# In-memory store (loaded from file on startup)
|
||||
journeys = []
|
||||
|
||||
def load_journeys():
|
||||
"""Load journeys from the data file."""
|
||||
"""Load journeys from the JSON file."""
|
||||
global journeys
|
||||
try:
|
||||
if os.path.exists(DATA_FILE):
|
||||
@ -34,107 +29,110 @@ def load_journeys():
|
||||
journeys = []
|
||||
|
||||
def save_journeys():
|
||||
"""Save journeys to the data file."""
|
||||
"""Save journeys to the JSON file."""
|
||||
try:
|
||||
with open(DATA_FILE, 'w') as f:
|
||||
json.dump(journeys, f, indent=2)
|
||||
except Exception as e:
|
||||
print(f"Error saving journeys: {e}")
|
||||
|
||||
# Load journeys when the app starts
|
||||
# Load existing journeys on startup
|
||||
load_journeys()
|
||||
|
||||
def get_next_id():
|
||||
"""Return the next available ID (simple integer increment)."""
|
||||
if not journeys:
|
||||
return 1
|
||||
return max(j['id'] for j in journeys) + 1
|
||||
|
||||
@app.route('/api/journeys', methods=['POST'])
|
||||
def create_journey():
|
||||
"""Create a new journey."""
|
||||
data = request.get_json()
|
||||
|
||||
if not data or 'name' not in data:
|
||||
return jsonify({'error': 'Journey name is required'}), 400
|
||||
|
||||
# Create new journey
|
||||
if not data:
|
||||
return jsonify({'error': 'No data provided'}), 400
|
||||
|
||||
title = data.get('title')
|
||||
if not title:
|
||||
return jsonify({'error': 'Journey title is required'}), 400
|
||||
|
||||
new_journey = {
|
||||
'id': len(journeys) + 1,
|
||||
'name': data['name'],
|
||||
'id': get_next_id(),
|
||||
'title': title,
|
||||
'description': data.get('description', ''),
|
||||
'markers': data.get('markers', []),
|
||||
'createdAt': datetime.now().isoformat()
|
||||
'markers': data.get('markers', []), # list of marker objects
|
||||
'created_at': datetime.now().isoformat()
|
||||
}
|
||||
|
||||
|
||||
journeys.append(new_journey)
|
||||
save_journeys()
|
||||
|
||||
return jsonify(new_journey), 201
|
||||
|
||||
@app.route('/api/journeys', methods=['GET'])
|
||||
def get_journeys():
|
||||
"""Get all journeys."""
|
||||
"""Return all journeys."""
|
||||
return jsonify(journeys)
|
||||
|
||||
@app.route('/api/journeys/<string:journey_id>', methods=['GET'])
|
||||
@app.route('/api/journeys/<int:journey_id>', methods=['GET'])
|
||||
def get_journey(journey_id):
|
||||
"""Get a specific journey by ID."""
|
||||
journey = next((j for j in journeys if str(j['id']) == journey_id), None)
|
||||
if journey:
|
||||
return jsonify(journey)
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
"""Return a specific journey by ID."""
|
||||
journey = next((j for j in journeys if j['id'] == journey_id), None)
|
||||
if journey is None:
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
return jsonify(journey)
|
||||
|
||||
|
||||
@app.route('/api/journeys/<string:journey_id>', methods=['PUT'])
|
||||
@app.route('/api/journeys/<int:journey_id>', methods=['PUT'])
|
||||
def update_journey(journey_id):
|
||||
"""Update an existing journey."""
|
||||
journey = next((j for j in journeys if str(j['id']) == journey_id), None)
|
||||
if not journey:
|
||||
journey = next((j for j in journeys if j['id'] == journey_id), None)
|
||||
if journey is None:
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
|
||||
|
||||
data = request.get_json()
|
||||
|
||||
# Update journey fields
|
||||
if 'name' in data:
|
||||
journey['name'] = data['name']
|
||||
if not data:
|
||||
return jsonify({'error': 'No data provided'}), 400
|
||||
|
||||
# Update allowed fields
|
||||
if 'title' in data:
|
||||
journey['title'] = data['title']
|
||||
if 'description' in data:
|
||||
journey['description'] = data['description']
|
||||
if 'markers' in data:
|
||||
journey['markers'] = data['markers']
|
||||
|
||||
|
||||
save_journeys()
|
||||
return jsonify(journey)
|
||||
|
||||
@app.route('/api/journeys/<string:journey_id>', methods=['DELETE'])
|
||||
@app.route('/api/journeys/<int:journey_id>', methods=['DELETE'])
|
||||
def delete_journey(journey_id):
|
||||
"""Delete a journey."""
|
||||
global journeys
|
||||
journey = next((j for j in journeys if str(j['id']) == journey_id), None)
|
||||
if not journey:
|
||||
journey = next((j for j in journeys if j['id'] == journey_id), None)
|
||||
if journey is None:
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
|
||||
journeys = [j for j in journeys if str(j['id']) != int(journey_id)]
|
||||
|
||||
journeys = [j for j in journeys if j['id'] != journey_id]
|
||||
save_journeys()
|
||||
|
||||
return jsonify({'message': 'Journey deleted successfully', 'journey': journey})
|
||||
|
||||
@app.route('/api/journeys/health', methods=['GET'])
|
||||
def health_check():
|
||||
"""Health check endpoint."""
|
||||
"""Simple health check endpoint."""
|
||||
return jsonify({'status': 'healthy', 'timestamp': datetime.now().isoformat()})
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
"""Serve the main HTML page."""
|
||||
"""Root endpoint – just a welcome message."""
|
||||
return '''
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Journey Mapper</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<head><title>Journey Mapper Backend</title></head>
|
||||
<body>
|
||||
<h1>Journey Mapper</h1>
|
||||
<p>Backend is running. Access API at <a href="/api/journeys">/api/journeys</a></p>
|
||||
<h1>Journey Mapper API</h1>
|
||||
<p>Backend is running. Use <code>/api/journeys</code> endpoints.</p>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True, port=5000)
|
||||
app.run(debug=True, port=5000)
|
||||
138
backend/app2.py
138
backend/app2.py
@ -1,138 +0,0 @@
|
||||
from flask import Flask, request, jsonify
|
||||
from flask_cors import CORS
|
||||
import json
|
||||
import os
|
||||
from datetime import datetime
|
||||
|
||||
app = Flask(__name__)
|
||||
CORS(app) # Enable CORS for all routes
|
||||
|
||||
# Data directory and file
|
||||
DATA_DIR = 'data'
|
||||
DATA_FILE = os.path.join(DATA_DIR, 'journeys.json')
|
||||
os.makedirs(DATA_DIR, exist_ok=True)
|
||||
|
||||
# In-memory store (loaded from file on startup)
|
||||
journeys = []
|
||||
|
||||
def load_journeys():
|
||||
"""Load journeys from the JSON file."""
|
||||
global journeys
|
||||
try:
|
||||
if os.path.exists(DATA_FILE):
|
||||
with open(DATA_FILE, 'r') as f:
|
||||
journeys = json.load(f)
|
||||
else:
|
||||
journeys = []
|
||||
except Exception as e:
|
||||
print(f"Error loading journeys: {e}")
|
||||
journeys = []
|
||||
|
||||
def save_journeys():
|
||||
"""Save journeys to the JSON file."""
|
||||
try:
|
||||
with open(DATA_FILE, 'w') as f:
|
||||
json.dump(journeys, f, indent=2)
|
||||
except Exception as e:
|
||||
print(f"Error saving journeys: {e}")
|
||||
|
||||
# Load existing journeys on startup
|
||||
load_journeys()
|
||||
|
||||
def get_next_id():
|
||||
"""Return the next available ID (simple integer increment)."""
|
||||
if not journeys:
|
||||
return 1
|
||||
return max(j['id'] for j in journeys) + 1
|
||||
|
||||
@app.route('/api/journeys', methods=['POST'])
|
||||
def create_journey():
|
||||
"""Create a new journey."""
|
||||
data = request.get_json()
|
||||
if not data:
|
||||
return jsonify({'error': 'No data provided'}), 400
|
||||
|
||||
title = data.get('title')
|
||||
if not title:
|
||||
return jsonify({'error': 'Journey title is required'}), 400
|
||||
|
||||
new_journey = {
|
||||
'id': get_next_id(),
|
||||
'title': title,
|
||||
'description': data.get('description', ''),
|
||||
'markers': data.get('markers', []), # list of marker objects
|
||||
'created_at': datetime.now().isoformat()
|
||||
}
|
||||
|
||||
journeys.append(new_journey)
|
||||
save_journeys()
|
||||
return jsonify(new_journey), 201
|
||||
|
||||
@app.route('/api/journeys', methods=['GET'])
|
||||
def get_journeys():
|
||||
"""Return all journeys."""
|
||||
return jsonify(journeys)
|
||||
|
||||
@app.route('/api/journeys/<int:journey_id>', methods=['GET'])
|
||||
def get_journey(journey_id):
|
||||
"""Return a specific journey by ID."""
|
||||
journey = next((j for j in journeys if j['id'] == journey_id), None)
|
||||
if journey is None:
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
return jsonify(journey)
|
||||
|
||||
@app.route('/api/journeys/<int:journey_id>', methods=['PUT'])
|
||||
def update_journey(journey_id):
|
||||
"""Update an existing journey."""
|
||||
journey = next((j for j in journeys if j['id'] == journey_id), None)
|
||||
if journey is None:
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
|
||||
data = request.get_json()
|
||||
if not data:
|
||||
return jsonify({'error': 'No data provided'}), 400
|
||||
|
||||
# Update allowed fields
|
||||
if 'title' in data:
|
||||
journey['title'] = data['title']
|
||||
if 'description' in data:
|
||||
journey['description'] = data['description']
|
||||
if 'markers' in data:
|
||||
journey['markers'] = data['markers']
|
||||
|
||||
save_journeys()
|
||||
return jsonify(journey)
|
||||
|
||||
@app.route('/api/journeys/<int:journey_id>', methods=['DELETE'])
|
||||
def delete_journey(journey_id):
|
||||
"""Delete a journey."""
|
||||
global journeys
|
||||
journey = next((j for j in journeys if j['id'] == journey_id), None)
|
||||
if journey is None:
|
||||
return jsonify({'error': 'Journey not found'}), 404
|
||||
|
||||
journeys = [j for j in journeys if j['id'] != journey_id]
|
||||
save_journeys()
|
||||
return jsonify({'message': 'Journey deleted successfully', 'journey': journey})
|
||||
|
||||
@app.route('/api/journeys/health', methods=['GET'])
|
||||
def health_check():
|
||||
"""Simple health check endpoint."""
|
||||
return jsonify({'status': 'healthy', 'timestamp': datetime.now().isoformat()})
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
"""Root endpoint – just a welcome message."""
|
||||
return '''
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>Journey Mapper Backend</title></head>
|
||||
<body>
|
||||
<h1>Journey Mapper API</h1>
|
||||
<p>Backend is running. Use <code>/api/journeys</code> endpoints.</p>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True, port=5000)
|
||||
@ -30,5 +30,53 @@
|
||||
}
|
||||
],
|
||||
"created_at": "2026-03-01T19:02:15.679031"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "test 1",
|
||||
"description": "sdfdsfafsfsdsf",
|
||||
"markers": [
|
||||
{
|
||||
"lat": 48.705462895790575,
|
||||
"lng": 2.4334716796875,
|
||||
"title": "New Marker",
|
||||
"date": "",
|
||||
"description": "",
|
||||
"videoUrl": ""
|
||||
},
|
||||
{
|
||||
"lat": 47.37603463349758,
|
||||
"lng": 2.0654296875000004,
|
||||
"title": "New Marker",
|
||||
"date": "",
|
||||
"description": "",
|
||||
"videoUrl": ""
|
||||
},
|
||||
{
|
||||
"lat": 47.25686404408872,
|
||||
"lng": 5.020751953125,
|
||||
"title": "New Marker",
|
||||
"date": "",
|
||||
"description": "",
|
||||
"videoUrl": ""
|
||||
},
|
||||
{
|
||||
"lat": 47.25686404408872,
|
||||
"lng": 5.954589843750001,
|
||||
"title": "New Marker",
|
||||
"date": "",
|
||||
"description": "",
|
||||
"videoUrl": ""
|
||||
},
|
||||
{
|
||||
"lat": 47.357431944587034,
|
||||
"lng": 7.289428710937501,
|
||||
"title": "New Marker",
|
||||
"date": "",
|
||||
"description": "",
|
||||
"videoUrl": ""
|
||||
}
|
||||
],
|
||||
"created_at": "2026-03-05T13:00:48.757539"
|
||||
}
|
||||
]
|
||||
17
journey.html
17
journey.html
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Journey Timeline</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="journey-timeline">
|
||||
<h1 id="journey-title"></h1>
|
||||
<div id="timeline-container"></div>
|
||||
</div>
|
||||
<script src="js/journey-post.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
80
map.html
80
map.html
@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Map Project</title>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/map.css">
|
||||
|
||||
<style>
|
||||
/* Your existing inline styles... */
|
||||
</style>
|
||||
</head>
|
||||
```
|
||||
|
||||
map.html
|
||||
```html
|
||||
<<<<<<< SEARCH
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Journey Mapper</title>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/map.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<div class="sidebar">
|
||||
<div class="journey-panel">
|
||||
<h3><i class="fas fa-route"></i> Journey Manager</h3>
|
||||
|
||||
<!-- Journey Form -->
|
||||
<form id="journey-form" class="journey-form">
|
||||
<div class="form-group">
|
||||
<label for="journey-name"><i class="fas fa-heading"></i> Journey Name:</label>
|
||||
<input type="text" id="journey-name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="journey-desc"><i class="fas fa-align-left"></i> Description:</label>
|
||||
<textarea id="journey-desc"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Markers List -->
|
||||
<h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
|
||||
<div id="markers-container" class="markers-list">
|
||||
<!-- Markers will be added here -->
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="button-group">
|
||||
<button id="add-marker" class="btn btn-primary"><i class="fas fa-plus"></i> Add Marker</button>
|
||||
<button id="save-journey" class="btn btn-success"><i class="fas fa-save"></i> Save Journey</button>
|
||||
<button id="clear-markers" class="btn btn-danger"><i class="fas fa-trash"></i> Clear Markers</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map container -->
|
||||
<div id="map" class="map-area"></div>
|
||||
</div>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
|
||||
<!-- Custom JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,189 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Map Project</title>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#map {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.map-controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #3887be;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2c6d95;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<div class="journey-panel">
|
||||
<h3><i class="fas fa-route"></i> Journey Manager</h3>
|
||||
|
||||
<!-- Journey Form -->
|
||||
<div class="journey-form">
|
||||
<div class="form-group">
|
||||
<label for="journey-name"><i class="fas fa-heading"></i> Journey Name:</label>
|
||||
<input type="text" id="journey-name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="journey-desc"><i class="fas fa-align-left"></i> Description:</label>
|
||||
<textarea id="journey-desc"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Markers List -->
|
||||
<h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
|
||||
<div id="markers-list" class="markers-container">
|
||||
<!-- Markers will be added here -->
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="button-group">
|
||||
<button id="add-marker" class="btn btn-primary"><i class="fas fa-plus"></i> Add Marker</button>
|
||||
<button id="save-journey" class="btn btn-success"><i class="fas fa-save"></i> Save Journey</button>
|
||||
<button id="clear-markers" class="btn btn-danger"><i class="fas fa-trash"></i> Clear Markers</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize the map
|
||||
const map = L.map('map').setView([8.5, 47.3], 10);
|
||||
|
||||
// Add tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Add controls
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'map-controls';
|
||||
|
||||
// Zoom controls
|
||||
const zoomInBtn = document.createElement('button');
|
||||
zoomInBtn.className = 'btn';
|
||||
zoomInBtn.innerHTML = '+';
|
||||
zoomInBtn.addEventListener('click', () => map.zoomIn());
|
||||
|
||||
const zoomOutBtn = document.createElement('button');
|
||||
zoomOutBtn.className = 'btn';
|
||||
zoomOutBtn.innerHTML = '-';
|
||||
zoomOutBtn.addEventListener('click', () => map.zoomOut());
|
||||
|
||||
controls.appendChild(zoomInBtn);
|
||||
controls.appendChild(zoomOutBtn);
|
||||
|
||||
document.body.appendChild(controls);
|
||||
|
||||
// Add geolocation control
|
||||
const locateBtn = document.createElement('button');
|
||||
locateBtn.className = 'btn';
|
||||
locateBtn.innerHTML = '📍';
|
||||
locateBtn.addEventListener('click', () => {
|
||||
map.locate({setView: true});
|
||||
});
|
||||
|
||||
controls.appendChild(locateBtn);
|
||||
|
||||
// Marker functionality
|
||||
let markers = [];
|
||||
|
||||
document.getElementById('add-marker').addEventListener('click', () => {
|
||||
map.on('click', function(e) {
|
||||
const marker = L.marker(e.latlng, {draggable: true}).addTo(map);
|
||||
|
||||
marker.bindPopup('<input type="text" placeholder="Enter title">');
|
||||
|
||||
markers.push(marker);
|
||||
|
||||
updateMarkerList();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('clear-markers').addEventListener('click', () => {
|
||||
map.eachLayer(function(layer) {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
markers = [];
|
||||
updateMarkerList();
|
||||
});
|
||||
|
||||
function updateMarkerList() {
|
||||
const list = document.getElementById('marker-list');
|
||||
list.innerHTML = '';
|
||||
|
||||
markers.forEach((marker, index) => {
|
||||
const li = document.createElement('div');
|
||||
li.textContent = `Marker ${index + 1}: ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}`;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize with some basic markers
|
||||
map.on('ready', () => {
|
||||
const initialMarkers = [
|
||||
[8.5, 47.3],
|
||||
[48.8566, 2.3522]
|
||||
];
|
||||
|
||||
initialMarkers.forEach(lngLat => {
|
||||
const marker = L.marker(lngLat).addTo(map);
|
||||
markers.push(marker);
|
||||
});
|
||||
|
||||
updateMarkerList();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user