timelinize/frontend/pages/map.html

<title>Map</title>
<link rel="stylesheet" href="/resources/css/map.css">
	
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="d-flex align-items-center">
			<div class="text-nowrap me-5">
				<div class="page-pretitle">
					Explore
				</div>
				<h2 class="page-title">
					<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map"
						width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
						fill="none" stroke-linecap="round" stroke-linejoin="round">
						<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
						<polyline points="3 7 9 4 15 7 21 4 21 17 15 20 9 17 3 20 3 7"></polyline>
						<line x1="9" y1="4" x2="9" y2="17"></line>
						<line x1="15" y1="7" x2="15" y2="20"></line>
					</svg>
					Map
				</h2>
			</div>
			<div class="filter d-flex gap-2">

				<div class="dropdown">
					<button class="btn dropdown-toggle"
						data-bs-toggle="dropdown">Map style</button>
					<div class="dropdown-menu nonfilter">
						<label class="dropdown-item"><input class="nonfilter form-check-input m-0 me-2"
							type="radio" name="map-style" value="standard" checked> Standard</label>
						<label class="dropdown-item"><input class="nonfilter form-check-input m-0 me-2"
							type="radio" name="map-style" value="streets-v12"> Classic</label>
						<label class="dropdown-item"><input class="nonfilter form-check-input m-0 me-2"
							type="radio" name="map-style" value="satellite-streets-v12"> Satellite</label>
						<label class="dropdown-item"><input class="nonfilter form-check-input m-0 me-2"
							type="radio" name="map-style" value="outdoors-v12"> Terrain</label>
						<label class="dropdown-item"><input class="nonfilter form-check-input m-0 me-2"
							type="radio" name="map-style" value="light-v11"> Light</label>
						<label class="dropdown-item"><input class="nonfilter form-check-input m-0 me-2"
							type="radio" name="map-style" value="dark-v11"> Dark</label>
					</div>
				</div>

				<div class="d-flex align-items-center me-4">
					<label class="d-flex flex-nowrap form-switch">
						<input type="checkbox" class="nonfilter form-check-input me-2" id="toggle-3d">
						<span class="form-check-label">3D</span>
					</label>
				</div>


				<div class="tl-date-picker">

				</div>



				<div id="select-entity-container">
					<select type="text" class="entity-input form-select" placeholder="Name or contact info"
						id="select-person">
					</select>
				</div>

				<select multiple class="tl-data-source form-select" placeholder="Data sources" autocomplete="off">

				</select>

				<div class="tl-item-class-dropdown">
					
				</div>

				<div class="input-group flex-nowrap">
					<button id="proximity-toggle" class="btn btn-icon" type="button" data-bs-toggle="button">
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-viewfinder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
							<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
							<circle cx="12" cy="12" r="9"></circle>
							<line x1="12" y1="3" x2="12" y2="7"></line>
							<line x1="12" y1="21" x2="12" y2="18"></line>
							<line x1="3" y1="12" x2="7" y2="12"></line>
							<line x1="21" y1="12" x2="18" y2="12"></line>
							<line x1="12" y1="12" x2="12" y2="12.01"></line>
							</svg>
					</button>
					<input type="text" id="proximity" class="filter-input form-control" placeholder="Proximity">
				</div>

				<div class="input-group flex-nowrap">
					<button id="bbox-toggle" class="btn btn-icon" type="button" data-bs-toggle="button">
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-shape" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
							<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
							<circle cx="5" cy="5" r="2"></circle>
							<circle cx="19" cy="5" r="2"></circle>
							<circle cx="5" cy="19" r="2"></circle>
							<circle cx="19" cy="19" r="2"></circle>
							<line x1="5" y1="7" x2="5" y2="17"></line>
							<line x1="7" y1="5" x2="17" y2="5"></line>
							<line x1="7" y1="19" x2="17" y2="19"></line>
							<line x1="19" y1="7" x2="19" y2="17"></line>
							</svg>
					</button>
					<input type="text" id="bbox" class="filter-input form-control" placeholder="Bounding box" disabled>
					<button id="bbox-clear" class="btn btn-icon text-red d-none" type="button">
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x m-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
							<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
							<line x1="18" y1="6" x2="6" y2="18"></line>
							<line x1="6" y1="6" x2="18" y2="18"></line>
							</svg>
					</button>
				</div>

				<!-- <div class="d-flex flex-nowrap align-items-center mx-2">
					<label class="me-2">Nearby</label>
					<div id="range-nearby" class="filter-input form-range"></div>
				</div> -->


			</div>
		</div>
	</div>
</div>

<div id="map-page" class="page-body">
	<div class="map-container"></div>

	<div class="bottom-island">
		<div class="color-legend">
			<span class="color-legend-start"></span>
			<div class="color-legend-gradient"></div>
			<span class="color-legend-end"></span>
		</div>
	</div>

	<div id="infocard" class="card d-none">
		<div class="card-header">
			<h3 class="timestamp card-title">
				<div class="date"></div>
				<span class="time card-subtitle"></span>
			</h3>
			<div class="card-actions btn-actions">
				<a class="btn view-details me-3">
					<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-id" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
						<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
						<path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
						<path d="M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
						<path d="M15 8l2 0"></path>
						<path d="M15 12l2 0"></path>
						<path d="M7 16l10 0"></path>
					</svg>
					View Item
				</a>
				<a class="btn-action close">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
						stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
						<path d="M18 6l-12 12"></path>
						<path d="M6 6l12 12"></path>
					</svg>
				</a>
			</div>
		</div>
		<div class="card-body">
			<div class="map-preview-content"></div>
		</div>
	</div>
</div>

<div class="bottom">
</div>