sitna.github.io/getting-started/15.html at main · sitna/sitna.github.io · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Trabajando con entidades geográficas</title>
</head>
<body>
    <script src="//sitna.navarra.es/api/"></script>
    <div id="mapa"></div>
    <script>
        const myMap = new SITNA.Map("mapa", {
            // Instanciamos el mapa con una maquetación personalizada
            layout: "//sitna.github.io/getting-started/layout/my-layout"
        });

        myMap.loaded(() => {
            myMap.addLayer({
                id: "poi",
                type: SITNA.Consts.layerType.VECTOR,
                title: "Puntos de interés"
            }, () => {
                myMap.addMarker([-203288, 6652999], {
                    layer: "poi",
                    group: "Prehistoria",
                    data: {
                        "Nombre": "Stonehenge",
                        "Fecha de inicio de construcción": "2400-2200 a.e.c.",
                        "Uso": "Desconocido",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/stonehenge.jpg"
                    }
                });
                myMap.addMarker([1390641, 5144550], {
                    layer: "poi",
                    group: "Edad Antigua",
                    data: {
                        "Nombre": "Coliseo",
                        "Fecha de inicio de construcción": "72 e.c.",
                        "Uso": "Anfiteatro",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/colosseum.jpg"
                    }
                });
                myMap.addMarker([677254, 6581543], {
                    layer: "poi",
                    group: "Edad Media",
                    data: {
                        "Nombre": "Catedral de Aquisgrán",
                        "Fecha de inicio de construcción": "796",
                        "Uso": "Templo",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/aachen.jpg"
                    }
                });
                myMap.addMarker([-399432, 4463713], {
                    layer: "poi",
                    group: "Edad Media",
                    data: {
                        "Nombre": "Alhambra",
                        "Fecha de inicio de construcción": "c. 1238",
                        "Uso": "Residencia",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/alhambra.jpg"
                    }
                });
                myMap.addMarker([-720856, 7112550], {
                    layer: "poi",
                    group: "Prehistoria",
                    data: {
                        "Nombre": "Newgrange",
                        "Fecha de inicio de construcción": "3300-2900 a.e.c.",
                        "Uso": "Funerario",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/newgrange.jpg"
                    }
                });
                myMap.addMarker([2641252, 4575413], {
                    layer: "poi",
                    group: "Edad Antigua",
                    data: {
                        "Nombre": "Partenón",
                        "Fecha de inicio de construcción": "447 a.e.c.",
                        "Uso": "Templo",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/parthenon.jpg"
                    }
                });
                myMap.addMarker([236074, 6241789], {
                    layer: "poi",
                    group: "Edad Moderna",
                    data: {
                        "Nombre": "Palacio de Versalles",
                        "Fecha de inicio de construcción": "1661",
                        "Uso": "Residencia",
                        "Fotografía__image_auto_200": "//sitna.github.io/getting-started/img/versailles.jpg"
                    }
                });

                // Añadimos un botón de búsqueda de ciudades
                const searchButton = document.createElement("button");
                searchButton.setAttribute("id", "search-button");
                searchButton.addEventListener("click", function (e) {
                    const pattern = prompt("Nombre de ciudad");
                    const patternRegExp = new RegExp(pattern, "i");
                    const capitalsLayer = myMap.getLayer("capitales");
                    const foundFeature = capitalsLayer.features
                        .find(feature => patternRegExp.test(feature.getData().name));
                    if (foundFeature) {
                        // Resaltamos la entidad encontrada
                        foundFeature.setStyle({
                            strokeColor: "#009900"
                        });
                        // Centramos el mapa en la entidad geográfica y con un radio de 10 km
                        const center = foundFeature.getCoordinates();
                        const radius = 10000;
                        myMap.setExtent([
                            center[0] - radius,
                            center[1] - radius,
                            center[0] + radius,
                            center[1] + radius
                        ], {
                            animate: true
                        });
                    }
                });
                document.getElementById("toggles").appendChild(searchButton);
            });
        });
    </script>
</body>
</html>