133 lines
5.2 KiB
HTML
Executable File
133 lines
5.2 KiB
HTML
Executable File
<!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>
|