<!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 </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 </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>