Update app.py
Browse files
app.py
CHANGED
|
@@ -1,5 +1,6 @@
|
|
| 1 |
from flask import Flask, render_template_string, jsonify, request
|
| 2 |
import sqlite3
|
|
|
|
| 3 |
|
| 4 |
app = Flask(__name__)
|
| 5 |
|
|
@@ -46,6 +47,15 @@ def remove_marker_from_db(marker_id):
|
|
| 46 |
conn.commit()
|
| 47 |
conn.close()
|
| 48 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
# HTML-шаблон с улучшенным дизайном
|
| 50 |
html_template = '''
|
| 51 |
<!DOCTYPE html>
|
|
@@ -57,14 +67,16 @@ html_template = '''
|
|
| 57 |
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
|
| 58 |
<style>
|
| 59 |
body {
|
| 60 |
-
font-family:
|
| 61 |
-
background-color: #
|
| 62 |
margin: 0;
|
| 63 |
padding: 0;
|
|
|
|
| 64 |
}
|
| 65 |
#map {
|
| 66 |
-
height:
|
| 67 |
width: 100%;
|
|
|
|
| 68 |
}
|
| 69 |
h1 {
|
| 70 |
text-align: center;
|
|
@@ -78,7 +90,7 @@ html_template = '''
|
|
| 78 |
background-color: #fff;
|
| 79 |
border-radius: 10px;
|
| 80 |
padding: 10px;
|
| 81 |
-
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.
|
| 82 |
}
|
| 83 |
.leaflet-popup-content b {
|
| 84 |
color: #007BFF;
|
|
@@ -99,7 +111,7 @@ html_template = '''
|
|
| 99 |
width: 200px;
|
| 100 |
}
|
| 101 |
.popup-form input, .popup-form textarea {
|
| 102 |
-
padding:
|
| 103 |
margin-bottom: 10px;
|
| 104 |
border: 1px solid #ccc;
|
| 105 |
border-radius: 5px;
|
|
@@ -109,7 +121,7 @@ html_template = '''
|
|
| 109 |
background-color: #007BFF;
|
| 110 |
color: white;
|
| 111 |
border: none;
|
| 112 |
-
padding:
|
| 113 |
border-radius: 5px;
|
| 114 |
cursor: pointer;
|
| 115 |
}
|
|
@@ -123,7 +135,7 @@ html_template = '''
|
|
| 123 |
align-items: center;
|
| 124 |
}
|
| 125 |
#search-input {
|
| 126 |
-
padding:
|
| 127 |
width: 300px;
|
| 128 |
border: 1px solid #ccc;
|
| 129 |
border-radius: 5px;
|
|
@@ -131,7 +143,7 @@ html_template = '''
|
|
| 131 |
font-size: 14px;
|
| 132 |
}
|
| 133 |
#search-button {
|
| 134 |
-
padding:
|
| 135 |
background-color: #007BFF;
|
| 136 |
color: white;
|
| 137 |
border: none;
|
|
@@ -147,12 +159,13 @@ html_template = '''
|
|
| 147 |
text-align: center;
|
| 148 |
}
|
| 149 |
.result-item {
|
| 150 |
-
background:
|
| 151 |
border: 1px solid #ccc;
|
| 152 |
border-radius: 5px;
|
| 153 |
-
margin: 10px;
|
| 154 |
padding: 10px;
|
| 155 |
transition: background 0.3s;
|
|
|
|
| 156 |
}
|
| 157 |
.result-item:hover {
|
| 158 |
background: #f0f0f0;
|
|
@@ -176,11 +189,14 @@ html_template = '''
|
|
| 176 |
maxZoom: 19,
|
| 177 |
}).addTo(map);
|
| 178 |
|
|
|
|
|
|
|
|
|
|
| 179 |
// Проверка поддержки геолокации и установка центра карты на текущее местоположение пользователя
|
| 180 |
if (navigator.geolocation) {
|
| 181 |
navigator.geolocation.getCurrentPosition(function(position) {
|
| 182 |
-
|
| 183 |
-
|
| 184 |
map.setView([userLatitude, userLongitude], 13);
|
| 185 |
|
| 186 |
// Добавление маркера для местоположения пользователя
|
|
@@ -232,32 +248,31 @@ html_template = '''
|
|
| 232 |
const inputName = document.createElement('input');
|
| 233 |
inputName.type = 'text';
|
| 234 |
inputName.placeholder = 'Название метки';
|
|
|
|
| 235 |
|
| 236 |
const inputDescription = document.createElement('textarea');
|
| 237 |
inputDescription.placeholder = 'Описание метки';
|
|
|
|
| 238 |
|
| 239 |
const inputTelegram = document.createElement('input');
|
| 240 |
inputTelegram.type = 'text';
|
| 241 |
-
inputTelegram.placeholder = '
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
const
|
| 248 |
-
const
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
|
| 252 |
}
|
|
|
|
| 253 |
};
|
|
|
|
| 254 |
|
| 255 |
-
|
| 256 |
-
popupContent.appendChild(inputDescription);
|
| 257 |
-
popupContent.appendChild(inputTelegram);
|
| 258 |
-
popupContent.appendChild(button);
|
| 259 |
-
|
| 260 |
-
const popup = L.popup()
|
| 261 |
.setLatLng(e.latlng)
|
| 262 |
.setContent(popupContent)
|
| 263 |
.openOn(map);
|
|
@@ -276,7 +291,7 @@ html_template = '''
|
|
| 276 |
});
|
| 277 |
}
|
| 278 |
|
| 279 |
-
// Поиск по
|
| 280 |
document.getElementById('search-button').addEventListener('click', function() {
|
| 281 |
const searchTerm = document.getElementById('search-input').value.toLowerCase();
|
| 282 |
fetch('/get_markers')
|
|
@@ -284,6 +299,15 @@ html_template = '''
|
|
| 284 |
.then(data => {
|
| 285 |
const resultsContainer = document.getElementById('search-results');
|
| 286 |
resultsContainer.innerHTML = '';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 287 |
const results = data.filter(marker =>
|
| 288 |
marker.name.toLowerCase().includes(searchTerm) ||
|
| 289 |
marker.description.toLowerCase().includes(searchTerm)
|
|
@@ -292,7 +316,7 @@ html_template = '''
|
|
| 292 |
results.forEach(marker => {
|
| 293 |
const resultItem = document.createElement('div');
|
| 294 |
resultItem.classList.add('result-item');
|
| 295 |
-
resultItem.innerHTML = `<b>${marker.name}</b><p>${marker.description}</p><a href="https://t.me/${marker.telegram_link}" target="_blank">Перейти в Telegram</a>`;
|
| 296 |
resultsContainer.appendChild(resultItem);
|
| 297 |
});
|
| 298 |
|
|
@@ -301,6 +325,19 @@ html_template = '''
|
|
| 301 |
}
|
| 302 |
});
|
| 303 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 304 |
</script>
|
| 305 |
</body>
|
| 306 |
</html>
|
|
|
|
| 1 |
from flask import Flask, render_template_string, jsonify, request
|
| 2 |
import sqlite3
|
| 3 |
+
import math
|
| 4 |
|
| 5 |
app = Flask(__name__)
|
| 6 |
|
|
|
|
| 47 |
conn.commit()
|
| 48 |
conn.close()
|
| 49 |
|
| 50 |
+
# Вычисление расстояния между двумя точками на Земле
|
| 51 |
+
def calculate_distance(lat1, lon1, lat2, lon2):
|
| 52 |
+
R = 6371.0 # Радиус Земли в километрах
|
| 53 |
+
d_lat = math.radians(lat2 - lat1)
|
| 54 |
+
d_lon = math.radians(lon2 - lon1)
|
| 55 |
+
a = math.sin(d_lat / 2) ** 2 + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2)) * math.sin(d_lon / 2) ** 2
|
| 56 |
+
c = 2 * math.atan2(math.sqrt(a), math.sqrt(1 - a))
|
| 57 |
+
return R * c
|
| 58 |
+
|
| 59 |
# HTML-шаблон с улучшенным дизайном
|
| 60 |
html_template = '''
|
| 61 |
<!DOCTYPE html>
|
|
|
|
| 67 |
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
|
| 68 |
<style>
|
| 69 |
body {
|
| 70 |
+
font-family: 'Roboto', sans-serif;
|
| 71 |
+
background-color: #f0f4f8;
|
| 72 |
margin: 0;
|
| 73 |
padding: 0;
|
| 74 |
+
color: #333;
|
| 75 |
}
|
| 76 |
#map {
|
| 77 |
+
height: 70vh;
|
| 78 |
width: 100%;
|
| 79 |
+
margin-bottom: 20px;
|
| 80 |
}
|
| 81 |
h1 {
|
| 82 |
text-align: center;
|
|
|
|
| 90 |
background-color: #fff;
|
| 91 |
border-radius: 10px;
|
| 92 |
padding: 10px;
|
| 93 |
+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
| 94 |
}
|
| 95 |
.leaflet-popup-content b {
|
| 96 |
color: #007BFF;
|
|
|
|
| 111 |
width: 200px;
|
| 112 |
}
|
| 113 |
.popup-form input, .popup-form textarea {
|
| 114 |
+
padding: 10px;
|
| 115 |
margin-bottom: 10px;
|
| 116 |
border: 1px solid #ccc;
|
| 117 |
border-radius: 5px;
|
|
|
|
| 121 |
background-color: #007BFF;
|
| 122 |
color: white;
|
| 123 |
border: none;
|
| 124 |
+
padding: 10px;
|
| 125 |
border-radius: 5px;
|
| 126 |
cursor: pointer;
|
| 127 |
}
|
|
|
|
| 135 |
align-items: center;
|
| 136 |
}
|
| 137 |
#search-input {
|
| 138 |
+
padding: 10px;
|
| 139 |
width: 300px;
|
| 140 |
border: 1px solid #ccc;
|
| 141 |
border-radius: 5px;
|
|
|
|
| 143 |
font-size: 14px;
|
| 144 |
}
|
| 145 |
#search-button {
|
| 146 |
+
padding: 10px 20px;
|
| 147 |
background-color: #007BFF;
|
| 148 |
color: white;
|
| 149 |
border: none;
|
|
|
|
| 159 |
text-align: center;
|
| 160 |
}
|
| 161 |
.result-item {
|
| 162 |
+
background: white;
|
| 163 |
border: 1px solid #ccc;
|
| 164 |
border-radius: 5px;
|
| 165 |
+
margin: 10px auto;
|
| 166 |
padding: 10px;
|
| 167 |
transition: background 0.3s;
|
| 168 |
+
max-width: 500px;
|
| 169 |
}
|
| 170 |
.result-item:hover {
|
| 171 |
background: #f0f0f0;
|
|
|
|
| 189 |
maxZoom: 19,
|
| 190 |
}).addTo(map);
|
| 191 |
|
| 192 |
+
let userLatitude = 55.75;
|
| 193 |
+
let userLongitude = 37.61;
|
| 194 |
+
|
| 195 |
// Проверка поддержки геолокации и установка центра карты на текущее местоположение пользователя
|
| 196 |
if (navigator.geolocation) {
|
| 197 |
navigator.geolocation.getCurrentPosition(function(position) {
|
| 198 |
+
userLatitude = position.coords.latitude;
|
| 199 |
+
userLongitude = position.coords.longitude;
|
| 200 |
map.setView([userLatitude, userLongitude], 13);
|
| 201 |
|
| 202 |
// Добавление маркера для местоположения пользователя
|
|
|
|
| 248 |
const inputName = document.createElement('input');
|
| 249 |
inputName.type = 'text';
|
| 250 |
inputName.placeholder = 'Название метки';
|
| 251 |
+
popupContent.appendChild(inputName);
|
| 252 |
|
| 253 |
const inputDescription = document.createElement('textarea');
|
| 254 |
inputDescription.placeholder = 'Описание метки';
|
| 255 |
+
popupContent.appendChild(inputDescription);
|
| 256 |
|
| 257 |
const inputTelegram = document.createElement('input');
|
| 258 |
inputTelegram.type = 'text';
|
| 259 |
+
inputTelegram.placeholder = 'Telegram-ссылка';
|
| 260 |
+
popupContent.appendChild(inputTelegram);
|
| 261 |
+
|
| 262 |
+
const submitButton = document.createElement('button');
|
| 263 |
+
submitButton.textContent = 'Добавить метку';
|
| 264 |
+
submitButton.onclick = function() {
|
| 265 |
+
const name = inputName.value;
|
| 266 |
+
const description = inputDescription.value;
|
| 267 |
+
const telegram_link = inputTelegram.value;
|
| 268 |
+
if (name && description && telegram_link) {
|
| 269 |
+
addMarker(name, description, telegram_link, e.latlng);
|
| 270 |
}
|
| 271 |
+
map.closePopup();
|
| 272 |
};
|
| 273 |
+
popupContent.appendChild(submitButton);
|
| 274 |
|
| 275 |
+
L.popup()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 276 |
.setLatLng(e.latlng)
|
| 277 |
.setContent(popupContent)
|
| 278 |
.openOn(map);
|
|
|
|
| 291 |
});
|
| 292 |
}
|
| 293 |
|
| 294 |
+
// Поиск и сортировка по расстоянию до пользователя
|
| 295 |
document.getElementById('search-button').addEventListener('click', function() {
|
| 296 |
const searchTerm = document.getElementById('search-input').value.toLowerCase();
|
| 297 |
fetch('/get_markers')
|
|
|
|
| 299 |
.then(data => {
|
| 300 |
const resultsContainer = document.getElementById('search-results');
|
| 301 |
resultsContainer.innerHTML = '';
|
| 302 |
+
|
| 303 |
+
// Вычисление расстояния до каждого маркера
|
| 304 |
+
data.forEach(marker => {
|
| 305 |
+
marker.distance = calculateDistance(userLatitude, userLongitude, marker.latitude, marker.longitude);
|
| 306 |
+
});
|
| 307 |
+
|
| 308 |
+
// Сортировка по расстоянию
|
| 309 |
+
data.sort((a, b) => a.distance - b.distance);
|
| 310 |
+
|
| 311 |
const results = data.filter(marker =>
|
| 312 |
marker.name.toLowerCase().includes(searchTerm) ||
|
| 313 |
marker.description.toLowerCase().includes(searchTerm)
|
|
|
|
| 316 |
results.forEach(marker => {
|
| 317 |
const resultItem = document.createElement('div');
|
| 318 |
resultItem.classList.add('result-item');
|
| 319 |
+
resultItem.innerHTML = `<b>${marker.name}</b><p>${marker.description}</p><p>Расстояние: ${marker.distance.toFixed(2)} км</p><a href="https://t.me/${marker.telegram_link}" target="_blank">Перейти в Telegram</a>`;
|
| 320 |
resultsContainer.appendChild(resultItem);
|
| 321 |
});
|
| 322 |
|
|
|
|
| 325 |
}
|
| 326 |
});
|
| 327 |
});
|
| 328 |
+
|
| 329 |
+
// Вычисление расстояния между двумя координатами
|
| 330 |
+
function calculateDistance(lat1, lon1, lat2, lon2) {
|
| 331 |
+
const R = 6371; // Радиус Земли в км
|
| 332 |
+
const dLat = (lat2 - lat1) * Math.PI / 180;
|
| 333 |
+
const dLon = (lon2 - lon1) * Math.PI / 180;
|
| 334 |
+
const a =
|
| 335 |
+
0.5 - Math.cos(dLat)/2 +
|
| 336 |
+
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
| 337 |
+
(1 - Math.cos(dLon)) / 2;
|
| 338 |
+
|
| 339 |
+
return R * 2 * Math.asin(Math.sqrt(a));
|
| 340 |
+
}
|
| 341 |
</script>
|
| 342 |
</body>
|
| 343 |
</html>
|