@vidro/map-handler 1.3.2 → 1.3.3

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 (82) hide show
  1. package/README.md +67 -1
  2. package/map-handler.d.ts +134 -0
  3. package/package.json +11 -4
  4. package/src/types.d.ts +63 -0
  5. package/.babelrc +0 -6
  6. package/doc/animation.png +0 -0
  7. package/doc/confirmComponent.png +0 -0
  8. package/doc/giswater.png +0 -0
  9. package/doc/giswaterInfo.png +0 -0
  10. package/doc/giswaterInfoApi.png +0 -0
  11. package/doc/giswatergeojson.png +0 -0
  12. package/doc/multiTile.png +0 -0
  13. package/doc/multiTileNoGutter.png +0 -0
  14. package/doc/togglelayergiswater.png +0 -0
  15. package/doc/vidromaps-basic.png +0 -0
  16. package/examples/full/apidemo.js +0 -387
  17. package/examples/full/cachedToken.dat +0 -1
  18. package/examples/full/cachedTokenData.dat +0 -1
  19. package/examples/full/docker/Docker_compose.yml +0 -14
  20. package/examples/full/docker/Dockerfile +0 -27
  21. package/examples/full/index.php +0 -200
  22. package/examples/full/storeToken.php +0 -6
  23. package/examples/full/tester.css +0 -74
  24. package/examples/full/tester.js +0 -658
  25. package/examples/multipleIframes/index.js +0 -82
  26. package/examples/multipleIframes/index.php +0 -52
  27. package/examples/react-next/README.md +0 -282
  28. package/examples/react-next/atoms/PrintLayoutSelector.js +0 -51
  29. package/examples/react-next/atoms/PrintPaperSizeSelector.js +0 -49
  30. package/examples/react-next/atoms/PrintScaleSelector.js +0 -61
  31. package/examples/react-next/atoms/ZoomToScaleButton.js +0 -57
  32. package/examples/react-next/components/AuthComponent.js +0 -88
  33. package/examples/react-next/components/MapButtons.js +0 -108
  34. package/examples/react-next/components/MapFilters.js +0 -120
  35. package/examples/react-next/components/MapIframe.js +0 -25
  36. package/examples/react-next/components/MapInfo.js +0 -36
  37. package/examples/react-next/components/MapLayers.js +0 -60
  38. package/examples/react-next/components/MapList.js +0 -51
  39. package/examples/react-next/components/MapPrint.js +0 -50
  40. package/examples/react-next/contexts/auth.js +0 -147
  41. package/examples/react-next/contexts/maps.js +0 -185
  42. package/examples/react-next/contexts/messages.js +0 -358
  43. package/examples/react-next/contexts/print.js +0 -125
  44. package/examples/react-next/env.sample +0 -3
  45. package/examples/react-next/eslint.config.mjs +0 -14
  46. package/examples/react-next/hooks/useMapEvents.js +0 -118
  47. package/examples/react-next/jsconfig.json +0 -7
  48. package/examples/react-next/next.config.mjs +0 -6
  49. package/examples/react-next/package.json +0 -25
  50. package/examples/react-next/pages/_app.js +0 -5
  51. package/examples/react-next/pages/index.js +0 -97
  52. package/examples/react-next/postcss.config.mjs +0 -8
  53. package/examples/react-next/public/discord.svg +0 -8
  54. package/examples/react-next/public/favicon.ico +0 -0
  55. package/examples/react-next/public/file.svg +0 -1
  56. package/examples/react-next/public/logo.png +0 -0
  57. package/examples/react-next/public/next.svg +0 -1
  58. package/examples/react-next/shared/constants.js +0 -48
  59. package/examples/react-next/shared/cookies.js +0 -23
  60. package/examples/react-next/styles/globals.css +0 -24
  61. package/examples/react-next/tailwind.config.mjs +0 -17
  62. package/examples/serverLess/dist/index.23420cfa.js +0 -2973
  63. package/examples/serverLess/dist/index.23420cfa.js.map +0 -1
  64. package/examples/serverLess/dist/index.91b6cacc.js +0 -2
  65. package/examples/serverLess/dist/index.91b6cacc.js.map +0 -1
  66. package/examples/serverLess/dist/index.html +0 -1
  67. package/examples/serverLess/index.html +0 -39
  68. package/examples/serverLess/main.js +0 -113
  69. package/examples/serverLess/package.json +0 -18
  70. package/examples/serverLess/readme.md +0 -41
  71. package/examples/simple/index.html +0 -23
  72. package/examples/simple/simple.js +0 -80
  73. package/examples/taigua/index.html +0 -55
  74. package/examples/taigua/main.js +0 -490
  75. package/examples/tester.css +0 -74
  76. package/examples/vidromap/index.js +0 -20
  77. package/examples/vidromap/index.php +0 -111
  78. package/flows.md +0 -73
  79. package/helpers.md +0 -45
  80. package/src/index.js +0 -882
  81. package/src/shared/iframe-communicator.js +0 -18
  82. package/webpack.config.js +0 -22
package/examples/vidromap/index.php DELETED
@@ -1,111 +0,0 @@
1
- <html>
2
- <head>
3
- <title>🛠️ MAP TESTER - Vidro Map</title>
4
- <link rel="stylesheet" href="../tester.css"></link>
5
- <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-32x32.png" sizes="32x32" />
6
- <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-16x16.png" sizes="16x16" />
7
- </head>
8
- <body>
9
-
10
-
11
-
12
- <div class="form" id="userData">
13
- <h1>Vidromap</h1>
14
-
15
- <div id="sessionToken"></div>
16
- <div>
17
- Paste your code here:<br> <textarea name="code" id="code" rows="10" cols="100" placeholder="">
18
- </textarea>
19
- </div>
20
- <div>
21
- <button id="btGetElementsFromLayer">List Elements from layer</button>
22
- <select id="format">
23
- <option id="xml" selected value="xml">XML</option>
24
- <option id="json" value="json">JSON</option>
25
- </select> <small>Output format</small> Limit:
26
- <input type="limit" name="limit" id="limit" size="4" value="2"><br><br>
27
- </div>
28
- <div>
29
- Debug
30
- <button id="btDebug">Debug</button>
31
- <select id="debug">
32
- <option id="1" selected value=1>Show logs</option>
33
- <option id="0" value=0>Hide logs</option>
34
- </select> <small>Show/hide component logs</small>
35
- </div>
36
- </div>
37
- <div>
38
- <button id="btLoadIframe">Load Map</button> -
39
- <button id="btLoadWMSLayers">Load layers from wms</button>
40
- </div>
41
- <div id="Error_container"></div>
42
- <div id="mapContainer">
43
-
44
- <div id="iframes-container">
45
-
46
- </div>
47
- <hr />
48
- <pre id="Result_container"></pre>
49
- <hr/>
50
- <h2>Custom colors</h2>
51
- Geom fill color: <input type="text" name="geom_fill_color" id="geom_fill_color" size="12" value="rgba(252,0,0,0.37)"><br><br>
52
- Geom stroke color: <input type="text" name="geom_stroke_color" id="geom_stroke_color" size="12" value="rgba(252,0,0,0.37)"><br><br>
53
- Geom stroke width: <input type="text" name="geom_stroke_width" id="geom_stroke_width" size="4" value="1"><br><br>
54
- Geom shape for points - circle/square: <select id="geom_shape">
55
- <option id="circle" selected value="circle">Circle</option>
56
- <option id="square" value="square">Square</option>
57
- </select><br><br>
58
- Point radius: <input type="text" name="geom_radius" id="geom_radius" size="4" value="4"><br><br>
59
- <button id="btSetColors">Set colors</button> <br><br>
60
-
61
- <h2>Zoom</h2>
62
- <button id="btZoomIn">Zoom In</button>
63
- <button id="btZoomOut">Zoom Out</button>
64
- <button id="btZoomToExtent">Zoom to extent</button>
65
- <br><br>
66
- <button id="btZoomToCoordinates">Zoom to coordinates</button>
67
- ZoomToCoordinates level: <input type="text" name="zoomLevelToCoordinates" id="zoomLevelToCoordinates" size="5" value="4">
68
- <h2>Add geometry</h2>
69
- <button id="btAddPoint">Add point</button>
70
- <button id="btAddPolygon">Add polygon</button>
71
- <button id="btAddLine">Add line</button>
72
- <button id="btClear">Clear geometries</button>
73
- <h2>Info</h2>
74
- <button id="btWMSInfo" disabled="true">WMS Info</button>
75
- <select id="formatWMS">
76
- <option id="xml" selected value="xml">XML</option>
77
- <option id="json" value="json">JSON</option>
78
- </select> <small>Output format</small>
79
- <br>
80
- <h2>Layers</h2>
81
- Project Layers: <select id="projectlayers"></select> - <small>click on "Load Project Layers button</small> <button id="btToggleLayer">Add / Remove Layer</button><br><br>
82
- Displayed Layers: <select id="layers"></select> -
83
- <button id="btActiveLayer">Set Active Layer</button>
84
- <button id="btGetActiveLayer">Get Active Layer</button>
85
- <span id="currentActiveLayer"></span>
86
-
87
- <h2>Geolocation</h2>
88
- <button id="btGeolocalize">Geolocalize User</button>
89
- <button id="btStopGeolocalize">Cancel Geolocalize</button>
90
-
91
- <h2>Highlight</h2>
92
- <button id="btHighlight">Highlight geom</button>
93
- Geom: <input type="text" name="geom" id="geom" size="25" value="">
94
- <br>
95
- Highlight to zoom level: <input type="text" name="zoomLevel" id="zoomLevel" size="5" value=""> or Zoom to geometry: <input type="checkbox" name="zoomToHighlightCheck" id="zoomToHighlightCheck" size="5" value="">
96
- <h2>GeoJSON</h2>
97
- <input type="file" id="geojsonfile" name="geojsonfile" accept="application/json"><small> Select geoJSON file</small><br><br>
98
- <small>Or paste geoJSON content</small><br><br>
99
- <textarea name="geojsondata" id="geojsondata" rows="10" cols="80" placeholder=""></textarea> <br><br>
100
-
101
-
102
- <button id="btAddGeoJSON">Add GeoJSON </button><br><br>
103
-
104
-
105
- </div>
106
-
107
- <script src="https://unpkg.com/@vidro/map-handler@1.0.11/dist/map-handler.js"></script>
108
- <script src="../full/tester.js"></script>
109
- <script src="./index.js"></script>
110
- </body>
111
- </html>
package/flows.md DELETED
@@ -1,73 +0,0 @@
1
- # Map Handler flows
2
-
3
- This document defines use case flows of map handler
4
-
5
- ## Vidromaps basic flow
6
-
7
- Vidromaps basic flow
8
-
9
- 1. Login to giswater - API `letsgo`
10
- 2. Get map - API `map/{project_id}`
11
- 3. Load iframe
12
-
13
- ![](doc/vidromaps-basic.png)
14
-
15
- ## Giswater basic flow
16
-
17
- Giswater basic flow
18
-
19
- 1. Login to giswater - API `letsgo`
20
- 2. Get map - API `map/{project_id}`
21
- 3. Load iframe
22
-
23
-
24
- ![](doc/giswater.png)
25
-
26
- ## Giswater info
27
-
28
- Giswater info can be performed using mapHandler or usind API REST methods
29
-
30
- 1. Login to giswater - API `letsgo`
31
- 2. Get map - API `map/{project_id}`
32
- 3. Load iframe
33
- 4. Instance mapHandler - `new VidroMaps.Communicator({sessionToken});`
34
- 5. Click on map
35
-
36
- **Using mapHandler**
37
-
38
- 6. Info`mapHandler.js` method [**`infofromcoordinates `**](https://github.com/Vidro-Software-SL/maphandler#infofromcoordinates)
39
- ![](doc/giswaterInfo.png)
40
-
41
- **Using API REST**
42
-
43
- 6. Listen event [**`coordinates`**](https://github.com/Vidro-Software-SL/maphandler#coordinates)
44
- 7. POST to API `giswater/info` with x, y, srid and device parameters.
45
-
46
- ![](doc/giswaterInfoApi.png)
47
-
48
-
49
- ## Giswater display layer
50
-
51
- Display a Giswater layer using mapHandler
52
-
53
- 1. Login to giswater - API `letsgo`
54
- 2. Get map - API `map/{project_id}`
55
- 3. Load iframe
56
- 4. Instance mapHandler - `new VidroMaps.Communicator({sessionToken});`
57
- 5. Render layer using `mapHandler.js` method [**`toggleLayer`**](https://github.com/Vidro-Software-SL/maphandler#togglelayer)
58
-
59
- ![](doc/togglelayergiswater.png)
60
-
61
- ## Giswater JSON layer
62
-
63
- Giswater layers can be rendered as geojson.
64
-
65
- 1. Login to giswater - API `letsgo`
66
- 2. Get map - API `map/{project_id}`
67
- 3. Load iframe
68
- 4. Get geojson data for a layer - API `giswater/geojson/{project_id}/{layer_name}`.
69
- 5. Instance mapHandler - `new VidroMaps.Communicator({sessionToken});`
70
- 6. Render geojson data using `maphandler.js` method [**`addGeoJSON`**](https://github.com/Vidro-Software-SL/maphandler#addgeojson)
71
- ![](doc/giswatergeojson.png)
72
-
73
-
package/helpers.md DELETED
@@ -1,45 +0,0 @@
1
- ##### Image to ArrayBuffer
2
-
3
-
4
- >Helper function to fetch image as ArrayBuffer
5
-
6
- ```
7
- const fetchImageAsArrayBuffer = async (path) => {
8
- try {
9
- const response = await fetch(path); // Fetch the image from the path
10
- const buffer = await response.arrayBuffer(); // Convert response to ArrayBuffer
11
- return buffer; // Return the binary data
12
- } catch (error) {
13
- console.error("Error fetching image:", error);
14
- throw error;
15
- }
16
- };
17
- ```
18
-
19
- >Helper function to set image as ArrayBuffer with vanilla js
20
-
21
-
22
- ```
23
- // Simulate a call to Dropbox or other service that can
24
- // return an image as an ArrayBuffer.
25
- var xhr = new XMLHttpRequest();
26
-
27
- // Use JSFiddle logo as a sample image to avoid complicating
28
- // this example with cross-domain issues.
29
- xhr.open( "GET", "http://fiddle.jshell.net/img/logo.png", true );
30
-
31
- // Ask for the result as an ArrayBuffer.
32
- xhr.responseType = "arraybuffer";
33
-
34
- xhr.onload = function( e ) {
35
- // Obtain a blob: URL for the image data.
36
- var arrayBufferView = new Uint8Array( this.response );
37
- var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
38
- var urlCreator = window.URL || window.webkitURL;
39
- var imageUrl = urlCreator.createObjectURL( blob );
40
- var img = document.querySelector( "#photo" );
41
- img.src = imageUrl;
42
- };
43
-
44
- xhr.send();
45
- ```