mapicgc-gl-js 0.0.41 → 0.0.43

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 (47) hide show
  1. package/README.md +59 -26
  2. package/dist/mapicgc-gl.css +57 -15
  3. package/dist/mapicgc-gl.js +833 -244
  4. package/dist/mapicgc-gl.umd.js +833 -244
  5. package/docu_Map.md +0 -0
  6. package/nodeSetConfig.js +45 -9
  7. package/package.json +10 -15
  8. package/public/mapicgc-gl.css +57 -15
  9. package/src/config.js +809 -809
  10. package/src/configNode.js +809 -809
  11. package/src/constants/Layers.js +165 -155
  12. package/src/constants/Styles.js +12 -12
  13. package/src/constants/Terrains.js +7 -7
  14. package/src/controls/LogoControl.js +57 -0
  15. package/src/controls/MouseCoordinatesControl.js +42 -0
  16. package/src/map/Map.js +1421 -1136
  17. package/test/exemples/InstamapsExport.gpkg +0 -0
  18. package/test/exemples/addBasemap.html +52 -0
  19. package/test/exemples/addCompare.html +75 -0
  20. package/test/exemples/addControl.html +62 -0
  21. package/test/exemples/addFGBLayerICGC.html +55 -0
  22. package/test/exemples/addFeatureQuery.html +64 -0
  23. package/test/exemples/addGeocoderICGC.html +47 -0
  24. package/test/exemples/addGeopackage.html +54 -0
  25. package/test/exemples/addICGCTerrain.html +45 -0
  26. package/test/exemples/addImageLayerICGC.html +44 -0
  27. package/test/exemples/addLayerGeojson.html +74 -0
  28. package/test/exemples/addLayerTree.html +99 -0
  29. package/test/exemples/addLogo.html +57 -0
  30. package/test/exemples/addMapStyle.html +45 -0
  31. package/test/exemples/addMarker.html +54 -0
  32. package/test/exemples/addMouseCoordinateControl.html +39 -0
  33. package/test/exemples/addVectorLayerICGC.html +60 -0
  34. package/test/exemples/advancedExemple.html +98 -0
  35. package/test/exemples/changeSymbolColor.html +59 -0
  36. package/test/exemples/fetchData.html +64 -0
  37. package/test/exemples/fetchDataAndMenu.html +56 -0
  38. package/{exemples/orto3d.html → test/exemples/styleOrto3D.html} +11 -43
  39. package/api.md +0 -3
  40. package/dist/vite.svg +0 -1
  41. package/docu_CompareMaps.md +0 -0
  42. package/exemples/compare.html +0 -114
  43. package/exemples/measure.html +0 -94
  44. package/public/vite.svg +0 -1
  45. package/test/Proposa_DAC_min.geojson +0 -35075
  46. package/test/index.html +0 -349
  47. /package/{LICENSE.md → LICENSE.txt} +0 -0
package/README.md CHANGED
@@ -1,65 +1,82 @@
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
14
+ # MapICGC GL JS
15
15
 
16
16
 
17
+ > 🌠 __MAPLIBRE GL JS version:__ 4.1.2
17
18
 
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.
19
+ 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
20
 
20
21
  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
22
 
22
23
  Moreover, MapICGC GL JS provides well-documented and user-friendly wrapper functions for MapICGC Cloud API services, including geocoding, static maps, geolocation, and a coordinate reference system search engine for transforming coordinates between different CRSs.
23
24
 
24
25
 
25
- > 📣 *__Note:__* If you only need the API Client library for headless usage without map display, consider exploring the MapICGC Client JS library for both browser and NodeJS.
26
+
26
27
 
27
28
  <br>
28
29
 
29
- # First steps
30
+ ## Getting Started
30
31
 
31
- 1. Import the library:
32
- - NPM
32
+ ### NPM
33
+
34
+ 1. Install the library:
33
35
  ```bash
34
36
  npm i mapicgc-gl-js
35
- ```
36
- - CDN
37
37
 
38
+ 2. Import the library:
39
+ ```html
40
+ <script>
41
+ import { Map,Styles } from 'mapicgc-gl-js';
42
+
43
+ const map = Map({
44
+ container: 'map',
45
+ style: Styles.LIGHT,
46
+ center: [2.1464, 41.306],
47
+ zoom: 7.4,
48
+ });
49
+ </script>
50
+ ```
51
+ ### CDN
52
+
53
+ 1. Include the JavaScript and CSS files in the `<head>` of your HTML file.:
38
54
  ```html
39
55
  <script src="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js"></script>
40
56
  <link href="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
41
57
  ```
42
58
 
43
- 2. In the document body script, declare the map as follows:
59
+ 2. Include the following code in the `<body>` of your HTML file.:
44
60
 
45
- ```html hl_lines="35"
61
+ ```html
46
62
  <div id="map"></div>
47
63
  <script>
48
- import { Map } from 'mapicgc-gl-js';
49
-
50
- const map = Map({
64
+ const map = mapicgcgl.Map({
51
65
  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
66
+ style: mapicgcgl.Styles.LIGHT,
67
+ center: [2.1464, 41.306],
68
+ zoom: 7.4,
55
69
  });
56
70
  </script>
57
71
  ```
72
+
73
+ Result:
74
+
58
75
  <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>
76
+ <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
77
  <br>
61
78
 
62
- # Documentation
79
+ ## Documentation
63
80
 
64
81
  Full documentation for this library is <a href="https://autogitlab.icgc.local/geostarters/icgc/mapicgc/mapicgc-doc" target="_blank">available here</a>.
65
82
 
@@ -68,5 +85,21 @@ Check out the features through <a href="https://codepen.io/collection/mrvVZd" ta
68
85
 
69
86
  <br>
70
87
 
71
- # License
72
- **MAPICGC GL JS** is licensed under the [3-Clause BSD license](./LICENSE.md).
88
+ ## Dependencies
89
+
90
+ MapICGC GL JS integrates the following libraries:
91
+ - <a href="https://github.com/maplibre/maplibre-gl-compare" target="_blank"> @maplibre/maplibre-gl-compare </a>
92
+ - <a href="https://github.com/maplibre/maplibre-gl-geocoder" target="_blank"> @maplibre/maplibre-gl-geocoder </a>
93
+ - <a href="https://www.npmjs.com/package/@watergis/maplibre-gl-export" target="_blank"> @watergis/maplibre-gl-export </a>
94
+
95
+
96
+ <br>
97
+
98
+ ## Developed by:
99
+
100
+ <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>
101
+
102
+
103
+
104
+ ## License
105
+ **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,48 @@ h4::selection {
1519
1518
  /* min-width: 130px; */
1520
1519
  /* text-align: -webkit-center; */
1521
1520
  }
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
+ };
1547
+ #geocoder-container {
1548
+ margin: 20px;
1549
+ position: absolute;
1550
+ top: 50px;
1551
+ right: 20px;
1552
+ };
1553
+
1554
+ #results {
1555
+ margin-top: 10px;
1556
+ };
1557
+
1558
+ .divLogos{
1559
+ display: flex;
1560
+ }
1561
+
1562
+
1563
+
1522
1564
 
1523
1565
  }