mapicgc-gl-js 0.0.37 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docu_Map.md CHANGED
Binary file
@@ -1,5 +1,4 @@
1
1
  <html>
2
-
3
2
  <head>
4
3
  <meta charset='utf-8' />
5
4
  <title>Exemple llibreria mapicgc-gl-js</title>
@@ -7,13 +6,11 @@
7
6
  <script src="../dist/mapicgc-gl.umd.js"></script>
8
7
  <link href="../dist/mapicgc-gl.css" rel="stylesheet" />
9
8
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
10
-
11
9
  <style>
12
10
  body {
13
11
  margin: 0;
14
12
  padding: 0;
15
13
  }
16
-
17
14
  #map {
18
15
  position: absolute;
19
16
  top: 0;
@@ -21,7 +18,6 @@
21
18
  width: 100%;
22
19
  height: 100%
23
20
  }
24
-
25
21
  .map {
26
22
  position: absolute;
27
23
  top: 0;
@@ -29,7 +25,6 @@
29
25
  width: 100%;
30
26
  height: 100%
31
27
  }
32
-
33
28
  #menu {
34
29
  position: absolute;
35
30
  z-index: 1000;
@@ -43,7 +38,6 @@
43
38
  -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
44
39
  box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
45
40
  }
46
-
47
41
  #div_pitch {
48
42
  position: absolute;
49
43
  right: 10px;
@@ -51,7 +45,6 @@
51
45
  width: 30px;
52
46
  z-index: 100;
53
47
  }
54
-
55
48
  .sliderClass {
56
49
  position: absolute;
57
50
  left: 10px;
@@ -67,32 +60,24 @@
67
60
  }
68
61
  </style>
69
62
  </head>
70
-
71
63
  <body>
72
64
  <div id='menu'>
73
- <input id='topografic' type='radio' name='rtoggle' value='topografic' >
65
+ <input id='TOPO' type='radio' name='rtoggle' value="TOPO">
74
66
  <label for='topografic'>Mapa estàndard</label><br>
75
-
76
- <input id='ortofoto' type='radio' name='rtoggle' checked='checked' value='ortofoto'>
67
+ <input id='ORTO3D' type='radio' name='rtoggle' checked='checked' value='ORTO3D'>
77
68
  <label for='ortofoto'>Ortofoto</label><br>
78
-
79
- <input id='limits' type='radio' name='rtoggle' value='limits'>
69
+ <input id='ADMIN' type='radio' name='rtoggle' value='ADMIN'>
80
70
  <label for='limits'>Limits</label><br>
81
-
82
- <input id='fosc' type='radio' name='rtoggle' value='fosc'>
71
+ <input id='DARK' type='radio' name='rtoggle' value='DARK'>
83
72
  <label for='fosc'>fosc</label>
84
73
  </div>
85
-
86
74
  <div id="comparison-container">
87
75
  <div id="before" class="map"></div>
88
76
  <div id="after" class="map"></div>
89
77
  </div>
90
78
  <script>
91
79
  console.info(window);
92
-
93
-
94
80
  console.info(mapicgcgl.Layers);
95
-
96
81
  const map1 = new mapicgcgl.Map({
97
82
  container: 'before',
98
83
  style: mapicgcgl.Styles.TOPO,
@@ -103,7 +88,6 @@
103
88
  pitch: 0,
104
89
  attributionControl: false
105
90
  });
106
-
107
91
  const map2 = new mapicgcgl.Map({
108
92
  container: 'after',
109
93
  style: mapicgcgl.Styles.ORTO,
@@ -114,34 +98,17 @@
114
98
  pitch: 0,
115
99
  attributionControl: false
116
100
  });
117
-
118
-
119
- //var container =document.getElementById('comparison-container');
120
-
121
101
  var container = "#comparison-container";
122
-
123
- var map = new mapicgcgl.CompareMaps(map1, map2, container, {
124
- // Set this to enable comparing two maps by mouse movement:
125
- // m ousemove: true
126
- });
127
-
128
-
129
-
102
+ var map = new mapicgcgl.CompareMaps(map1, map2, container, {});
130
103
  const layerList = document.getElementById('menu');
131
104
  const inputs = layerList.getElementsByTagName('input');
132
-
133
105
  function switchLayer(layer) {
134
- const layerId = layer.target.id;
106
+ const layerId = mapicgcgl.Styles[layer.target.id];
135
107
  map1.setStyle(layerId);
136
108
  }
137
-
138
109
  for (let i = 0; i < inputs.length; i++) {
139
110
  inputs[i].onclick = switchLayer;
140
111
  }
141
-
142
-
143
-
144
112
  </script>
145
113
  </body>
146
-
147
114
  </html>
@@ -0,0 +1,115 @@
1
+ <html>
2
+ <head>
3
+ <meta charset='utf-8' />
4
+ <title>Exemple llibreria mapicgc-gl-js</title>
5
+ <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
6
+ <script src="../dist/mapicgc-gl.umd.js"></script>
7
+ <link href="../dist/mapicgc-gl.css" rel="stylesheet" />
8
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
9
+ <style>
10
+ body {
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+ #map {
15
+ position: absolute;
16
+ top: 0;
17
+ bottom: 0;
18
+ width: 100%;
19
+ height: 100%
20
+ }
21
+ .map {
22
+ position: absolute;
23
+ top: 0;
24
+ bottom: 0;
25
+ width: 100%;
26
+ height: 100%
27
+ }
28
+ #menu {
29
+ position: absolute;
30
+ z-index: 1000;
31
+ background: #fff;
32
+ padding: 10px;
33
+ font-family: 'Open Sans', sans-serif;
34
+ top: 5px;
35
+ left: 5px;
36
+ border-radius: 7px;
37
+ -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
38
+ -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
39
+ box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
40
+ }
41
+ #div_pitch {
42
+ position: absolute;
43
+ right: 10px;
44
+ top: 142px;
45
+ width: 30px;
46
+ z-index: 100;
47
+ }
48
+ .sliderClass {
49
+ position: absolute;
50
+ left: 10px;
51
+ top: 79px;
52
+ width: 130px;
53
+ z-index: 100;
54
+ display: none;
55
+ background-color: white;
56
+ padding: 10px;
57
+ border-radius: 4px;
58
+ font-size: 0.85em;
59
+ opacity: 0.9;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div id='menu'>
65
+ <input id='TOPO' type='radio' name='rtoggle' value="TOPO">
66
+ <label for='topografic'>TOPO</label><br>
67
+ <input id='ORTO' type='radio' name='rtoggle' value='ORTO'>
68
+ <label for='ortofoto'>ORTO</label><br>
69
+ <input id='ORTO3D' type='radio' name='rtoggle' checked='checked' value='ORTO3D'>
70
+ <label for='ortofoto'>ORTO3D</label><br>
71
+ <input id='ADMIN' type='radio' name='rtoggle' value='ADMIN'>
72
+ <label for='limits'>ADMIN</label><br>
73
+ <input id='DARK' type='radio' name='rtoggle' value='DARK'>
74
+ <label for='fosc'>DARK</label>
75
+ </div>
76
+
77
+ <div id="map" class="map"></div>
78
+
79
+ <script>
80
+ console.info(window);
81
+ console.info(mapicgcgl.Layers);
82
+ const map1 = new mapicgcgl.Map({
83
+ container: 'map',
84
+ style: mapicgcgl.Styles.ORTO3D,
85
+ center: [1.1464, 41.706],
86
+ zoom: 7.4,
87
+
88
+ hash: true,
89
+ pitch: 0,
90
+ attributionControl: false
91
+ });
92
+
93
+ map1.on("load", ()=>{
94
+
95
+
96
+
97
+ })
98
+
99
+
100
+
101
+
102
+ const layerList = document.getElementById('menu');
103
+ const inputs = layerList.getElementsByTagName('input');
104
+ function switchLayer(layer) {
105
+
106
+ console.info(mapicgcgl.Styles[layer.target.id]);
107
+ const layerId = mapicgcgl.Styles[layer.target.id];
108
+ map1.setStyle(layerId);
109
+ }
110
+ for (let i = 0; i < inputs.length; i++) {
111
+ inputs[i].onclick = switchLayer;
112
+ }
113
+ </script>
114
+ </body>
115
+ </html>
package/nodeDeploy.js CHANGED
@@ -14,7 +14,7 @@ const renamedFilePath = `${process.env.FTP_LOCA_PATH}${process.env.FILE_JS}`;
14
14
  console.error('Error copying file:', err);
15
15
  } else {
16
16
  console.log('File copied and renamed successfully.');
17
- // deploy()
17
+ deploy()
18
18
  }
19
19
  });
20
20
 
package/nodeSetConfig.js CHANGED
@@ -50,7 +50,7 @@ function camelize(str) {
50
50
 
51
51
  async function getVectorLimitsLayers() {
52
52
  try {
53
- const response = await axios.get('https://tilemaps.icgc.cat/tileserver/limits-tilejsonV3.json');
53
+ const response = await axios.get('https://tilemaps.icgc.cat/vt/limits-tilejsonV3.json');
54
54
  const tileJson = response.data;
55
55
 
56
56
 
@@ -117,7 +117,7 @@ async function getVectorLimitsLayers() {
117
117
  }
118
118
 
119
119
 
120
- async function getWMSLayers() {
120
+ async function getVectorLayers() {
121
121
  try {
122
122
 
123
123
 
@@ -126,16 +126,18 @@ async function getVectorLimitsLayers() {
126
126
  { key: 'altimetria', layer:"", url: "https://betaserver.icgc.cat/tileserver3/tileserver.php/alti_bt5m/{z}/{x}/{y}.pbf"},
127
127
  { key: 'toponimia',layer:"", url: "https://betaserver.icgc.cat/tileserver3/tileserver.php/redtopo/{z}/{x}/{y}.pbf"},
128
128
  ]
129
- wmsLayersOptions = test
130
- console.info('Dades WMS Layers actualitzats' );
129
+ vectorLayersOptions = test
130
+ console.info('Dades vector Layers actualitzats' )
131
+
131
132
  } catch (error) {
132
- console.error('Error fetching wms-layers:', error.message);
133
+
134
+ console.error('Error fetching vector-layers:', error.message);
133
135
  }
134
136
 
135
137
  }
136
138
 
137
139
 
138
- async function getVectorLayers() {
140
+ async function getWMSLayers() {
139
141
  try {
140
142
  let layerRelleu = 'relleu'
141
143
  let layerGeologia = 'geologia'
@@ -145,16 +147,17 @@ async function getVectorLimitsLayers() {
145
147
  let test= [
146
148
  { key: 'relleu', layer:"", url: `https://tilemaps.icgc.cat/mapfactory/wmts/${layerRelleu}/CAT3857/{z}/{x}/{y}.png`},
147
149
  { key: 'geologia', layer:"", url: `https://tilemaps.icgc.cat/mapfactory/wmts/${layerGeologia}/MON3857NW/{z}/{x}/{y}.png`},
148
- { key: 'osm', layer:"", url:`https://tilemaps.icgc.cat/mapfactory/wmts/${layerOsm}/CAT3857_15/{z}/{x}/{y}.png`},
149
- { key:"cims", layer:"", url:`"https://geoserveis.icgc.cat/icc_100cims/wms/service?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&LAYERS=${layerCims}&STYLES=&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&SRS=EPSG:25831&BBOX=137118.923076923,4488408.75,650959.076923077,4749634.75&WIDTH=895&HEIGHT=455`},
150
+ { key: 'administratiu', layer:"", url:`http://geoserveis.icgc.cat/servei/catalunya/mapa-base/wmts/administratiu/MON3857NW/{z}/{x}/{y}.png`},
151
+ { key: 'simplificat', layer:"", url:`http://geoserveis.icgc.cat/servei/catalunya/mapa-base/wmts/simplificat/MON3857NW/{z}/{x}/{y}.png`},
152
+ { key:"cims", layer:"", url:`https://geoserveis.icgc.cat/icc_100cims/wms/service?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&LAYERS=${layerCims}&STYLES=&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&SRS=EPSG:25831&BBOX=137118.923076923,4488408.75,650959.076923077,4749634.75&WIDTH=895&HEIGHT=455`},
150
153
  { key: 'cobertesSol', layer:"", url: `http://geoserveis.icgc.cat/servei/catalunya/cobertes-sol/wms?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&LAYERS=${layerCobertesSol}&STYLES=&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&CRS=EPSG:25831&BBOX=374110.828167253,4639230.79853085,452621.120632226,4703578.45000215&WIDTH=1020&HEIGHT=836`},
151
154
  ]
152
- vectorLayersOptions = test
153
- console.info('Dades vector Layers actualitzats' );
154
-
155
+ ;
156
+ wmsLayersOptions = test
157
+ console.info('Dades WMS Layers actualitzats' );
155
158
 
156
159
  } catch (error) {
157
- console.error('Error fetching vector-layers:', error.message);
160
+ console.error('Error fetching wms-layers:', error.message);
158
161
  }
159
162
 
160
163
  }
@@ -165,7 +168,8 @@ async function getVectorLimitsLayers() {
165
168
 
166
169
  let test= [
167
170
  { key: "TOPO", url: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json",image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_mapa_estandard.png" },
168
- { key: "ORTO", url: "https://geoserveis.icgc.cat/contextmaps/icgc_orto_hibrida.json" , image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_orto_hibrida.png"},
171
+ { key: "ORTO", url: "https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json" , image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_orto_hibrida.png"},
172
+ { key: "ORTO3D", url: "https://tilemaps.icgc.cat/cdn/styles/icgc_orto_3d.json" , image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_orto_hibrida.png"},
169
173
  { key: "ADMIN", url: "https://geoserveis.icgc.cat/contextmaps/icgc_delimitacio_limits_administratius.json" , image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_delimitacio_limits_administratius.png"},
170
174
  { key: "DARK", url: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json" , image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_mapa_base_fosc.png"},
171
175
  { key: "LIGHT", url: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_gris.json", image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_mapa_base_gris.png" },
@@ -186,8 +190,8 @@ async function getVectorLimitsLayers() {
186
190
  try {
187
191
 
188
192
  let test= [
189
- {name: "ICGC5M", url: "https://tilemaps.icgc.cat/tileserver/tileserver.php/terreny-5m-30m-rgb-extent/{z}/{x}/{y}.png"},
190
- {name: "WORLD3M", url: "https://tilemaps.icgc.cat/tileserver/tileserver.php/terreny_icgc_2m_rgb/{z}/{x}/{y}.png"}
193
+ {name: "ICGC5M", url: "https://tilemaps.icgc.cat/tileserver/tileserver/terreny-5m-30m-rgb-extent/{z}/{x}/{y}.png"},
194
+ {name: "WORLD30M", url: "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png", encoding: "terrarium",}
191
195
 
192
196
  ]
193
197
  terrainOptions = test
@@ -230,12 +234,14 @@ function replace(){
230
234
  const updatedConfigNode = `
231
235
  const urlImages = "https://visors.icgc.cat/contextmaps/imatges_estil/";
232
236
  const urlStyles = "https://geoserveis.icgc.cat/contextmaps/";
237
+ const geocoderUrl = "https://eines.icgc.cat/geocodificador/autocompletar?text=";
233
238
  const defaultOptions = ${stringifyWithoutQuotes(defaultOptions, null, 2)};
234
239
  \nmodule.exports = defaultOptions;
235
240
  `;
236
241
  const updatedConfig = `
237
242
  const urlImages = "https://visors.icgc.cat/contextmaps/imatges_estil/";
238
243
  const urlStyles = "https://geoserveis.icgc.cat/contextmaps/";
244
+ const geocoderUrl = "https://eines.icgc.cat/geocodificador/autocompletar?text=";
239
245
  const defaultOptions = ${stringifyWithoutQuotes(defaultOptions, null, 2)};
240
246
  \nexport default defaultOptions;
241
247
  `;
@@ -350,8 +356,8 @@ for (const key in originalWmsLayers) {
350
356
  const layersConfig = `
351
357
  const Orto = ${stringifyWithoutQuotes(convertedOrtoLayers, null, 2)};
352
358
  const VectorAdmin = ${stringifyWithoutQuotes(convertedVectorICGCLayers, null, 2)};
353
- const WMS = ${stringifyWithoutQuotes(convertedVectorLayers, null, 2)};
354
- const Vector = ${stringifyWithoutQuotes(convertedWmsLayers, null, 2)};
359
+ const Vector = ${stringifyWithoutQuotes(convertedVectorLayers, null, 2)};
360
+ const WMS = ${stringifyWithoutQuotes(convertedWmsLayers, null, 2)};
355
361
  \nexport default {Orto,VectorAdmin, WMS, Vector};
356
362
  `;
357
363
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mapicgc-gl-js",
3
3
  "homepage": "https://autogitlab.icgc.local/geostarters/icgc/mapicgc/mapicgc-gl-js",
4
- "version": "0.0.37",
4
+ "version": "0.0.39",
5
5
  "description": "mapicgc-gl-js",
6
6
  "author": "ICGC",
7
7
  "main": "dist/mapicgc-gl.js",
@@ -30,12 +30,20 @@
30
30
  "jsdom": "^24.0.0",
31
31
  "npm-run-all": "^4.1.5",
32
32
  "package-json-versionify": "^1.0.4",
33
+ "path": "^0.12.7",
33
34
  "rollup-plugin-polyfill": "^4.2.0",
34
35
  "ssh2-sftp-client": "^9.0.4",
35
36
  "vite": "^5.0.12",
36
- "vite-plugin-node-polyfills": "^0.19.0"
37
+ "vite-plugin-node-polyfills": "^0.19.0",
38
+ "wms-capabilities": "^0.6.0",
39
+ "xml2js": "^0.6.2",
40
+ "yarn": "^1.22.21"
37
41
  },
38
42
  "dependencies": {
43
+ "@deck.gl/core": "~8.9.32",
44
+ "@deck.gl/geo-layers": "~8.9.32",
45
+ "@deck.gl/mapbox": "~8.9.32",
46
+ "@loaders.gl/3d-tiles": "~3.4.13",
39
47
  "@maplibre/maplibre-gl-compare": "^0.5.0",
40
48
  "@maplibre/maplibre-gl-geocoder": "^1.5.0",
41
49
  "@turf/turf": "^6.5.0",
@@ -44,10 +52,6 @@
44
52
  "flatgeobuf": "^3.27.2",
45
53
  "maplibre-gl": "^3.6.2",
46
54
  "maplibre-gl-measures": "^0.0.14",
47
- "path": "^0.12.7",
48
- "wms-capabilities": "^0.6.0",
49
- "xml2js": "^0.6.2",
50
- "xmldom": "^0.6.0",
51
- "yarn": "^1.22.21"
55
+ "xmldom": "^0.6.0"
52
56
  }
53
57
  }
@@ -751,7 +751,46 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
751
751
  border-radius: 3px;
752
752
  width: auto;
753
753
  color: #fff;
754
+ overflow-y: auto;
755
+ max-height: 500px;
756
+ overflow-x: hidden;
754
757
  }
758
+ .filter-group::-webkit-scrollbar {
759
+ width: 8px; /* Tamaño del scroll en vertical */
760
+ height: 8px; /* Tamaño del scroll en horizontal */
761
+ display: block; /* Ocultar scroll */
762
+ }
763
+
764
+ /* Ponemos un color de fondo y redondeamos las esquinas del thumb */
765
+ .filter-group::-webkit-scrollbar-thumb {
766
+ background: #ccc;
767
+ border-radius: 4px;
768
+ }
769
+
770
+ /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
771
+ .filter-group::-webkit-scrollbar-thumb:hover {
772
+ background: #daac56;
773
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
774
+ }
775
+
776
+ /* Cambiamos el fondo cuando esté en active */
777
+ .filter-group::-webkit-scrollbar-thumb:active {
778
+ background-color: #d8b97f;
779
+ }
780
+ /* Ponemos un color de fondo y redondeamos las esquinas del track */
781
+ .filter-group::-webkit-scrollbar-track {
782
+ background: #e1e1e1;
783
+ border-radius: 4px;
784
+ }
785
+
786
+ /* Cambiamos el fondo cuando esté en active o hover */
787
+ .filter-group::-webkit-scrollbar-track:hover,
788
+ .filter-group::-webkit-scrollbar-track:active {
789
+ background: #d4d4d4;
790
+ }
791
+
792
+
793
+
755
794
 
756
795
  .filter-group input[type='checkbox']:first-child + label {
757
796
  border-radius: 3px 3px 0 0;
@@ -767,21 +806,21 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
767
806
  }
768
807
 
769
808
  .filter-group input[type='checkbox'] + label {
770
- background-color: #3386c0;
809
+ background-color: #798e9f;
771
810
  display: block;
772
811
  cursor: pointer;
773
- padding: 10px;
812
+ padding: 7px;
774
813
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
775
814
  }
776
815
 
777
816
  .filter-group input[type='checkbox'] + label {
778
- background-color: #3386c0;
817
+ background-color: #798e9f;
779
818
  text-transform: capitalize;
780
819
  }
781
820
 
782
821
  .filter-group input[type='checkbox'] + label:hover,
783
822
  .filter-group input[type='checkbox']:checked + label {
784
- background-color: #4ea0da;
823
+ background-color: #798e9f;
785
824
  }
786
825
 
787
826
  .filter-group input[type='checkbox']:checked + label:before {
@@ -1466,4 +1505,19 @@ h4::selection {
1466
1505
  font-size: 16px;
1467
1506
  text-align: center;
1468
1507
  }
1469
- }
1508
+ #titleDivMenu{
1509
+ height: 25px;
1510
+ background-color:rgb(214 132 0);
1511
+ min-width: 130px;
1512
+ text-align: -webkit-center;
1513
+ }
1514
+
1515
+ #titleDivMenuSub{
1516
+ height: 25px;
1517
+ background-color: #7e8765;
1518
+ padding-left: 24px;
1519
+ /* min-width: 130px; */
1520
+ /* text-align: -webkit-center; */
1521
+ }
1522
+
1523
+ }