mapicgc-gl-js 0.0.24 → 0.0.25

package/README.md

@@ -7,57 +7,76 @@
   <img src="https://img.shields.io/npm/v/@unitatgeostart/mapicgc-gl-js"></img>
   <img src="https://img.shields.io/twitter/follow/icgcat?style=social"></img>
 </p>
-<p align="center">v. 0.0.24</p>
 
+<br>
+Version 0.0.25
 
-<br><br><br><br>
+# What and why?
+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.
 
+**Why did we develop a new library?** 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. While the SDK is opinionated, being closely tied to MapICGC Cloud data, its MapLibre core ensures 100% compatibility with other data sources..  
 
-## Library Overview:
-The MapICGC GL JS library builds upon the MapLibre GL JS framework, exposing existing capabilities while introducing new features specific to the MapICGC ecosystem. It seamlessly integrates with the MapICGC Cloud service, providing various data types for enhanced web mapping experiences.
-<br><br>
-
-## Development Simplification:
-The goal is to simplify development for MapICGC developers. With MapICGC GL JS, there's no need for external plugins or dealing with complex data source URLs. 3D terrain and other features are either built-in, loaded dynamically, or accessible through straightforward functions. The SDK, while tailored to MapICGC Cloud data, ensures compatibility with other sources.
-<br><br>
-
-## Comprehensive Data and Functionality:
-MapICGC GL JS offers a comprehensive set of data, including vector tiles, satellite raster tiles, DEM with Terrain RGB, and customizable styles with an editor. It eliminates the need to search for syntax or load external plugins for basic functionalities, providing a user-friendly and efficient development experience.
-<br><br>
-
-## API Services Integration:
-MapICGC GL JS provides well-documented and user-friendly wrapper functions for MapICGC Cloud API services. These services include geocoding, static maps, geolocation, and a coordinate reference system search engine for transforming coordinates between different CRSs.
-<br><br>
-
+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.
 
 
 > 📣 *__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.
 
 # Install
-NPM:
 ```shell
 npm install --save @mapicgc-gl-js
 ```
 
-CDN:
-
-```html
-   <script src="https://betaserver.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js"></script>
-   <link href="https://betaserver.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
-```
-
 # API documentation
 In addition to the details and examples provided in this readme, check out:
 
-- [mapICGC functions](docu_Map.md)
+- [Documentació de les funcions del Mapa (docu_Map.md)](docu_Map.md)
+- [Documentació del plugin CompareMaps (docu_CompareMaps.md)](docu_CompareMaps.md)
+
+
+
+### Com afegir la biblioteca a un projecte propi?
+
+1. Instal·lar la biblioteca:
+
+    ```bash
+    npm i mapicgc-gl-js
+    ```
+
+2. Afegir les següents línies de codi JS i CSS a l'encapçalament del teu HTML:
 
+    ```html
+   
+    <script src="https://www.unpkg.com/@watergis/maplibre-gl-export@3.0.1/dist/maplibre-gl-export.umd.js"></script>
 
+    <link href="https://www.unpkg.com/@watergis/maplibre-gl-export@3.0.1/dist/maplibre-gl-export.css" rel="stylesheet" />
+    ```
 
-### Add the map:
-```javascript
+3. En el script del cos del document, declarar el mapa de la següent manera:
+
+    ```javascript
     import { Map } from 'mapicgc-gl-js'; 
 
     const map = (window.map = new Map({
       style: "topografic",
     }));
-```
+    ```
+
+### Funcionalitats
+
+- Mapa per defecte: Topogràfic ICGC
+- Fons de mapes: Topogràfic, Orto, Híbrid, Gris, Fosc
+
+- Afegir capes GeoJson i WMS
+
+- Markers
+
+- Control Basemaps
+
+- Control atribució
+
+- Control Capes
+
+- Control print
+
+- Popups
+

package/dist/mapicgc-gl.css

@@ -748,7 +748,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
         left: 10px;
         z-index: 1;
         border-radius: 3px;
-        width: 120px;
+        width: auto;
         color: #fff;
     }
 
@@ -1121,3 +1121,42 @@ h4::selection {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+);
   transform: rotate(90deg);
 }
+
+.distance-container {
+  position: absolute;
+  top: 0px;
+  left: 45%;
+  z-index: 1;
+  display: flex;
+}
+
+.distance-container > * {
+  line-height: 18px;
+  display: flex;
+  height: 17px;
+  margin: 0 auto;
+  padding: 2px;
+  padding-bottom: 1.5px;
+  left: 45%;
+  border: none;
+  border-radius: 3px;
+  font-size: 12px;
+  text-align: center;
+  color: #222;
+  background: hsla(0, 0%, 100%, 0.849);
+}
+
+
+#xButton {
+  width: fit-content;
+  z-index: 1;
+  cursor: pointer;
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  border-radius: 0px;
+  background-color: crimson;
+}
+#xButton:hover{
+  background-color: rgb(126, 12, 12);
+}