inital commit

2023-12-04 16:44:09 +01:00
commit 4bb7f03ec1
21 changed files with 5267 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Using OpenLayers with Vite</title>
+  </head>
+  <body>
+      
+    <div id="a2g-costum-icons" data-content='[{"uid": 1, "name": "Raphael Martin","icon":"data/icons/frog.svg"},{"uid": 2, "name": "Anna Siller","icon":"data/icons/logo-slim.svg"}]'></div>
+    <div id="a2g-map-style" data-content=''></div>
+    
+    
+    
+    
+    <div class="a2g-map-wrap">
+        <div class="ol-popup a2g-map-popup d-none">
+            <a href="#" class="ol-popup-closer a2g-map-popup-closer"></a>
+            <div class="a2g-map-popup-content"></div>
+        </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input a2g-map-marker-visible-switcher" type="checkbox">
+            <label class="form-check-label">hide marker</label>
+        </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input a2g-map-geolocate-me" type="checkbox">
+            <label class="form-check-label">locate me</label>
+        </div>
+        <div>
+            <label>Geometry type &nbsp;</label>
+            <select class="a2g-map-layer-select">
+            </select>
+        </div>
+        <input class="a2g-map-layer-swipe" type="range" style="width: 100%; display: none;" value="0">
+        <div id="random1" class="a2g-map"
+               data-map-config='{
+                "markerSource": "data/geojson/photovoltaic.json",
+                "defaultMarkerIcon": "data/icons/frog.svg",
+                "zoom": 6,
+                "maxZoom": 13,
+                "centerLon": 19,
+                "centerLat": -30.1,
+                "useLayerSlider": false,
+                "centerCountry": true,
+                "style": {
+                        "featureOverlay":{
+                            "stroke":{
+                                "color":  "rgba(240,145,48,0.7)",
+                                "width": 4
+                            }
+                            }
+                   },
+                "mapLayers": [
+                    
+                    {
+                        "layer": "country",
+                        "config": {
+                            "layer": "country",
+                            "countryGeoSource": "/data/countries.geojson"
+                            },
+                        "label": "country (free)",
+                        "active": true
+                    },{
+                        "layer": "stamen",
+                        "config": {
+                            "layer": "terrain"
+                        },
+                        "label": "stamen terrain (free)",
+                        "active": true
+                    },
+                    {
+                        "layer": "stamen",
+                        "config": {
+                            "layer": "watercolor"
+                        },
+                        "label": "stamen watercolor (free)",
+                        "active": false
+                    },
+                    {
+                        "layer": "osm",
+                        "config":[],
+                        "label": "osm (free)",
+                        "active": true
+                    },
+                    {
+                        "layer": "stamen",
+                        "config": {
+                            "layer": "toner"
+                        },
+                        "label": "stamen toner (free)",
+                        "active": false
+                    }
+                ]
+             }'></div>
+        <div class="form-check form-switch">
+            <input class="form-check-input a2g-map-marker-visible-switcher" type="checkbox">
+            <label class="form-check-label">hide marker</label>
+        </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input a2g-map-geolocate-me" type="checkbox">
+            <label class="form-check-label">locate me</label>
+        </div>
+    <form class="form-inline">
+        <label>Geometry type &nbsp;</label>
+        <select class="a2g-map-layer-select">
+        </select>
+    </form>
+        
+    </div> 
+    
+    <div class="a2g-map-wrap">
+        <div class="ol-popup a2g-map-popup" >
+      <!--<a href="#" class="ol-popup-closer a2g-map-popup-closer"></a>-->
+      <div class="a2g-map-popup-content"></div>
+    </div>
+        <input class="a2g-map-layer-swipe" type="range" style="width: 100%; display: none;" value="40">
+        <div class="a2g-map" 
+             
+             data-map-config='{"zoom":1,"maxZoom":18,"centerLon":0,"centerLat":0,"mapLayers":[{"layer":"osm","config":[],"label":"osm_map_layer","active":true},{"layer":"stamen","config":{"layer":"watercolor"},"label":"stamen_map_watercolor","active":true}]}'
+        
+    ></div>
+    <!--    
+        <input id="external-map-button" type="button" value="Open external map"></input>
+        <span id="blocker-notice" hidden>Could not open map in external window. If you are using a popup or ad blocker you may need to disable it for this example.</span>
+        -->
+
+
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>