mapicgc-gl-js 0.0.41 → 0.0.42

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.
Files changed (44) hide show
  1. package/README.md +57 -26
  2. package/dist/mapicgc-gl.css +40 -16
  3. package/dist/mapicgc-gl.js +833 -244
  4. package/dist/mapicgc-gl.umd.js +833 -244
  5. package/nodeSetConfig.js +45 -9
  6. package/package.json +10 -15
  7. package/public/mapicgc-gl.css +40 -16
  8. package/src/config.js +802 -809
  9. package/src/configNode.js +802 -809
  10. package/src/constants/Layers.js +165 -155
  11. package/src/constants/Styles.js +12 -12
  12. package/src/constants/Terrains.js +7 -7
  13. package/src/controls/LogoControl.js +29 -0
  14. package/src/controls/MouseCoordinatesControl.js +42 -0
  15. package/src/map/Map.js +1369 -1131
  16. package/test/exemples/addBasemap.html +52 -0
  17. package/test/exemples/addCompare.html +75 -0
  18. package/test/exemples/addControl.html +62 -0
  19. package/test/exemples/addFGBLayerICGC.html +55 -0
  20. package/test/exemples/addFeatureQuery.html +64 -0
  21. package/test/exemples/addGeocoderICGC.html +47 -0
  22. package/test/exemples/addICGCTerrain.html +45 -0
  23. package/test/exemples/addImageLayerICGC.html +44 -0
  24. package/test/exemples/addLayerGeojson.html +74 -0
  25. package/test/exemples/addLayerTree.html +99 -0
  26. package/test/exemples/addLogo.html +57 -0
  27. package/test/exemples/addMapStyle.html +45 -0
  28. package/test/exemples/addMarker.html +54 -0
  29. package/test/exemples/addMouseCoordinateControl.html +39 -0
  30. package/test/exemples/addVectorLayerICGC.html +60 -0
  31. package/test/exemples/changeSymbolColor.html +59 -0
  32. package/test/exemples/fetchData.html +64 -0
  33. package/test/exemples/fetchDataAndMenu.html +56 -0
  34. package/{exemples/orto3d.html → test/exemples/styleOrto3D.html} +11 -43
  35. package/api.md +0 -3
  36. package/dist/vite.svg +0 -1
  37. package/docu_CompareMaps.md +0 -0
  38. package/docu_Map.md +0 -0
  39. package/exemples/compare.html +0 -114
  40. package/exemples/measure.html +0 -94
  41. package/public/vite.svg +0 -1
  42. package/test/Proposa_DAC_min.geojson +0 -35075
  43. package/test/index.html +0 -349
  44. /package/{LICENSE.md → LICENSE.txt} +0 -0
package/README.md CHANGED
@@ -1,21 +1,20 @@
1
1
  <p align="center">
2
- <img src="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/images/logo2.png" width="400px">
2
+ <img src="https://tilemaps.icgc.cat/cdn/images/logo2.png" alt="MapICGC Logo" width="400px">
3
3
  </p>
4
4
  <p align="center">
5
- <img src="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/images/JS-logo.svg" width="20px">
6
- <img src="https://tilemaps.icgc.cat//cdn/mapicgc-gl-js/images/TS-logo.svg" width="20px">
7
- <img src="https://badge.fury.io/js/mapicgc-gl-js.svg"></img>
8
- <a href="https://twitter.com/icgcat" target="_blank"><img src="https://img.shields.io/twitter/follow/icgcat?style=social"></img></a>
5
+ <img src="https://tilemaps.icgc.cat/cdn/images/JS-logo.svg" width="20px">
6
+ <img src="https://badge.fury.io/js/mapicgc-gl-js.svg">
7
+ <a href="https://twitter.com/icgcat" target="_blank">
8
+ <img src="https://img.shields.io/twitter/follow/icgcat?style=social">
9
+ </a>
9
10
  </p>
10
11
 
11
-
12
12
  <br>
13
13
 
14
- Version 0.0.41
15
-
14
+ # MapICGC GL JS
16
15
 
17
16
 
18
- The MapICGC GL JS library builds upon the MapLibre GL JS framework, exposing its existing capabilities while introducing new features specific to the MapICGC ecosystem. This library is tailored to seamlessly integrate with the MapICGC Cloud service, offering a comprehensive set of data to enhance web mapping experiences, including vector tiles, satellite raster tiles, DEM with Terrain RGB, and customizable styles with an editor.
17
+ The MapICGC GL JS library builds upon the open-source library [**MapLibre GL JS**](https://github.com/maplibre/maplibre-gl-js), exposing its existing capabilities while introducing new features specific to the MapICGC ecosystem. This library is tailored to seamlessly integrate with the MapICGC Cloud service, offering a comprehensive set of data to enhance web mapping experiences, including vector tiles, satellite raster tiles, DEM with Terrain RGB, and customizable styles with an editor.
19
18
 
20
19
  Our goal is to simplify the development process for MapICGC developers! With MapICGC GL JS, you won't need to load external plugins for basic functionalities, deal with complex data source URLs, or search for syntax to enable 3D terrain every time you embark on a project. All these features are either built-in, loaded dynamically when necessary, or accessible through straightforward functions.
21
20
 
@@ -26,40 +25,56 @@ Moreover, MapICGC GL JS provides well-documented and user-friendly wrapper funct
26
25
 
27
26
  <br>
28
27
 
29
- # First steps
28
+ ## Getting Started
30
29
 
31
- 1. Import the library:
32
- - NPM
30
+ ### NPM
31
+
32
+ 1. Install the library:
33
33
  ```bash
34
34
  npm i mapicgc-gl-js
35
- ```
36
- - CDN
37
35
 
36
+ 2. Import the library:
37
+ ```html
38
+ <script>
39
+ import { Map,Styles } from 'mapicgc-gl-js';
40
+
41
+ const map = Map({
42
+ container: 'map',
43
+ style: Styles.LIGHT,
44
+ center: [2.1464, 41.306],
45
+ zoom: 7.4,
46
+ });
47
+ </script>
48
+ ```
49
+ ### CDN
50
+
51
+ 1. Include the JavaScript and CSS files in the `<head>` of your HTML file.:
38
52
  ```html
39
53
  <script src="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js"></script>
40
54
  <link href="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
41
55
  ```
42
56
 
43
- 2. In the document body script, declare the map as follows:
57
+ 2. Include the following code in the `<body>` of your HTML file.:
44
58
 
45
- ```html hl_lines="35"
59
+ ```html
46
60
  <div id="map"></div>
47
61
  <script>
48
- import { Map } from 'mapicgc-gl-js';
49
-
50
- const map = Map({
62
+ const map = mapicgcgl.Map({
51
63
  container: 'map',
52
- style: mapicgcgl.Styles.LIGHT, // style from mapicgc library
53
- center: [2.1464, 41.306], // starting position [lng, lat]
54
- zoom: 7.4, //starting zoom
64
+ style: mapicgcgl.Styles.LIGHT,
65
+ center: [2.1464, 41.306],
66
+ zoom: 7.4,
55
67
  });
56
68
  </script>
57
69
  ```
70
+
71
+ Result:
72
+
58
73
  <div align="center">
59
- <a title="Link to CodePen" href="https://codepen.io/unitatgeostart/pen/eYXWyqd" target="_blank"><img src="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/images/map1.png"></img></a></div>
74
+ <a title="Link to CodePen" href="https://codepen.io/unitatgeostart/pen/eYXWyqd" target="_blank"><img src="https://tilemaps.icgc.cat/cdn//images/map1.png"></img></a></div>
60
75
  <br>
61
76
 
62
- # Documentation
77
+ ## Documentation
63
78
 
64
79
  Full documentation for this library is <a href="https://autogitlab.icgc.local/geostarters/icgc/mapicgc/mapicgc-doc" target="_blank">available here</a>.
65
80
 
@@ -68,5 +83,21 @@ Check out the features through <a href="https://codepen.io/collection/mrvVZd" ta
68
83
 
69
84
  <br>
70
85
 
71
- # License
72
- **MAPICGC GL JS** is licensed under the [3-Clause BSD license](./LICENSE.md).
86
+ ## Dependencies
87
+
88
+ MapICGC GL JS integrates the following libraries:
89
+ - <a href="https://github.com/maplibre/maplibre-gl-compare" target="_blank"> @maplibre/maplibre-gl-compare </a>
90
+ - <a href="https://github.com/maplibre/maplibre-gl-geocoder" target="_blank"> @maplibre/maplibre-gl-geocoder </a>
91
+ - <a href="https://www.npmjs.com/package/@watergis/maplibre-gl-export" target="_blank"> @watergis/maplibre-gl-export </a>
92
+
93
+
94
+ <br>
95
+
96
+ ## Developed by:
97
+
98
+ <a href="https://www.icgc.cat/" target="_blank"><img src="https://tilemaps.icgc.cat/cdn/logos/ICGC_color_norma.svg" alt="ICGC Logo" width="150"></img></a>
99
+
100
+
101
+
102
+ ## License
103
+ **MAPICGC GL JS** is licensed under the [3-Clause BSD license](./LICENSE.txt).
package/dist/mapicgc-gl.css CHANGED
@@ -1093,22 +1093,21 @@ h4::selection {
1093
1093
  margin-top: 15vh;
1094
1094
  }
1095
1095
  }
1096
+ .coordControl{
1096
1097
 
1097
- .coordControl {
1098
- display: block;
1099
- position: absolute;
1100
- bottom: 0;
1101
- height: 17px;
1102
- margin: 0 auto;
1103
- padding: 2px;
1104
- padding-bottom: 1.5px;
1105
- left: 45%;
1106
- border: none;
1107
- border-radius: 3px;
1108
- font-size: 12px;
1109
- text-align: center;
1110
- color: #222;
1111
- background: hsla(0, 0%, 100%, 0.849);
1098
+
1099
+ bottom: 0;
1100
+ height: auto;
1101
+ margin: 0 auto;
1102
+ padding: 5px;
1103
+ border: 1px solid #cccccc;
1104
+ left: 45%;
1105
+ border: none;
1106
+ border-radius: 3px;
1107
+ font-size: 0.85em;
1108
+ text-align: center;
1109
+ color: #333;
1110
+ background: hsla(0, 0%, 100%, 0.849);
1112
1111
  }
1113
1112
  @media (max-width: 700px) {
1114
1113
  .coordControl{
@@ -1519,5 +1518,30 @@ h4::selection {
1519
1518
  /* min-width: 130px; */
1520
1519
  /* text-align: -webkit-center; */
1521
1520
  }
1522
-
1521
+ #legendContainer {
1522
+ position: absolute;
1523
+ top: 20px;
1524
+ right: 76px;
1525
+ background-color: white;
1526
+ padding: 10px;
1527
+ border: 1px solid #ccc;
1528
+ border-radius: 5px;
1529
+ z-index: 1000;
1530
+ overflow-y: scroll;
1531
+ cursor: grab;
1532
+ }
1533
+ #toggleLegend {
1534
+ position: absolute;
1535
+ top: 20px;
1536
+ right: 20px;
1537
+ background-color: #00ab2d;
1538
+ color: white;
1539
+ width: 40px;
1540
+ height: 40px;
1541
+ border-radius: 50%;
1542
+ text-align: center;
1543
+ line-height: 40px;
1544
+ cursor: pointer;
1545
+ z-index: 1000;
1546
+ }
1523
1547
  }