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

31
examples/cartodb.html
View File

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

2
examples/chaikin.html
View File

@@ -12,7 +12,7 @@ docs: >
tags: "smooth, smoothing, chaikin" tags: "smooth, smoothing, chaikin"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form>
<label for="shall-smoothen">Smooth drawn geometry?</label> <label for="shall-smoothen">Smooth drawn geometry?</label>
<input id="shall-smoothen" type="checkbox" checked><br> <input id="shall-smoothen" type="checkbox" checked><br>
<label for="iterations">Number of smoothings</label> <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> <div id="map" class="map"></div>
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="distance" class="col-form-label">Cluster distance</label> <label for="distance" class="col-form-label pb-0">Cluster distance</label>
<input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/> <input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
<small class="form-text text-muted"> <small class="form-text text-muted">
The distance within which features will be clustered together. The distance within which features will be clustered together.
</small> </small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="min-distance" class="col-form-label">Minimum distance</label> <label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
<input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/> <input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
<small class="form-text text-muted"> <small class="form-text text-muted">
The minimum distance between clusters. Can't be larger than the configured distance. The minimum distance between clusters. Can't be larger than the configured distance.
</small> </small>

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

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

28
examples/draw-features.html
View File

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

28
examples/draw-shapes.html
View File

@@ -12,16 +12,22 @@ docs: >
circle. Star drawing uses a custom geometry function that converts a circle 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. into a star using the center and radius provided by the draw interaction.
tags: "draw, edit, freehand, vector" 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> <div id="map" class="map"></div>
<form class="form-inline"> <div class="row">
<label for="type">Shape type: &nbsp;</label> <div class="col-auto">
<select class="form-control me-2 mb-2 mt-2" id="type"> <span class="input-group">
<option value="Circle">Circle</option> <label class="input-group-text" for="type">Shape type:</label>
<option value="Square">Square</option> <select class="form-select" id="type">
<option value="Box">Box</option> <option value="Circle">Circle</option>
<option value="Star">Star</option> <option value="Square">Square</option>
<option value="None">None</option> <option value="Box">Box</option>
</select> <option value="Star">Star</option>
<input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo"> <option value="None">None</option>
</form> </select>
<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 - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
--- ---
<div id="map" class="map"></div> <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> <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; background-color: lightgrey;
padding: 4px; padding: 4px;
} }
.button { .geolocate-buttons {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 10px; left: 10px;
@@ -39,9 +39,9 @@ tags: "fullscreen, geolocation, orientation, mobile"
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div id="info"></div> <div id="info"></div>
<img id="geolocation_marker" src="data/geolocation_marker.png" /> <img id="geolocation_marker" src="data/geolocation_marker.png" />
<div class="button"> <div class="geolocate-buttons">
<button id="geolocate">Geolocate Me!</button> <button id="geolocate" class="btn btn-primary">Geolocate Me!</button>
<button id="simulate">Simulate</button> <button id="simulate" class="btn btn-secondary">Simulate</button>
</div> </div>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script> <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script src="geolocation-orientation.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> <div id="map" class="map"></div>
<span id="status">Try to click the line in the map.</span> <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> <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="0" selected>0 Pixels</option>
<option value="5">5 Pixels</option> <option value="5">5 Pixels</option>
<option value="10">10 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 --> <!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu"> <nav class="collapse navbar-collapse" id="olmenu">
<form class="form-inline" role="search"> <form role="search">
<div class="input-group"> <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> <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> <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: cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
value: Your Mapbox access token from https://mapbox.com/ here 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> <div id="map" class="map"></div>
<button type="button" class="btn btn-default" id="India">India</button> <button type="button" class="btn btn-light" id="India">India</button>
<button type="button" class="btn btn-default" id="Argentina">Argentina</button> <button type="button" class="btn btn-light" id="Argentina">Argentina</button>
<button type="button" class="btn btn-default" id="Nigeria">Nigeria</button> <button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
<button type="button" class="btn btn-default" id="Sweden">Sweden</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" tags: "draw, edit, measure, modify, style, vector"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form>
<label for="type">Measurement type &nbsp;</label> <label for="type">Measurement type &nbsp;</label>
<select id="type"> <select id="type">
<option value="LineString">Length (LineString)</option> <option value="LineString">Length (LineString)</option>

2
examples/measure.html
View File

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

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

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

7
examples/reprojection.css
View File

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

67
examples/reprojection.html
View File

@@ -7,42 +7,33 @@ docs: >
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid" tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form class="reprojection-form">
<div class="col-md-3"> <label for="base-layer">Base map:</label>
<label for="base-layer">Base map:</label> <select id="base-layer">
<select id="base-layer"> <option value="osm">OSM (EPSG:3857)</option>
<option value="osm">OSM (EPSG:3857)</option> <option value="wms4326">WMS (EPSG:4326)</option>
<option value="wms4326">WMS (EPSG:4326)</option> </select>
</select>
</div> <label for="overlay-layer">Overlay map:</label>
<div class="col-md-4"> <select id="overlay-layer">
<label for="overlay-layer">Overlay map:</label> <option value="bng">British National Grid (EPSG:27700)</option>
<select id="overlay-layer"> <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
<option value="bng">British National Grid (EPSG:27700)</option> <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option> <option value="states">United States (EPSG:3857)</option>
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option> </select>
<option value="states">United States (EPSG:3857)</option>
</select> <label for="view-projection">View projection:</label>
</div> <select id="view-projection">
<div class="col-md-5"> <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
<label for="view-projection">View projection:</label> <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
<select id="view-projection"> <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option> <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option> <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
<option value="ESRI:54009">Mollweide (ESRI:54009)</option> <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
<option value="EPSG:27700">British National Grid (EPSG:27700)</option> <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option> <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option> </select>
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option> <label for="render-edges">Render reprojection edges:</label>
</select> <span><input type="checkbox" id="render-edges" /></span>
</div>
</form>
<form class="form-inline">
<div class="col-md-auto">
<label>
Render reprojection edges:&nbsp;
<input type="checkbox" id="render-edges" />
</label>
</div>
</form> </form>

4
examples/select-features.html
View File

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

2
examples/tracing.html
View File

@@ -12,7 +12,7 @@ docs: >
tags: "draw, trace, snap, vector, topology" tags: "draw, trace, snap, vector, topology"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form>
<label for="type">Geometry type &nbsp;</label> <label for="type">Geometry type &nbsp;</label>
<select id="type"> <select id="type">
<option value="Polygon">Polygon</option> <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 - https://code.jquery.com/jquery-3.5.1.min.js
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form>
<label for="type">Draw or modify &nbsp;</label> <label for="type">Draw or modify &nbsp;</label>
<select id="type"> <select id="type">
<option value="DRAW">Draw</option> <option value="DRAW">Draw</option>

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

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