Skip to content

Fixes broken map UI due to expired Mapbox token #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
takt1232 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixes broken map UI due to expired Mapbox token #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c66fb8f
Updates
takt1232 Mar 18, 2026
7c40ee7
feat: add stitch_tiles.py to combine tiles into PNG/PDF
takt1232 Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
392 changes: 203 additions & 189 deletions src/UI/index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,190 +1,204 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title>Map Tiles Downloader</title>
<meta charset="utf-8"/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<!-- TODO replace jquery with react -->
<script src="jquery.min.js"></script>

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
<script src='mapbox-gl-draw-rectangle-mode.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>

<script src='https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js'></script>

<script src="async.min.js"></script>
<script src="turf.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
<script src="materialize/js/materialize.min.js"></script>
<link href='materialize/css/materialize.min.css' rel='stylesheet' type='text/css' />

<script src="main.js"></script>
<link href='fonts/fonts.css' rel='stylesheet' type='text/css' />
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>

<div id='max-height'>

<div id='map-view'></div>

<div id='main-title'>Map Tiles Downloader</div>

</div>

<div class='sidebar' id='main-sidebar'>

<div class='step-number'>
1
</div>
<div class="step-title">
Search an Area
</div>

<form id='search-form' class='sidebar-section row'>
<div class="input-field col s12">
<input id="location-box" type="text" value="New York" />
<label for="location-box">Enter a location</label>
</div>
</form>


<div class='step-number'>
2
</div>
<div class="step-title">
Select a Region
</div>

<div class='center-align sidebar-section'>
<p>
<a class="waves-effect waves-light z-depth-0 btn-small orange darken-3" id='rectangle-draw-button'>Draw a rectangle</a>
</p>
</div>

<div class='step-number'>
3
</div>
<div class="step-title">
Configure
</div>

<div class='sidebar-section'>
<div class="row">
<div class="input-field col s6">
<input id="zoom-from-box" type="text" value='15'/>
<label for="zoom-from-box" class="active">Zoom from:</label>
</div>
<div class="input-field col s6">
<input id="zoom-to-box" type="text" value='15'/>
<label for="zoom-to-box" class="active">Zoom to:</label>
</div>
</div>


<div class="row">
<div class="input-field col s10">
<input id="source-box" type="text" value='http://ecn.t0.tiles.virtualearth.net/tiles/a{quad}.jpeg?g=129&mkt=en&stl=H'>
<label for="source-box">Map Tile Source</label>
</div>
<div class="input-field col s2">
<a class='waves-effect waves-light btn-small blue-grey lighten-2 z-depth-0 dropdown-trigger' id='source-select' href='#' data-target='sources'>⯆</a>

<ul id='sources' class='dropdown-content'>
</ul>
</div>
</div>

<div class='center-align'>
<a class="waves-effect waves-light z-depth-0 btn-small orange darken-3" id='grid-preview-button'>Preview Grid</a>
</div>

</div>

<div class='step-number'>
4
</div>
<div class="step-title">
<a href='javascript:void(0)' id='more-options-toggle'>More Options (+)</a>
</div>

<div style='display:none;' id='more-options' class='sidebar-section row'>

<div class="input-field col s12">
<select id="output-scale" type="text">
<option value="1">1x</option>
<option value="2">2x</option>
</select>
<label for="output-scale">Output scale</label>
</div>

<div class="input-field col s12">
<input id="output-directory-box" type="text" value="{timestamp}">
<label for="output-directory-box">Output directory</label>
</div>

<div class="input-field col s12">
<select id="output-type" type="text">
<option value="directory">Directory</option>
<option value="mbtiles">Mbtiles</option>
<option value="repo">Repo</option>
</select>
<label for="output-type">Output type</label>
</div>

<div class="input-field col s12">
<input id="output-file-box" type="text" value="{z}/{x}/{y}.png">
<label for="output-file-box">Output file</label>
</div>

<div class="input-field col s12">
<input id="parallel-threads-box" type="text" value="4">
<label for="parallel-threads-box">Parallel downloads</label>
</div>
</div>

<button class='waves-effect waves-light z-depth-0 btn-large cyan darken-2 bottom-button' id='download-button'>Download</button>

</div>

<div class='sidebar' id='download-sidebar' style="display: none;">

<div class='step-number'>
5
</div>
<div class="step-title">
Downloading tiles
</div>
<div class="hints sidebar-section">
Please wait...
</div>

<div class="sidebar-section">
<div id='progress-radial' class=''>

</div>

<p id='progress-subtitle' class=''>

</p>

<p class='tile-strip '>
</p>

</div>

<textarea id='log-view' class="sidebar-section"></textarea>

<button class='waves-effect waves-light z-depth-0 btn-large red lighten-5 bottom-button' id='stop-button'>Stop</button>

</div>

</body>
</html>
<head>
<title>Map Tiles Downloader</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<script src="jquery.min.js"></script>
<script src="async.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/progressbar.js@1.1.0/dist/progressbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>

<!-- Leaflet -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- Leaflet Draw -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css"
/>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>

<!-- Materialize -->
<script src="materialize/js/materialize.min.js"></script>
<link
href="materialize/css/materialize.min.css"
rel="stylesheet"
type="text/css"
/>

<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i"
rel="stylesheet"
/>
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />

<script src="main.js"></script>
</head>
<body>
<div id="max-height">
<div id="map-view"></div>
<div id="main-title">Map Tiles Downloader</div>
</div>

<div class="sidebar" id="main-sidebar">
<div class="step-number">1</div>
<div class="step-title">Search an Area</div>

<form id="search-form" class="sidebar-section row">
<div class="input-field col s12">
<input id="location-box" type="text" value="New York" />
<label for="location-box">Enter a location</label>
</div>
</form>

<div class="step-number">2</div>
<div class="step-title">Select a Region</div>

<div class="center-align sidebar-section">
<p>
<a
class="waves-effect waves-light z-depth-0 btn-small orange darken-3"
id="rectangle-draw-button"
>Draw a rectangle</a
>
<a
class="waves-effect waves-light z-depth-0 btn-small grey darken-1"
id="cancel-draw-button"
style="display: none"
>Cancel</a
>
<a
class="waves-effect waves-light z-depth-0 btn-small red lighten-1"
id="reset-rectangle-button"
style="display: none"
>✕ Clear Rectangle</a
>
</p>
</div>

<div class="step-number">3</div>
<div class="step-title">Configure</div>

<div class="sidebar-section">
<div class="row">
<div class="input-field col s6">
<input id="zoom-from-box" type="text" value="15" />
<label for="zoom-from-box" class="active">Zoom from:</label>
</div>
<div class="input-field col s6">
<input id="zoom-to-box" type="text" value="15" />
<label for="zoom-to-box" class="active">Zoom to:</label>
</div>
</div>

<div class="row">
<div class="input-field col s10">
<input
id="source-box"
type="text"
value="https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
/>
<label for="source-box">Map Tile Source</label>
</div>
<div class="input-field col s2">
<a
class="waves-effect waves-light btn-small blue-grey lighten-2 z-depth-0 dropdown-trigger"
id="source-select"
href="#"
data-target="sources"
>⯆</a
>
<ul id="sources" class="dropdown-content"></ul>
</div>
</div>

<div class="center-align">
<a
class="waves-effect waves-light z-depth-0 btn-small orange darken-3"
id="grid-preview-button"
>Preview Grid</a
>
</div>
</div>

<div class="step-number">4</div>
<div class="step-title">
<a href="javascript:void(0)" id="more-options-toggle"
>More Options (+)</a
>
</div>

<div style="display: none" id="more-options" class="sidebar-section row">
<div class="input-field col s12">
<select id="output-scale" type="text">
<option value="1">1x</option>
<option value="2">2x</option>
</select>
<label for="output-scale">Output scale</label>
</div>

<div class="input-field col s12">
<input id="output-directory-box" type="text" value="{timestamp}" />
<label for="output-directory-box">Output directory</label>
</div>

<div class="input-field col s12">
<select id="output-type" type="text">
<option value="directory">Directory</option>
<option value="mbtiles">Mbtiles</option>
<option value="repo">Repo</option>
</select>
<label for="output-type">Output type</label>
</div>

<div class="input-field col s12">
<input id="output-file-box" type="text" value="{z}/{x}/{y}.png" />
<label for="output-file-box">Output file</label>
</div>

<div class="input-field col s12">
<input id="parallel-threads-box" type="text" value="4" />
<label for="parallel-threads-box">Parallel downloads</label>
</div>
</div>

<button
class="waves-effect waves-light z-depth-0 btn-large cyan darken-2 bottom-button"
id="download-button"
>
Download
</button>
</div>

<div class="sidebar" id="download-sidebar" style="display: none">
<div class="step-number">5</div>
<div class="step-title">Downloading tiles</div>
<div class="hints sidebar-section">Please wait...</div>

<div class="sidebar-section">
<div id="progress-radial" class=""></div>
<p id="progress-subtitle" class=""></p>
<p class="tile-strip"></p>
</div>

<textarea id="log-view" class="sidebar-section"></textarea>

<button
class="waves-effect waves-light z-depth-0 btn-large red lighten-5 bottom-button"
id="stop-button"
>
Stop
</button>
</div>
</body>
</html>
Loading