Update app.py
Browse files
app.py
CHANGED
|
@@ -98,7 +98,7 @@ html_template = '''<!DOCTYPE html>
|
|
| 98 |
padding: 0;
|
| 99 |
}
|
| 100 |
#map {
|
| 101 |
-
height:
|
| 102 |
width: 100%;
|
| 103 |
}
|
| 104 |
h1 {
|
|
@@ -151,10 +151,41 @@ html_template = '''<!DOCTYPE html>
|
|
| 151 |
.popup-form button:hover {
|
| 152 |
background-color: #0056b3;
|
| 153 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 154 |
</style>
|
| 155 |
</head>
|
| 156 |
<body>
|
| 157 |
<h1>GeoGram</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 158 |
<div id="map"></div>
|
| 159 |
|
| 160 |
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
@@ -190,7 +221,9 @@ html_template = '''<!DOCTYPE html>
|
|
| 190 |
});
|
| 191 |
});
|
| 192 |
|
| 193 |
-
function searchMarkers(
|
|
|
|
|
|
|
| 194 |
navigator.geolocation.getCurrentPosition(function(position) {
|
| 195 |
const userLatitude = position.coords.latitude;
|
| 196 |
const userLongitude = position.coords.longitude;
|
|
@@ -221,21 +254,21 @@ html_template = '''<!DOCTYPE html>
|
|
| 221 |
})
|
| 222 |
.then(response => response.json())
|
| 223 |
.then(data => {
|
| 224 |
-
const
|
| 225 |
-
|
| 226 |
});
|
| 227 |
}
|
| 228 |
|
| 229 |
map.on('click', function(e) {
|
| 230 |
const popupContent = document.createElement('div');
|
| 231 |
-
popupContent.
|
| 232 |
|
| 233 |
const inputName = document.createElement('input');
|
| 234 |
inputName.type = 'text';
|
| 235 |
-
inputName.placeholder = 'Название
|
| 236 |
|
| 237 |
const inputDescription = document.createElement('textarea');
|
| 238 |
-
inputDescription.placeholder = 'Описание
|
| 239 |
|
| 240 |
const inputTelegram = document.createElement('input');
|
| 241 |
inputTelegram.type = 'text';
|
|
|
|
| 98 |
padding: 0;
|
| 99 |
}
|
| 100 |
#map {
|
| 101 |
+
height: 80vh;
|
| 102 |
width: 100%;
|
| 103 |
}
|
| 104 |
h1 {
|
|
|
|
| 151 |
.popup-form button:hover {
|
| 152 |
background-color: #0056b3;
|
| 153 |
}
|
| 154 |
+
#search-bar {
|
| 155 |
+
margin: 10px;
|
| 156 |
+
padding: 10px;
|
| 157 |
+
display: flex;
|
| 158 |
+
justify-content: center;
|
| 159 |
+
background-color: #f7f7f7;
|
| 160 |
+
}
|
| 161 |
+
#search-input {
|
| 162 |
+
width: 300px;
|
| 163 |
+
padding: 8px;
|
| 164 |
+
border-radius: 5px;
|
| 165 |
+
border: 1px solid #ccc;
|
| 166 |
+
}
|
| 167 |
+
#search-button {
|
| 168 |
+
padding: 8px 15px;
|
| 169 |
+
margin-left: 10px;
|
| 170 |
+
background-color: #007BFF;
|
| 171 |
+
color: white;
|
| 172 |
+
border: none;
|
| 173 |
+
border-radius: 5px;
|
| 174 |
+
cursor: pointer;
|
| 175 |
+
}
|
| 176 |
+
#search-button:hover {
|
| 177 |
+
background-color: #0056b3;
|
| 178 |
+
}
|
| 179 |
</style>
|
| 180 |
</head>
|
| 181 |
<body>
|
| 182 |
<h1>GeoGram</h1>
|
| 183 |
+
|
| 184 |
+
<div id="search-bar">
|
| 185 |
+
<input id="search-input" type="text" placeholder="Введите название или описание" />
|
| 186 |
+
<button id="search-button" onclick="searchMarkers()">Поиск</button>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
<div id="map"></div>
|
| 190 |
|
| 191 |
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
|
|
| 221 |
});
|
| 222 |
});
|
| 223 |
|
| 224 |
+
function searchMarkers() {
|
| 225 |
+
const searchTerm = document.getElementById('search-input').value;
|
| 226 |
+
|
| 227 |
navigator.geolocation.getCurrentPosition(function(position) {
|
| 228 |
const userLatitude = position.coords.latitude;
|
| 229 |
const userLongitude = position.coords.longitude;
|
|
|
|
| 254 |
})
|
| 255 |
.then(response => response.json())
|
| 256 |
.then(data => {
|
| 257 |
+
const marker = L.marker([data.latitude, data.longitude]).addTo(map);
|
| 258 |
+
marker.bindPopup(`<b>${data.name}</b><p>${data.description}</p><a href="https://t.me/${data.telegram_link}" target="_blank">Перейти в Telegram</a><br><button onclick="removeMarker(${data.id})">Удалить</button>`);
|
| 259 |
});
|
| 260 |
}
|
| 261 |
|
| 262 |
map.on('click', function(e) {
|
| 263 |
const popupContent = document.createElement('div');
|
| 264 |
+
popupContent.className = 'popup-form';
|
| 265 |
|
| 266 |
const inputName = document.createElement('input');
|
| 267 |
inputName.type = 'text';
|
| 268 |
+
inputName.placeholder = 'Название';
|
| 269 |
|
| 270 |
const inputDescription = document.createElement('textarea');
|
| 271 |
+
inputDescription.placeholder = 'Описание';
|
| 272 |
|
| 273 |
const inputTelegram = document.createElement('input');
|
| 274 |
inputTelegram.type = 'text';
|