Skip to content

Commit

Permalink
Merge branch 'main' into geodesics
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdon
bdon authored Aug 23, 2024
2 parents e4665bc + f965349 commit 2cb580e
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 79 deletions.
69 changes: 68 additions & 1 deletion src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,24 @@
width: 100%;
}

h1 {
font-size: 24px;
margin: 0;
}

.container {
display: flex;
}

.controls {
padding-top: 10px;

}

.sidebar {
width: 25%;
padding: 1rem;
min-width: 250px;
padding: 10px;
}

#map {
Expand All @@ -19,4 +30,60 @@

.faq {
font-size: 12px;
}

.input {
display: flex;
}

.label {
min-width: 100px;
width: 30%;
padding: 10px;
}

.text {
padding: 10px;
border-top: solid 1px #f1f1f1;
margin-top: 10px;
}

.input input,
.input select {
width: 70%;
text-align: center;
margin-right: 10px;
box-sizing: border-box;
border: solid 1px #d0d0d0;
height: 30px;
display: flex;
align-self: center;
}



@media screen and (max-width: 768px) {
.container {
display: flex;
flex-direction: column;
flex-flow: column-reverse;
}

#map {
width: 100%;
height: 50vh;
}

.sidebar {
width: calc(100% - 20px);
}

.faq {
font-size: 10px;
}

.text {
height: 20vh;
overflow: scroll;
}
}
142 changes: 70 additions & 72 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,80 +190,78 @@ function App() {

return (
<div class="container">
<div class="controls">
<select
onChange={(e) => {
if (draw) {
draw.setMode(e.target.value);
}
}}
>
<option value="rectangle">rectangle mode</option>
<option value="polygon">polygon mode</option>
<option value="angled-rectangle">angled rectangle mode</option>
<option value="circle">circle mode</option>
</select>
<p>
max cells:{" "}
<input
type="text"
value={maxCells()}
onInput={(e) => {
setMaxCells(+e.target.value || 1);
}}
/>
</p>
<p>
max level:{" "}
<input
type="text"
value={maxLevel()}
onInput={(e) => {
setMaxLevel(+e.target.value || 1);
}}
/>
</p>
<button onClick={clear}>clear</button>
<p>
Visual demo of{" "}
<a target="_blank" href="https://github.com/missinglink/s2js">
s2js
</a>
, a pure TypeScript implementation of{" "}
<a href="http://s2geometry.io" target="_blank">
S2 Geometry.
</a>
<br />
Draw any region to see its cell covering.
<br />
Built with{" "}
<a target="_blank" href="http://terradraw.io">
Terra Draw
</a>
,{" "}
<a target="_blank" href="http://maplibre.org">
MapLibre
</a>{" "}
and{" "}
<a target="_blank" href="https://github.com/protomaps">
Protomaps
</a>{" "}
tiles.
</p>
<p class="faq">
<strong>Why are there gaps between cells?</strong> The visual cells
are approximated by trapezoids; in reality they are geodesics, or
straight on great circles.
</p>
<p class="faq">
<strong>Why don't the cells cover my region?</strong> The library
interprets edges in the input also as geodesics; this can be mitigated
by shorter distances between boundary vertices.
</p>
<a href="https://github.com/bdon/s2js-demos">Fork me on GitHub</a>
<div class="sidebar">
<div class="controls">
<div class="input">
<div class="label">
<label>
draw mode:
</label>
</div>
<select
onChange={(e) => {
if (draw) {
draw.setMode(e.target.value);
}
}}
>
<option value="rectangle">rectangle mode</option>
<option value="polygon">polygon mode</option>
<option value="angled-rectangle">angled rectangle mode</option>
<option value="circle">circle mode</option>
</select>
</div>

<div class="input">
<div class="label">
<label>
max cells:
</label>
</div>
<input
type="text"
value={maxCells()}
onInput={(e) => {
setMaxCells(+e.target.value || 1);
}}
/>
</div>
<div class="input">
<div class="label">
<label>
max level:
</label>
</div>
<input
type="text"
value={maxLevel()}
onInput={(e) => {
setMaxLevel(+e.target.value || 1);
}}
/>
</div>
<button onClick={clear}>clear</button>
</div>
<div class="text">
<h1>s2js Demo</h1>
<p>
Visual demo of <a target="_blank" href="https://github.com/missinglink/s2js">s2js</a>, a pure TypeScript implementation of <a href="http://s2geometry.io" target="_blank">S2 Geometry.</a><br />

Draw any region to see its cell covering.<br />

Built with <a target="_blank" href="http://terradraw.io">Terra Draw</a>, <a target="_blank" href="http://maplibre.org">MapLibre</a> and <a target="_blank" href="https://github.com/protomaps">Protomaps</a> tiles.
</p>
<p class="faq">
<strong>Why are there gaps between cells?</strong> The visual cells are approximated by trapezoids; in reality they are geodesics, or straight on great circles.
</p>
<p class="faq">
<strong>Why don't the cells cover my region?</strong> The library interprets edges in the input also as geodesics; this can be mitigated by shorter distances between boundary vertices.
</p>
<a href="https://github.com/bdon/s2js-demos">Fork me on GitHub</a>
</div>
</div>
<div id="map"></div>
</div>
</div >
);
}

Expand Down
12 changes: 6 additions & 6 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,13 @@ a {
color: #646cff;
text-decoration: inherit;
}

a:hover {
color: #535bf2;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
Expand All @@ -46,9 +43,11 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}

button:hover {
border-color: #646cff;
}

button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
Expand All @@ -59,11 +58,12 @@ button:focus-visible {
color: #213547;
background-color: #ffffff;
}

a:hover {
color: #747bff;
}

button {
background-color: #f9f9f9;
}
}

}

0 comments on commit 2cb580e

Please sign in to comment.