Skip to content

Commit 0943bba

Browse files
geographikageographika
authored
Add Geostyler demo page (#23)
* Add GeoStyler SLD page * Add sample Mapfile, classes, and symbols
1 parent c09bdfd commit 0943bba

16 files changed

Lines changed: 1073 additions & 6 deletions

‎workshop/exercises/app/css/geostyler.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
@import "node_modules/ol/ol.css";
2+
3+
html, body {
4+
margin: 0;
5+
padding: 0;
6+
height: 100%;
7+
font-family: sans-serif;
8+
}
9+
10+
/* 2 x 2 layout: maps on top, source text below */
11+
#container {
12+
display: flex;
13+
flex-direction: column;
14+
height: 100vh;
15+
}
16+
17+
#maps,
18+
#sources {
19+
flex: 1;
20+
display: flex;
21+
min-height: 0; /* lets the halves shrink so the code panels can scroll */
22+
}
23+
24+
#maps {
25+
border-bottom: 2px solid #ccc;
26+
}
27+
28+
.panel {
29+
flex: 1;
30+
display: flex;
31+
flex-direction: column;
32+
min-width: 0;
33+
min-height: 0;
34+
}
35+
36+
.panel + .panel {
37+
border-left: 2px solid #ccc;
38+
}
39+
40+
.panel-title {
41+
padding: 4px 10px;
42+
font-size: 12px;
43+
font-weight: bold;
44+
color: #444;
45+
background: #f3f3f3;
46+
border-bottom: 1px solid #ddd;
47+
}
48+
49+
.file-name {
50+
font-weight: normal;
51+
color: #777;
52+
font-family: Consolas, "Courier New", monospace;
53+
}
54+
55+
/* Maps */
56+
.map {
57+
flex: 1;
58+
min-height: 0;
59+
}
60+
61+
/* Greyscale basemap, so the styled layers stand out */
62+
.bw {
63+
filter: grayscale(100%);
64+
}
65+
66+
/* The layer selector sits in the top-right corner of the left map */
67+
#panel-left {
68+
position: relative;
69+
}
70+
71+
#toolbar {
72+
position: absolute;
73+
top: 32px; /* just below the panel title bar */
74+
right: 8px;
75+
z-index: 1000;
76+
display: flex;
77+
align-items: center;
78+
gap: 8px;
79+
background: white;
80+
padding: 6px 10px;
81+
border-radius: 6px;
82+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
83+
font-size: 13px;
84+
}
85+
86+
#layer-select {
87+
font-size: 13px;
88+
padding: 3px 6px;
89+
border: 1px solid #ccc;
90+
border-radius: 4px;
91+
}
92+
93+
/* Bottom-left panel: Classes takes any remaining space, Symbols only what
94+
it needs. If both don't fit, they shrink in proportion to their content. */
95+
.subpanel {
96+
display: flex;
97+
flex-direction: column;
98+
min-height: 0;
99+
}
100+
101+
.subpanel[hidden] {
102+
display: none;
103+
}
104+
105+
#class-panel {
106+
flex: 1 1 auto;
107+
}
108+
109+
#sym-panel {
110+
flex: 0 1 auto;
111+
border-top: 2px solid #ccc;
112+
}
113+
114+
/* Read-only CodeMirror viewers */
115+
.code {
116+
flex: 1 1 auto;
117+
min-height: 0;
118+
display: flex;
119+
overflow: hidden;
120+
}
121+
122+
.code .cm-editor {
123+
flex: 1;
124+
min-height: 0;
125+
font-size: 12px;
126+
}
127+
128+
/* Keep the last line visible above a horizontal scrollbar */
129+
.code .cm-content {
130+
padding-bottom: 40px;
131+
}

‎workshop/exercises/app/geostyler.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>OpenLayers and GeoStyler Demo</title>
8+
</head>
9+
<body>
10+
<main id="container">
11+
<!-- Top half: MapServer's WMS on the left (with the layer selector),
12+
and the same layer styled in OpenLayers from the SLD on the right -->
13+
<section id="maps">
14+
<div class="panel" id="panel-left">
15+
<div class="panel-title">MapServer WMS</div>
16+
<div id="toolbar">
17+
<label for="layer-select">Layer:</label>
18+
<select id="layer-select"></select>
19+
</div>
20+
<div id="map-left" class="map"></div>
21+
</div>
22+
<div class="panel">
23+
<div class="panel-title">OpenLayers + GeoStyler (SLD)</div>
24+
<div id="map-right" class="map"></div>
25+
</div>
26+
</section>
27+
28+
<!-- Bottom half: the Mapfile includes and the SLD generated from them -->
29+
<section id="sources">
30+
<div class="panel">
31+
<div class="subpanel" id="class-panel">
32+
<div class="panel-title">Classes <span id="class-file-name" class="file-name"></span></div>
33+
<div id="class-text" class="code"></div>
34+
</div>
35+
<div class="subpanel" id="sym-panel" hidden>
36+
<div class="panel-title">Symbols <span id="sym-file-name" class="file-name"></span></div>
37+
<div id="sym-text" class="code"></div>
38+
</div>
39+
</div>
40+
<div class="panel">
41+
<div class="panel-title">SLD (applied in OpenLayers)</div>
42+
<div id="sld-text" class="code"></div>
43+
</div>
44+
</section>
45+
</main>
46+
<script type="module" src="./js/geostyler.js"></script>
47+
</body>
48+
</html>

‎workshop/exercises/app/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ <h2>Advanced</h2>
4444
<li><a href="sld.html">SLD - Styled Layer Descriptor</a></li>
4545
<li><a href="stac.html">STAC</a></li>
4646
<li><a href="other-projections.html">Working with non-EPSG Coordinate Reference Systems (CRS)</a></li>
47+
<li><a href="geostyler.html">Working with GeoStyler</a></li>
4748
</ul>
4849
<h2>Miscellaneous</h2>
4950
<ul>

0 commit comments

Comments
 (0)