forked from OSM-Catalan/cobertura112cat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (126 loc) · 5.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>OSM-ES: Puntos de Cobertura del 112</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<style media="screen">
#mapid { height: 600px; }
</style>
</head>
<body>
<div class="container">
<h1>OSM-ES: Puntos de Cobertura del 112</h1>
Datos extraídos de OpenStreetMap . Los puntos aquí localizados no han sido comprobados por esta página personalmente. Uso a título informativo y bajo vuestra responsabilidad.
<div id="mapid"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="assets/js/osmtogeojson.js" charset="utf-8"></script>
<script type="text/javascript">
var mymap;
var geoLayer;
var setupMap = function () {
//localización de inicio [lat,lon] ,zoom de inicio)
mymap = L.map('mapid').setView([41.2221000, 1.7248700], 13);
//fondo de mapa que se utilizará. Encontrarás más buscando Leaflet providers Demo
var osmUrl='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
//Atribución correcta, importante para usar mapas libres y marcar el origen de los datos
var osmAttrib='Datos del mapa: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Estilo de mapa: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)';
//Zoom mínimo, Zoom máximo
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib});
mymap.addLayer(osm);
geoLayer = L.geoJson().addTo(mymap);
};
var getData = function () {
var query = `
//////////////EMPIEZA PETICIÓN OVERPASS TURBO, sirve para internamente encontrar los puntos que queramos destacar
//Tiempo de espera, antes de dar por fallido, para muchos datos tiempos más largos
[out:json][timeout:60];
// Definimos España, este límite se puede encontrar exportando la búsqueda "in Spain" hecha por el asistente de Overpass-turbo. Se puede buscar cualquier localización y al exportar la petición nos dará el código de área.
area(3601311341)->.searchArea;
(
// tipo de petición nodo["clave"="valor]
node["emergency"](area.searchArea);
// Una segunda petición
// node["traffic_sign:backward"](area.searchArea);
//Final de peticiones
);
/////////////ACABA PETICIÓN OVERPASS TURBO
(._;>;);out;
`;
//query = "data=[out:json];way[building=residential](41.878660,12.562383,41.883125,12.571663);(._;>;);out;";
$.ajax({
data: query,
type: 'post',
dataType: 'json',
url: 'https://overpass-api.de/api/interpreter',
success: function(json) {
mymap.removeLayer(geoLayer);
var geojson = osmtogeojson(json);
geoLayer = L.geoJson(geojson, {
filter: function (feature, layer) {
return feature.properties.type === "node";
},
pointToLayer: function(feature, latlng) {
//console.log(feature);
var icon = null;
////////INICIO CÓDIGO DIBUJO DE LOS PUNTOS////////////////////
//var icon_nombredelavariablesincaracteresraros = 'direcciónURL';
var icon_112 = 'https://osm-es.github.io/cobertura112es/assets/img/pal_cobertura.png';
//etiqueta entre claudátors [ ] i == valor
if (feature.properties.tags['emergency'] == "access_point") {
icon = L.icon({
//tamaño del icono
iconSize: [25, 39],
//colocación del icono desde donde está situado el punto
iconAnchor: [8, 0],
popupAnchor: [1, -24],
// corresponde al nombre de la variable anterior
iconUrl: icon_112
});
// un segundo icono, y cumpliendo dos pares etiqueta=valor
//etiqueta entre claudátors [ ] i == valor && "segunda clave=segundovalor") {
// } else if (feature.properties.tags['traffic_sign:backward'] == "ES:B2a" && "side=right") {
// icon = L.icon({
// iconSize: [16, 16],
// iconAnchor: [8, 0],
// popupAnchor: [1, -24],
// iconUrl: icon_ES_B2a
// });
// final de todos los valores y claves
}
///////////////////////////////////////////////////////////////////////////////
if (icon) {
return L.marker(latlng, {icon: icon});
}
},
onEachFeature: function (feature, layer) {
if (feature.properties.tags.name) {
layer.bindPopup(feature.properties.tags.name);
}
}
}).addTo(mymap);
mymap.fitBounds( geoLayer.getBounds() );
//geoList.reload( geoLayer );
},
error: function (xhr, status, data) {
console.log(xhr, status, data);
}
});
};
$(document).ready(function () {
setupMap();
getData();
});
</script>
</body>
</html>