ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update example styles to work with bootstrap 5.2

Browse Source
This commit is contained in:
Maximilian Krög
2022-08-21 11:24:43 +02:00
parent bc9a6f230c
commit 523a33c81a
23 changed files with 137 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
examples/cartodb.html
View File

@@ -6,21 +6,18 @@ docs: >
A simple example with an anonymous cartodb map
tags: "simple, openstreetmap, attribution"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div>
<form class="form-horizontal">
<label>
Show countries larger than
<select id="country-area" class="form-control">
<div id="map" class="map"></div>
<form class="row">
<div class="col-auto">
<div class="input-group">
<label for="country-area" class="input-group-text">Show european countries larger than</label>
<select id="country-area" class="form-select">
<option value="0" default>0 ㎢</option>
<option value="5000">5000 ㎢</option>
<option value="10000">10000 ㎢</option>
<option value="50000">50000 ㎢</option>
<option value="100000">100000 ㎢</option>
</select>
</label>
</form>
</div>
</div>
</div>
</form>

2
examples/chaikin.html
View File

@@ -12,7 +12,7 @@ docs: >
tags: "smooth, smoothing, chaikin"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="shall-smoothen">Smooth drawn geometry?</label>
<input id="shall-smoothen" type="checkbox" checked><br>
<label for="iterations">Number of smoothings</label>

8
examples/cluster.html
View File

@@ -9,15 +9,15 @@ tags: "cluster, vector"
<div id="map" class="map"></div>
<form>
<div class="form-group">
<label for="distance" class="col-form-label">Cluster distance</label>
<input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
<label for="distance" class="col-form-label pb-0">Cluster distance</label>
<input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
<small class="form-text text-muted">
The distance within which features will be clustered together.
</small>
</div>
<div class="form-group">
<label for="min-distance" class="col-form-label">Minimum distance</label>
<input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
<label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
<input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
<small class="form-text text-muted">
The minimum distance between clusters. Can't be larger than the configured distance.
</small>

2
examples/draw-and-modify-features.html
View File

@@ -7,7 +7,7 @@ docs: >
tags: "draw, edit, modify, vector, featureoverlay"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>

2
examples/draw-and-modify-geodesic.html
View File

@@ -13,7 +13,7 @@ docs: >
tags: "draw, edit, modify, vector, circle, sphere, geodesic"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>

16
examples/draw-features.html
View File

@@ -8,16 +8,22 @@ docs: >
point. To activate freehand drawing for lines, polygons, and circles, hold
the `Shift` key. To remove the last point of a line or polygon, press "Undo".
tags: "draw, edit, freehand, vector"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form class="form-inline">
<label for="type">Geometry type: &nbsp;</label>
<select class="form-control me-2 mb-2 mt-2" id="type">
<div class="row">
<div class="col-auto">
<span class="input-group">
<label class="input-group-text" for="type">Geometry type:</label>
<select class="form-select" id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">None</option>
</select>
<input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form>
<input class="form-control" type="button" value="Undo" id="undo">
</span>
</div>
</div>

2
examples/draw-freehand.html
View File

@@ -11,7 +11,7 @@ docs: >
tags: "draw, edit, freehand, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="LineString">LineString</option>

16
examples/draw-shapes.html
View File

@@ -12,16 +12,22 @@ docs: >
circle. Star drawing uses a custom geometry function that converts a circle
into a star using the center and radius provided by the draw interaction.
tags: "draw, edit, freehand, vector"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form class="form-inline">
<label for="type">Shape type: &nbsp;</label>
<select class="form-control me-2 mb-2 mt-2" id="type">
<div class="row">
<div class="col-auto">
<span class="input-group">
<label class="input-group-text" for="type">Shape type:</label>
<select class="form-select" id="type">
<option value="Circle">Circle</option>
<option value="Square">Square</option>
<option value="Box">Box</option>
<option value="Star">Star</option>
<option value="None">None</option>
</select>
<input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form>
<input class="form-control" type="button" value="Undo" id="undo">
</span>
</div>
</div>

2
examples/export-map.html
View File

@@ -11,5 +11,5 @@ resources:
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
---
<div id="map" class="map"></div>
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
<a id="export-png" class="btn btn-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
<a id="image-download" download="map.png"></a>

8
examples/geolocation-orientation.html
View File

@@ -28,7 +28,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
background-color: lightgrey;
padding: 4px;
}
.button {
.geolocate-buttons {
position: absolute;
bottom: 40px;
left: 10px;
@@ -39,9 +39,9 @@ tags: "fullscreen, geolocation, orientation, mobile"
<div id="map" class="map"></div>
<div id="info"></div>
<img id="geolocation_marker" src="data/geolocation_marker.png" />
<div class="button">
<button id="geolocate">Geolocate Me!</button>
<button id="simulate">Simulate</button>
<div class="geolocate-buttons">
<button id="geolocate" class="btn btn-primary">Geolocate Me!</button>
<button id="simulate" class="btn btn-secondary">Simulate</button>
</div>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script src="geolocation-orientation.js"></script>

4
examples/hit-tolerance.html
View File

@@ -12,9 +12,9 @@ tags: "hitTolerance"
---
<div id="map" class="map"></div>
<span id="status">Try to click the line in the map.</span>
<form class="form-inline">
<form>
<label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</label>
<select id="hitTolerance" class="form-control">
<select id="hitTolerance">
<option value="0" selected>0 Pixels</option>
<option value="5">5 Pixels</option>
<option value="10">10 Pixels</option>

2
examples/index.html
View File

@@ -50,7 +50,7 @@
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<form class="form-inline" role="search">
<form role="search">
<div class="input-group">
<input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
<span class="input-group-text text-white bg-transparent" id="count"></span>

10
examples/layer-extent.html
View File

@@ -10,9 +10,11 @@ tags: "extent, tilejson"
cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
value: Your Mapbox access token from https://mapbox.com/ here
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<button type="button" class="btn btn-default" id="India">India</button>
<button type="button" class="btn btn-default" id="Argentina">Argentina</button>
<button type="button" class="btn btn-default" id="Nigeria">Nigeria</button>
<button type="button" class="btn btn-default" id="Sweden">Sweden</button>
<button type="button" class="btn btn-light" id="India">India</button>
<button type="button" class="btn btn-light" id="Argentina">Argentina</button>
<button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
<button type="button" class="btn btn-light" id="Sweden">Sweden</button>

2
examples/measure-style.html
View File

@@ -18,7 +18,7 @@ docs: >
tags: "draw, edit, measure, modify, style, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Measurement type &nbsp;</label>
<select id="type">
<option value="LineString">Length (LineString)</option>

2
examples/measure.html
View File

@@ -15,7 +15,7 @@ docs: >
tags: "draw, edit, measure, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Measurement type &nbsp;</label>
<select id="type">
<option value="length">Length (LineString)</option>

2
examples/modify-scale-and-rotate.html
View File

@@ -18,7 +18,7 @@ docs: >
tags: "draw, edit, modify, vector, scale, rotate"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>

42
examples/reprojection-by-code.html
View File

@@ -7,27 +7,31 @@ docs: >
OSM (EPSG:3857) to arbitrary projection by searching
in <a href="https://epsg.io/">EPSG.io</a> database.
tags: "reprojection, projection, proj4js, epsg.io, graticule"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form class="form-inline">
<label for="epsg-query">Search projection:&nbsp</label>
<form class="row">
<span class="col-auto">
<span class="input-group">
<label class="input-group-text" for="epsg-query">Search projection:&nbsp</label>
<input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
<button id="epsg-search" class="btn">Search</button>
<span id="epsg-result"></span>
<button class="btn btn-outline-secondary" id="epsg-search">Search</button>
</span>
</span>
<span class="mt-2" id="epsg-result">&nbsp;</span>
</form>
<form class="form-inline">
<label for="render-edges">
Render reprojection edges:&nbsp;
<input type="checkbox" id="render-edges" />
</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="show-tiles">
Show tile coordinates:&nbsp;
<input type="checkbox" id="show-tiles" />
</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="show-graticule">
Show graticule:&nbsp;
<input type="checkbox" id="show-graticule" />
</label>
<form>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="render-edges" />
<label class="form-check-label" for="render-edges">Render reprojection edges</label><br>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="show-tiles" />
<label class="form-check-label" for="show-tiles">Show tile coordinates</label><br>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="show-graticule" />
<label class="form-check-label" for="show-graticule">Show graticule</label>
</div>
</form>

7
examples/reprojection.css
View File

@@ -1,3 +1,6 @@
.form-inline label {
justify-content: left;
.reprojection-form {
display: grid;
grid-template-columns: max-content max-content;
grid-gap: 5px;
gap: 5px;
}

21
examples/reprojection.html
View File

@@ -7,15 +7,13 @@ docs: >
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
---
<div id="map" class="map"></div>
<form class="form-inline">
<div class="col-md-3">
<form class="reprojection-form">
<label for="base-layer">Base map:</label>
<select id="base-layer">
<option value="osm">OSM (EPSG:3857)</option>
<option value="wms4326">WMS (EPSG:4326)</option>
</select>
</div>
<div class="col-md-4">
<label for="overlay-layer">Overlay map:</label>
<select id="overlay-layer">
<option value="bng">British National Grid (EPSG:27700)</option>
@@ -23,8 +21,7 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
<option value="states">United States (EPSG:3857)</option>
</select>
</div>
<div class="col-md-5">
<label for="view-projection">View projection:</label>
<select id="view-projection">
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
@@ -36,13 +33,7 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
</select>
</div>
</form>
<form class="form-inline">
<div class="col-md-auto">
<label>
Render reprojection edges:&nbsp;
<input type="checkbox" id="render-edges" />
</label>
</div>
<label for="render-edges">Render reprojection edges:</label>
<span><input type="checkbox" id="render-edges" /></span>
</form>

4
examples/select-features.html
View File

@@ -9,9 +9,9 @@ docs: >
tags: "select, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Action type &nbsp;</label>
<select id="type" class="form-control">
<select id="type">
<option value="click" selected>Click</option>
<option value="singleclick">Single-click</option>
<option value="pointermove">Hover</option>

2
examples/tracing.html
View File

@@ -12,7 +12,7 @@ docs: >
tags: "draw, trace, snap, vector, topology"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Polygon">Polygon</option>

2
examples/vector-esri-edit.html
View File

@@ -9,7 +9,7 @@ resources:
- https://code.jquery.com/jquery-3.5.1.min.js
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Draw or modify &nbsp;</label>
<select id="type">
<option value="DRAW">Draw</option>

4
examples/vector-tile-selection.html
View File

@@ -14,9 +14,9 @@ docs: >
tags: "vector tiles, selection"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Action type &nbsp;</label>
<select id="type" class="form-control">
<select id="type">
<option value="singleselect" selected>Single Select</option>
<option value="multiselect">Multi Select</option>
<option value="singleselect-hover">Single Select on hover</option>