-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
759 lines (565 loc) · 48.6 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Despliega tu mapa</title>
<link rel="shortcut icon" href="images/deploy-your-map.svg" type="image/x-icon" />
<link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="js/prism.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.0/dist/leaflet.markercluster.js"></script>
<script type="text/javascript" src="js/bicycle-parkings.js"></script>
</head>
<body>
<header>
<div id="header_map">
<h1>Despliega tu mapa<h1>
<h2>Tutorial básico de Leaflet</h2>
</div>
</header>
<nav>
<p class="small">
<a href="#deploy-a-basic-map">Desplegar un mapa básico</a> |
<a href="#deploy-a-multilayer-basic-map">Desplegar un mapa básico multicapa</a> |
<a href="#add-a-standard-marker">Añadir un marcador estándar</a> |
<a href="#add-a-custom-marker">Añadir un marcador personalizado</a> |
<a href="#add-a-standard-popup">Añadir una ventana emergente estándar</a> |
<a href="#add-a-custom-popup">Añadir una ventana emergente personalizada</a> |
<a href="#add-geometric-shapes">Añadir formas geométricas</a> |
<a href="#add-a-data-layer">Añadir una capa de datos</a> |
<a href="#add-a-data-layer-from-an-external-file">Añadir una capa de datos a partir de un archivo externo</a> |
Modificar las propiedades del mapa (no publicado)
</nav>
<div class="section" id="intro">
<p>Tutorial dirigido a personas sin experiencia en programación que desean hacer uso de la <a href="http://leafletjs.com" target="blanck">biblioteca JavaScript de Leaflet</a> para desplegar sus propios mapas.</p>
<p>Para seguir el tutorial solo necesitarás un ordenador, un navegador web y un editor de texto simple. Usaremos los lenguajes de programación <a href="https://es.wikipedia.org/wiki/HTML" target="blanck">HTML</a>, <a href="https://es.wikipedia.org/wiki/CSS" target="blanck">CSS</a> y <a href="https://es.wikipedia.org/wiki/JavaScript" target="blanck">JavaScript</a> (JavaScript de Leaflet).</p>
<p>Los contenidos se estructuran en base a una serie de ejemplos prácticos que proporcionan todo el código necesario. También se incluyen unas breves explicaciones sobre cada nuevo fragmento de código introducido respecto a ejemplos anteriores. No deberías tener especiales dificultades para poder seguirlos, reproducirlos o adaptarlos a tus necesidades.</p>
<p>Los ejemplos propuestos podrán ampliarse o modificarse eventualmente en el futuro. Consulta el <a href="https://github.com/dcapillae/despliega-tu-mapa" target="blanck">repositorio del tutorial en GitHub</a> para más detalles.</p>
</div>
<!--Desplegar un mapa básico-->
<div class="section" id="deploy-a-basic-map">
<h2>Desplegar un mapa básico</h2>
<p>Este primer ejemplo muestra cómo desplegar un mapa básico como el que se muestra a continuación.</p>
<p class="small" align="right"><em><a href="examples/deploy-a-basic-map.html">Ver este ejemplo y su código fuente en una ventana independiente</a></a></em></p>
<div id="basic_map" class="map"></div>
<p>Para desplegar un mapa como éste, vamos a necesitar lo siguiente:</li>
<ol>
<li>Crear un documento HTML donde publicar el mapa</li>
<li>Referenciar la hoja de estilos y el archivo JavaScript de Leaflet</li>
<li>Definir un elemento contenedor para el mapa en nuestra página web</li>
<li>Escribir unas pocas líneas de código JavaScript para desplegar el mapa</li>
</ol>
<div class="section">
<h3>1. Creación de un documento HTML</h3>
<p>Abre tu editor de texto y crea un documento nuevo con extensión "html". Añade al documento el siguiente código de marcado con la estructura mínima de una página web:</p>
<pre><code class="language-markup">
<!DOCTYPE html>
<html>
<head>
<title>Desplegar un mapa básico</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
</code></pre>
</div>
<div class="section">
<h3>2. Referenciar los archivos de estilos y JavaScript de Leaflet</h3>
<p>Nuestro documento HTML está vacío. Vamos a empezar a rellenarlo introduciendo las referencias a la hoja de estilos y el archivo JavaScript de Leaflet. Las referencias a estos archivos son indispensables para poder desplegar un mapa interactivo en nuestra página.</p>
<p>Podemos hacer uso del sitio web oficial de Leaflet para referenciar estos archivos o descargar una copia de los mismos y guardarlos en nuestro equipo para referenciarlos localmente. En este ejemplo haremos uso de los archivos alojados en el sitio web de Leaflet.</p>
<p>Para referenciar la hoja de estilo y el archivo JavaScript de Leaflet, introduce el siguiente código en la sección <head> del documento HTML:</p>
<pre><code class="language-markup">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</code></pre>
</div>
<div class="section">
<h3>3. Añadir un contenedor del mapa y establecer sus estilos</h3>
<p>Leaflet necesita que definamos un elemento <div> en nuestro documento HTML donde colocar el mapa, y que ese elemento <div> tenga una altura fija establecida. Este elemento <div> será nuestro contenedor del mapa.</p>
<p>Crearemos un elemento <div> y lo identificaremos como "map" para definir nuestro contenedor. Para ello, añade lo siguiente en la sección <body> del documento HTML:</p>
<pre><code class="language-markup">
<div id="map"></div>
</code></pre>
<p>Ahora vamos a establecer los estilos de nuestro contenedor haciendo uso del lenguaje CSS. Fijaremos su anchura en 960 píxeles y su altura en 500 píxeles. Añade lo siguiente entre las etiquetas <style> de la sección <head> del documento HTML:</p>
<pre><code class="language-markup">
#map {
width: 960px;
height: 500px;
}
</code></pre>
<p>Ya hemos configurado un contenedor para el mapa y hemos establecido sus estilos. Ahora vamos a escribir algo de código JavaScript para desplegar un mapa web interactivo que colocaremos en el contenedor recién definido.</p>
</div>
<div class="section">
<h3>4. Inicializar el mapa</h3>
<p>La secuencia de comandos que escribiremos a continuación permite solicitar a un proveedor de teselas el juego de teselas que deseamos mostrar en nuestro mapa, así como establecer los valores iniciales del mismo.</p>
<p>Introduce el siguiente código JavaScript entre las etiquetas <script> del documento HTML:</p>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.720, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
</script>
</code></pre>
<p>En primer lugar, el código crea una variable 'map' a la que asigna un objeto mapa mediante la función <a href="http://leafletjs.com/reference.html#map-constructor" target="blanck">L.map</a> e identifica el elemento <div> que contendrá dicho mapa (en nuestro caso, el elemento <div> identificado como 'map'). Luego configura algunas opciones que sirven para ajustar el punto central y el nivel de zum iniciales del mapa.</p>
<p>En segundo lugar, el código crea un nuevo objeto (una capa de teselas) mediante la función <a href="http://leafletjs.com/reference.html#tilelayer" target="blanck">L.tileLayer</a>, especificando el juego de teselas a cargar y proporcionando la correspondiente información de atribución a través de la opción 'attribution'. En nuestro caso, hemos usado teselas de <a href="http://www.openstreetmap.org" target="blanck">OpenStreetMap</a>, aunque hay muchos otros <a href="https://leaflet-extras.github.io/leaflet-providers/preview/index.html" target="blanck">proveedores de teselas libres</a> que puedes utilizar. Prueba con un juego de teselas diferente y no olvides proporcionar siempre la correspondiente información de atribución, tanto de los datos del mapa como de las teselas de imágenes.
<p>Por último, el código emplea el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a> para añadir la capa de teselas al mapa identificado por la variable 'map'.
<p>Nuestro ejemplo ya está completo. Hemos creado un documento HTML, referenciado los archivos de Leaflet, añadido un contenedor para el mapa, definido los estilos del contenedor e inicializado el mapa. El contenido del archivo HTML definitivo debería aparecer tal que así:</p>
<pre><code class="language-markup">
<!DOCTYPE html>
<html>
<head>
<title>Desplegar un mapa básico</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map {
width: 960px;
height:500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([36.720, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
</script>
</body>
</html>
</code></pre>
<p>Comprueba que tu código esté bien escrito, guarda el documento HTML y ábrelo con un navegador web. Deberías poder ver un mapa centrado en la ciudad de Málaga. Deslízate por él y prueba a ampliar o reducir la vista. ¡Enhorabuena! Acabas de desplegar tu primer mapa web interactivo usando la biblioteca JavaScript de Leaflet.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Desplegar un mapa básico multicapa-->
<div class="section" id="deploy-a-multilayer-basic-map">
<h2>Desplegar un mapa básico multicapa</h2>
<p>Este ejemplo muestra cómo desplegar un <a href="#deploy-a-basic-map">mapa básico</a> multicapa. Un mapa básico multicapa permite seleccionar de forma interactiva el juego de teselas que deseamos mostrar en cada momento a partir de las capas de teselas disponibles.</p>
<p class="small" align="right"><em><a href="examples/deploy-a-multilayer-basic-map.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="mlb_map" class="map"></div>
<pre><code class="language-markup">
<script>
var osmcarto = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}),
osmhumanitarian = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: 'Datos \u00a9 <a href="http://www.openstreetmap.org">' +
'Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright">ODbL</a>) | Teselas \u00a9 <a href="https://github.com/hotosm/HDM-CartoCSS">Humanitarian HDM CartoCSS</a> (<a href="https://github.com/hotosm/HDM-CartoCSS/blob/master/LICENCE.txt" target="blanck">CC0 1.0</a>)'
}),
pnoa = L.tileLayer.wms("http://www.ign.es/wms-inspire/pnoa-ma?SERVICE=WMS&", {
layers: "OI.OrthoimageCoverage",
transparent: true,
format: 'image/jpeg',
version: '1.3.0',
attribution: 'Ortofotos <a href="http://www.scne.es/productos.html#OrtoPNOA" target="blanck">PNOA</a> \u00a9 <a href="http://www.ign.es" target="blanck">Instituto Geográfico Nacional de España</a> (<a href="https://creativecommons.org/licenses/by/4.0/legalcode.es" target="blanck">CC BY 4.0</a>)'
});
var map = L.map('map', {
center: [36.722, -4.420],
zoom: 15,
layers: [osmcarto]
});
var baseLayers = {
"Callejero (OSM)": osmcarto,
"Humanitario (OSM)": osmhumanitarian,
"Ortofotos (IGN)": pnoa
};
L.control.layers(baseLayers).addTo(map);
</script>
</pre></code>
<p>El código crea tres capas de teselas, 'osmcarto', 'osmhumanitarian' y 'pnoa', las dos primeras mediante la función <a href="https://leafletjs.com/reference-1.6.0.html#tilelayer" target="blanck">L.tilelayer()</a> y la tercera mediante la función <a href="https://leafletjs.com/reference-1.6.0.html#tilelayer-wms" target="blanck">L.tilelayer.wms()</a>, que permite crear una capa de teselas a partir de un servicio WMS. Se consigna la información de atribución correspondiente a cada capa y algunas opciones adicionales facilitadas por el proveedor WMS.
<p>Se crea un objeto mapa y se asigna al contenedor 'map', estableciendo su punto central y nivel de zum iniciales, así como la capa de teselas a mostrar de forma predeterminada, la capa 'osmcarto'. A continuación se identifican las capas base (capas mutuamente excluyentes) creando la variable 'baseLayers'. También es posible agrupar varias capas o mostrar capas superpuestas (no excluyentes): para saber más, consulta <a href="https://leafletjs.com/examples/layers-control/" target="blanck">este ejemplo</a> en la página de Leaflet.</p>
<p>Por último, se crea un control de capas mediante la función <a href="https://leafletjs.com/reference-1.6.0.html#control-layers-l-control-layers" target="blanck">L.control.layers</a>, tomando como opción la variable 'baseLayers', y se añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir un marcador estándar-->
<div class="section" id="add-a-standard-marker">
<h2>Añadir un marcador estándar</h2>
<p>Este ejemplo añade un marcador estándar a nuestro <a href="#deploy-a-basic-map">mapa básico</a>.</p>
<p class="small" align="right"><em><a href="examples/add-a-standard-marker.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="sm_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.720, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var marker = L.marker([36.7204,-4.4150]).addTo(map);
</script>
</code></pre>
<p>El código crea una variable 'marker' a la que asigna un objeto marcador mediante la función <a href="https://leafletjs.com/reference-1.6.0.html#marker" target="blanck">L.marker()</a>, que toma como valores las coordenadas geográficas del punto. El marcador se añade al mapa con el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
<p>Ten en cuenta que puedes añadir uno o más marcadores al mapa siguiendo este mismo procedimiento. Prueba a añadir un segundo marcador creando una segunda variable 'marker2', por ejemplo, y sitúalo en otra posición del mapa para ver el resultado.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir un marcador personalizado-->
<div class="section" id="add-a-custom-marker">
<h2>Añadir un marcador personalizado</h2>
<p>Este ejemplo añade un marcador personalizado al <a href="#deploy-a-basic-map">mapa básico</a>. El marcador personalizado será un icono de nuestra elección.</p>
<p class="small" align="right"><em><a href="examples/add-a-custom-marker.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="cm_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.720, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var photoIcon = L.icon({
iconUrl: 'photo.svg',
iconSize: [38, 95],
});
var marker = L.marker([36.7204,-4.4150], {icon: photoIcon}).addTo(map);
</script>
</code></pre>
<p>El código crea una variable 'photoIcon' y le asigna como valor un icono mediante la función <a href="https://leafletjs.com/reference-1.6.0.html#icon" target="blanck">L.icon()</a>, especificando las siguientes opciones del mismo:
<ul>
<li>iconUrl: la dirección URL de la imagen que usaremos como icono</li>
<li>iconSize: el tamaño del icono</li>
</ul>
<p>La variable ‘photoIcon’ se emplea luego en la opción ‘icon’ de la función <a href="https://leafletjs.com/reference-1.6.0.html#marker" target="blanck">L.marker()</a> para añadir un marcador con nuestro icono personalizado al mapa.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir una ventana emergente estándar-->
<div class="section" id="add-a-standard-popup">
<h2>Añadir una ventana emergente estándar</h2>
<p>Este ejemplo añade al <a href="#deploy-a-basic-map">mapa básico</a> una ventana emergente estándar vinculada a un marcador personalizado. La ventana aparece al hacer clic sobre el marcador.</p>
<p class="small" align="right"><em><a href="examples/add-a-standard-popup.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="sp_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.720, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var photoIcon = L.icon({
iconUrl: '../images/photo.svg'',
iconSize: [38, 95],
});
L.marker([36.7204,-4.4150], {icon: photoIcon}).bindPopup('Ayuntamiento de Málaga').addTo(map);
</script>
</code></pre>
<p>El código hace aparecer una ventana emergente al hacer clic sobre el marcador usando el método <a href="https://leafletjs.com/reference-1.6.0.html#marker-bindpopup" target="blanck">bindPopup()</a>. Una alternativa al código anterior sería:</p>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.720, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var photoIcon = L.icon({
iconUrl: 'photo.svg',
iconSize: [38, 95],
});
var marker = L.marker([36.7204,-4.4150], {icon: photoIcon}).addTo(map);
marker.bindPopup('Ayuntamiento de Málaga');
</script>
</code></pre>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir una ventana emergente personalizada-->
<div class="section" id="add-a-custom-popup">
<h2>Añadir una ventana emergente personalizada</h2>
<p>Este ejemplo añade contenido HTML y algunos estilos adicionales a una ventana emergente vinculada a un marcador personalizado sobre un <a href="#deploy-a-basic-map">mapa básico</a>. La ventana aparece al hacer clic sobre el marcador.</p>
<p class="small" align="right"><em><a href="examples/add-a-custom-popup.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="cp_map" class="map"></div>
<pre><code class="language-markup">
<style>
#map {
width: 960px;
height:500px;
}
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
background: #e60000;
color: #ffffff;
}
</style>
</code></pre>
<p>Este código CSS se añade a la sección <head> del archivo HTML y sirve para definir el estilo de la clase 'custom' que usaremos posteriormente en nuestro código.</p>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var photoIcon = L.icon({
iconUrl: 'photo.svg',
iconSize: [38, 95],
popupAnchor: [0,-15]
});
var customPopup = "<img src='../images/malaga-city-hall.jpg' alt='Ayuntamiento de Málaga' width='200px'/><br/>Ayuntamiento de Málaga. Fuente: Wikimedia Commons, imagen de Daniel Capilla (CC BY-SA 2.0).";
var customOptions = {
'maxWidth': '200',
'className' : 'custom'
}
var marker = L.marker([36.7204,-4.4150], {icon: photoIcon}).bindPopup(customPopup, customOptions).addTo(map);
</script>
</code></pre>
<p>En primer lugar, el código añade una opción <a href="https://leafletjs.com/reference-1.6.0.html#icon-popupanchor" target="blanck">'popupAnchor'</a> al icono. Esta opción permite establecer unos valores relativos de desplazamiento de la ventana emergente respecto del punto en el que se encuentra el marcador de manera tal que el icono del marcador resulte más visible.</p>
<p>Luego se crea la variable ‘customPopup’ y se le asigna algo de contenido HTML.</p>
<p>A continuación se crea la variable ‘customOptions’ y se configuran unas cuantas opciones, como el ancho máximo de la ventana emergente ('maxWidth') y sus estilos, asignando el nombre de clase 'custom' para que se apliquen a la ventana los estilos CSS personalizados de esa clase.
<p>Ten en cuenta que el ancho máximo predeterminado de una ventana emergente es de 300 píxeles. Si el contenido de tu ventana emergente desborda ese ancho, asegúrate de asignarle un valor adecuado cambiando la opción 'maxWidth' para adaptar el ancho al contenido.</p>
<p>Finalmente, el código emplea el método <a href="https://leafletjs.com/reference-1.6.0.html#marker-bindpopup" target="blanck">bindPopup</a> para vincular la ventana emergente al marcador, tomando como argumentos el contenido HTML y las opciones antes definidas. También las variables creadas previamente se consignan según este método.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir formas geométricas-->
<div class="section" id="add-geometric-shapes">
<h2>Añadir formas geométricas</h2>
<p>Los siguientes ejemplos muestran como añadir algunas formas geométricas al <a href="#deploy-a-basic-map">mapa básico</a>. Aprenderemos a añadir un <a href="#add-a-circle">círculo</a>, un <a href="#add-a-rectangle">rectángulo</a>, un <a href="#add-a-polygon">polígono</a> y una <a href="#add-a-polyline">polilínea</a>.</p>
<div class="section" id="add-a-circle">
<h3>Añadir un círculo</h3>
<p>Este ejemplo añade al <a href="#deploy-a-basic-map">mapa básico</a> un círculo a partir de su centro y su radio.</p>
<p class="small" align="right"><em><a href="examples/add-a-circle.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="circle_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
L.circle([36.722, -4.420], 300,{color:'blue', opacity:1, fillColor: 'blue', fillOpacity:.4}).addTo(map);
</script>
</code></pre>
<p>El código hace uso de la función <a href="https://leafletjs.com/reference-1.6.0.html#circle" target="blanck">L.circle()</a> para crear un círculo a partir de su centro y su radio, además de ajustar otras opciones de estilo, como el color del borde, el color de relleno o sus respectivas opacidades. El círculo se añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
</div>
<div class="section" id="add-a-rectangle">
<h3>Añadir un rectángulo</h3>
<p>Este ejemplo añade al <a href="#deploy-a-basic-map">mapa básico</a> un rectángulo a partir de dos de sus vértices.</p>
<p class="small" align="right"><em><a href="examples/add-a-rectangle.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="rectangle_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var bounds = [[36.725, -4.425], [36.720, -4.415]];
L.rectangle(bounds, {color: "purple", weight: 2}).addTo(map);
</script>
</code></pre>
<p>El código define una variable 'bounds' con los puntos que delimitan las dimensiones del rectángulo, sus vértices superior izquierdo e inferior derecho. El código hace uso de la función <a href="https://leafletjs.com/reference-1.6.0.html#rectangle" target="blanck">L.rectangle()</a> para crear el rectángulo y ajusta además otras opciones de estilo, como el color del mismo o el ancho de su borde. Finalmente, lo añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
</div>
<div class="section" id="add-a-polygon">
<h3>Añadir un polígono</h3>
<p>Este ejemplo añade al <a href="#deploy-a-basic-map">mapa básico</a> un polígno a partir de la posición de sus vértices.</p>
<p class="small" align="right"><em><a href="examples/add-a-polygon.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="polygon_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var area = [[36.728, -4.425],[36.718, -4.425],[36.722, -4.415]];
L.polygon(area,{color:'green',opacity:.6}).addTo(map);
</script>
</code></pre>
<p>El código define una variable 'area' con los vértices del polígono. Esta variable se utiliza después en la función <a href="https://leafletjs.com/reference-1.6.0.html#polygon" target="blanck">L.polygon()</a> para crear el polígono, ajustando además otras opciones de estilo, como el color del mismo o su opacidad. El polígono se añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
</div>
<div class="section" id="add-a-polyline">
<h3>Añadir una polilínea</h3>
<p>Este ejemplo añade al <a href="#deploy-a-basic-map">mapa básico</a> una polilínea a partir de los puntos que definen su trazado.</p>
<p class="small" align="right"><em><a href="examples/add-a-polyline.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="polyline_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var track = [[36.7205, -4.4130],[36.7165, -4.4260],[36.7218, -4.4250],[36.7230, -4.4240],[36.7240, -4.4220],[36.7250, -4.4220],[36.7270, -4.4240],[36.7270, -4.4250],[36.7270, -4.4270],[36.7280, -4.4300]];
L.polyline(track,{color:'red',opacity:1}).addTo(map);
</script>
</code></pre>
<p>El código define una variable 'track' con los puntos que determinan el trazado de la polilínea. Esta variable se utiliza después en la función <a href="https://leafletjs.com/reference-1.6.0.html#polyline" target="blanck">L.polyline()</a> para crear la polilínea, ajustando además otras opciones de estilo, como el color de la misma o su opacidad. La polilínea se añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir una capa de datos-->
<div class="section" id="add-a-data-layer">
<h2>Añadir una capa de datos</h2>
<p>Este ejemplo despliega un <a href="#deploy-a-basic-map">mapa básico</a> que muestra una capa de datos GeoJSON codificados como una variable.</p>
<p class="small" align="right"><em><a href="examples/add-a-data-layer.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="dl_map" class="map"></div>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var historic_features = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[-4.42428,36.71802],
[-4.42352,36.71829],
[-4.42388,36.71878],
[-4.42461,36.71845]
]]
},
"properties": {
"Nombre": "Mercado de Atarazanas",
"Descripción": "Mercado municipal central"
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-4.41942,
36.72007
]
},
"properties":{
"Nombre": "Catedral de Málaga",
"Descripción": "Principal templo cristiano de la ciudad"
}
},{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-4.42515, 36.72056],
[-4.42506, 36.72081],
[-4.42512, 36.72144],
[-4.42409, 36.72291],
[-4.42345, 36.72343],
[-4.42076, 36.72437]
]
},
"properties": {
"Nombre": "Calle Carretería",
"Descripción": "Calle del Centro Histórico"
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-4.41569,
36.72132
]
},
"properties": {
"Nombre": "Alcazaba",
"Descripción": "Fortificación palaciega medieval"
}
}]
};
L.geoJson(historic_features, {
onEachFeature: function(feature,layer) {
layer.bindPopup(feature.properties.Nombre);
}
}).addTo(map)
</script>
</code></pre>
<p>El código define una variable 'historic_features' que contiene el conjunto de datos GeoJSON. La capa de datos se crea a través de una instancia de la clase <a href="https://leafletjs.com/reference-1.7.1.html#geojson" target="blanck">L.geoJson()</a>, que toma la variable 'historic_features' como parámetro y la añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>.</p>
<p>La opción 'onEachFeature' de la capa de datos es opcional. Se usa para enlazar una ventana emergente a cada característica para que muestre el valor de una propiedad, en el ejemplo, la propiedad 'Nombre'. Se puede seleccionar cualquiera de las propiedades de una característica incluida en el conjunto de datos mediante 'feature.properties.<em>nombre-de-la-propiedad</em>'.</p>
<p>Aunque es habitual que un archivo GeoJSON contenga solo un tipo de elemento geográfico (puntos, líneas o polígonos), esto no es un requisito. Se pueden introducir datos GeoJSON con múltiples geometrías y datos descriptivos asociados a ellas en el código fuente.</p>
<p>Para mostrar datos con diferentes geometrías, será necesario especificar el tipo de geometría y las coordenadas apropiadas de cada elemento. Una cadena lineal debe incluir al menos dos puntos. Los polígonos no necesitan cerrarse sobre sí mismos, es decir, no es necesario incluir las coordenadas del punto inicial al final de la lista de coordenadas.</p>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<!--Añadir una capa de datos a partir de un archivo externo-->
<div class="section" id="add-a-data-layer-from-an-external-file">
<h2>Añadir una capa de datos a partir de un archivo externo</h2>
<p>Este ejemplo despliega un <a href="#deploy-a-basic-map">mapa básico</a> que muestra una capa de datos a partir de un archivo GeoJSON externo. Aunque en este ejemplo emplearemos un archivo GeoJSON con un único tipo de geometría (puntos), esto no es un requisito. Se puede trabajar con archivos GeoJSON que incluyan múltiples geometrías (puntos, líneas o polígonos).</p>
<p class="small" align="right"><em><a href="examples/add-a-data-layer-from-an-external-file.html">Ver este ejemplo y su código fuente en una ventana independiente</a></em></p>
<div id="pl_map" class="map"></div>
<div class="section">
<h3>Método directo para añadir los datos al mapa</h3>
<p>Los datos se encuentran inicialmente en forma de un archivo GeoJSON de nombre '<a href="data/bicycle-parkings.geojson" target="blanck">bicycle-parkings.geojson</a>'. El archivo contiene información relativa a la ubicación de los estacionamientos de bicicleta disponibles en Málaga.</p>
<p>Para importar estos datos al mapa, tendremos que codificarlos como una variable (en nuestro caso, la variable 'data'). Para hacer esto, abrimos el archivo GeoJSON con un editor de texto simple e incluimos lo siguiente como primera línea del archivo:</a>
<pre><code class="language-markup">var data =</code></pre>
<p>A continuación, referenciamos el archivo de datos en nuestro documento HTML introduciendo el siguiente código en la sección <head> del documento:</p>
<pre><code class="language-markup">
<script src="bicycle-parkings.geojson"></script>
</code></pre>
<p>Este archivo podría añadirse al mapa directamente como una capa de datos a través de una instancia de la clase <a href="https://leafletjs.com/reference-1.7.1.html#geojson" target="blanck">L.geoJson()</a>, que toma la variable 'data' como parámetro y la añade al mapa usando el método <a href="https://leafletjs.com/reference-1.6.0.html#control-addto" target="blanck">addTo()</a>. El resultado puede verse <a href="examples/add-a-data-layer-from-an-external-file-without-customizing.html" id="add-a-data-layer-from-an-external-file-without-customizing">aquí</a>.</p>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
L.geoJson(data).addTo(map);
</script>
</code></pre>
<p>No obstante, en este ejemplo no añadiremos los datos directamente al mapa. El inconveniente de cargar así los datos es que, cuando nuestra capa de datos incluye gran número de puntos o marcadores, estos se superpongan unos con otros. La usabilidad del mapa en ese caso se verá notablemente afectada, ya que cuando hay muchos puntos juntos, resulta casi imposible saber en qué marcador particular estamos haciendo clic.</p>
</div>
<div class="section">
<h3>Agrupación de marcadores</h3>
<p>Para resolver el problema de la superposición, emplearemos la agrupación de marcadores, un mecanismo mediante el cual los puntos cercanos se agrupan bajo un único marcador que incluye además un indicador con la cantidad de puntos agrupados. Esta funcionalidad no está incluida en la biblioteca de Leaflet de forma predeterminada, debemos incorporarla mediante una extensión externa.</p>
<p>En este ejemplo emplearemos la extensión <a href="https://github.com/Leaflet/Leaflet.markercluster" target="blanck">Leaflet.markercluster</a>. Esta extensión se encarga de averiguar las agrupaciones de marcadores, mostrarlas y separarlas a medida que se hace zum sobre el mapa (este ejemplo muestra solo una implementación sencilla de esta extensión; hay muchas opciones que puedes explorar).</p>
<p>Para usar la funcionalidad de agrupación de marcadores, tendremos que incluir en nuestro documentos HTML las referencias a las hojas de estilos y el archivo JavaScript de la extensión. Estos archivos se pueden descargar y usar localmente, aunque en este ejemplo emplearemos los archivos alojados en el sitio web oficial de la extensión.</p>
<p>Para referenciar estos archivos, introduce el siguiente código en la sección <head> del documento HTML (nótese que el código también hace referencia al archivo de datos 'bicycle-parkings.geojson', que vamos a necesitar):</p>
<pre><code class="language-markup">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.4.0/dist/leaflet.markercluster.js"></script>
<script src="bicycle-parkings.geojson"></script>
</code></pre>
<p>A continuación, introduce el siguiente código JavaScript entre las etiquetas <script> del documento HTML:</p>
<pre><code class="language-markup">
<script>
var map = L.map('map').setView([36.722, -4.420], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
}).addTo(map);
var parkingIcon = L.icon({
iconUrl: 'bicycle-parking.svg',
iconSize: [20,20]
});;
var parkings = L.geoJson(data, {
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: parkingIcon});
marker.bindPopup("Capacidad: " + feature.properties.capacity);
return marker;
}});
var clusters = L.markerClusterGroup({ showCoverageOnHover: false });
clusters.addLayer(parkings);
map.addLayer(clusters);
</script>
</code></pre>
<p>En primer lugar, después de inicializar el mapa, el código define un icono personalizado para los marcadores identificado con la variable 'parkingIcon'. Para más detalles sobre cómo establecer un icono personalizado, consulta el ejemplo <a href="#add-a-custom-marker">Añadir un marcador personalizado</a>.</p>
<p>Luego, define una variable 'parkings' a la que le asigna la capa de datos GeoJSON. La capa de datos se crea a través de una instancia de la clase <a href="https://leafletjs.com/reference-1.7.1.html#geojson" target="blanck">L.geoJson()</a>. La función <a href="https://leafletjs.com/reference-1.7.1.html#geojson-pointtolayer" target="_blank">pointToLayer</a> de Leaflet es usa aquí para determinar cómo convertir una característica de punto a una capa del mapa. Esta función siempre acepta dos argumentos: la característica GeoJSON y un objeto <a href="https://leafletjs.com/reference-1.7.1.html#latlng" target="_blank">LatLng</a> que representa su ubicación (no es necesario indicarla, Leaflet la calculará automáticamente). La función devuelve una variable 'marker' a la que asigna un objeto marcador mediante la función <a href="https://leafletjs.com/reference-1.6.0.html#marker" target="blanck">L.marker()</a>, que toma como valores las coordenadas geográficas del punto y usa como imagen del marcador nuestro icono personalizado.</p>
<p>Antes de devolver el marcador como resultado de resolver la función <a href="https://leafletjs.com/reference-1.7.1.html#geojson-pointtolayer" target="_blank">pointToLayer</a>, el código crea una ventana emergente usando el método <a href="https://leafletjs.com/reference-1.6.0.html#marker-bindpopup" target="blanck">bindPopup()</a>. Tan solo es necesario indicar el contenido que debe aparecer en la ventana emergente en forma de código HTML. En nuestro ejemplo, la ventana mostrará información relativa a la capacidad de cada estacionamiento de bicicletas al hacer clic sobre un marcador. Este dato corresponde con la propiedad 'capacity' incluida en nuestro archivo de datos GeoJSON. Se puede seleccionar cualquiera de las propiedades de una característica incluida en el conjunto de datos mediante 'feature.properties.<em>nombre-de-la-propiedad</em>'.</p>
<p>Finalmente, el código crea una capa de marcadores agrupados con <a href="https://github.com/Leaflet/Leaflet.markercluster" target="blanck">Leaflet.markercluster</a>, una función que forma parte de la extensión, asignándole la variable 'clusters'. Esta capa es una agrupación de marcadores a la que podemos añadir marcadores individuales que luego serán agrupados. El parámetro 'showCoverageOnHover' sirve para indicar si queremos que al pasar el ratón por encima de un grupo de marcadores se muestre la extensión real que ocupan sus marcadores. Su valor predeterminado es 'true'. Por último, la capa 'clusters' se añade al mapa con <a href="https://leafletjs.com/reference-1.7.1.html#map-addlayer" target="_blank">addLayer</a>.</p>
</div>
</div>
<div class="nav">
<p align="right"><a href="#">Volver al principio</a></p>
</div>
<footer>
<hr/>
<p class="small">Fecha de primera publicación: <time datetime="2019-12-29">2019-12-29</time>.</p>
<p class="small">Fecha de última actualización: <time datetime="2021-12-07">2021-12-07</time>.</p>
</footer>
</div>
<script type="text/javascript" src="js/site.js"></script>
</body>
</html>