2022-07-22 01:17:44 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset=utf-8>
|
2022-08-07 00:17:19 -04:00
|
|
|
<title>👣 Huellas 🐾</title>
|
2022-07-22 01:17:44 -04:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
2022-12-05 00:38:36 -03:00
|
|
|
<link rel="icon" href="favicon.png" sizes="32x32">
|
2022-11-22 22:03:16 -03:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
|
|
|
|
|
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
|
2022-07-22 01:17:44 -04:00
|
|
|
crossorigin=""/>
|
2022-11-22 22:03:16 -03:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.css"
|
|
|
|
|
integrity="sha512-AiWBM2PiPZkogKBj8Jss3MahJ+bRbSMebXUBwZMg+83vJTnZT/FXoxZrmpL+x9GbAYLWRuBZDqzhDt0Dk73qhw=="
|
|
|
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
|
|
|
|
|
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
|
2022-07-22 01:17:44 -04:00
|
|
|
crossorigin=""></script>
|
2022-11-22 22:03:16 -03:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.js"
|
|
|
|
|
integrity="sha512-8sfQf8cr0KjCeN32YPfjvLU2cMvyY1lhCXTMfpTZ16CvwIzeVQtwtKlxeSqFs/TpXjKhp1Dcv77LQmn1VFaOZg=="
|
|
|
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
2022-07-22 01:17:44 -04:00
|
|
|
|
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html, body, #map {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leaflet-popup-content h3 {
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
margin-bottom: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
.leaflet-popup-content ul{
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2022-11-22 22:03:16 -03:00
|
|
|
#modal {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 400;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
background-color: rgb(0,0,0);
|
|
|
|
|
background-color: rgba(0,0,0,0.4);
|
|
|
|
|
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
#modal-form {
|
|
|
|
|
margin: 15vh auto;
|
|
|
|
|
color: #333;
|
|
|
|
|
background-color: white;
|
|
|
|
|
padding: 2em;
|
|
|
|
|
border: 1px solid rgb(25, 25, 25);
|
|
|
|
|
width: 80vw;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
}
|
|
|
|
|
#close {
|
|
|
|
|
color: #333;
|
|
|
|
|
float: right;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#close:hover,
|
|
|
|
|
#close:focus {
|
|
|
|
|
color: black;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
form {
|
|
|
|
|
display: table;
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
display: table-row;
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
display: table-cell;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
padding-right: 2em;
|
|
|
|
|
}
|
|
|
|
|
input {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
}
|
2022-07-22 01:17:44 -04:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map"></div>
|
2022-11-22 22:03:16 -03:00
|
|
|
<div id="modal">
|
|
|
|
|
<div id="modal-form">
|
|
|
|
|
<span id="close">×</span>
|
|
|
|
|
<h1>Título</h1>
|
|
|
|
|
<form>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="id"> Id:</label>
|
|
|
|
|
<input type="text" id="id" name="id" size="30" readonly>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="name"> Longitud:</label>
|
|
|
|
|
<input type="text" id="long" name="long" size="30" readonly>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="name"> Latitud:</label>
|
|
|
|
|
<input type="text" id="lat" name="lat" size="30" readonly>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="name"> Nombre:</label>
|
|
|
|
|
<input type="text" id="name" name="name" size="30">
|
|
|
|
|
<p>
|
|
|
|
|
<label for="address"> Dirección:</label>
|
|
|
|
|
<input type="text" id="address" name="address" size="30">
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="open_hours"> Horario:</label>
|
|
|
|
|
<textarea id="open_hours" name="open_hours"
|
|
|
|
|
cols="30"></textarea>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="icon"> Ícono:</label>
|
|
|
|
|
<select id="icon" name="icon">
|
|
|
|
|
<option value="bar">Bar</option>
|
|
|
|
|
<option value="coffee">Café</option>
|
|
|
|
|
<option value="cinema">Cine</option>
|
|
|
|
|
<option value="food">Comida</option>
|
|
|
|
|
<option value="jazz">Jazz</option>
|
|
|
|
|
<option value="library">Librería</option>
|
|
|
|
|
<option value="marker" selected>Marcador</option>
|
|
|
|
|
<option value="museum">Museo</option>
|
|
|
|
|
<option value="dining">Restaurant</option>
|
|
|
|
|
<option value="mask">Teatro</option>
|
|
|
|
|
<option value="shop">Tienda</option>
|
|
|
|
|
</select>
|
|
|
|
|
</p>
|
2023-03-28 02:01:09 -03:00
|
|
|
<p>
|
|
|
|
|
<label for="url"> URL:</label>
|
|
|
|
|
<input type="text" id="url" name="url" size="30">
|
|
|
|
|
</p>
|
2022-11-22 22:03:16 -03:00
|
|
|
<p>
|
|
|
|
|
<label for="description"> Descripción:</label>
|
|
|
|
|
<textarea id="description" name="description"
|
|
|
|
|
cols="30" rows="5"></textarea>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<button type="button" id="button">Enviar </button>
|
|
|
|
|
</p>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-08-01 22:21:27 -04:00
|
|
|
<script src="client.js" onload="setupMap()"></script>
|
2022-07-22 01:17:44 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
