@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
337 lines (323 loc) • 14.8 kB
HTML
<!-- SPDX-License-Identifier: Apache-2.0 -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="GeoGirafe is an flexible application to build online geoportals." />
<!--
If redirect-url meta tag is present, a redirect will happen when the detected device is an iPhone or Android.
The value of content should be a relative URL to the desired endpoint or page.
-->
<meta name="redirect-url" content="mobile.html" />
<meta name="configs" content="main" />
<link rel="config-main-url" href="config.json" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/logo/apple-touch-icon-black.png"
media="(prefers-color-scheme: light)" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/logo/apple-touch-icon-white.png"
media="(prefers-color-scheme: dark)" />
<link href="images/logo/favicon_black.svg" rel="icon" media="(prefers-color-scheme: light)" />
<link href="images/logo/favicon_white.svg" rel="icon" media="(prefers-color-scheme: dark)" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" media="screen" href="styles/splash.css" />
<link rel="stylesheet" href="styles/variables.css" />
<link rel="stylesheet" href="styles/common.css" />
<link rel="stylesheet" href="styles/index.css" />
<link
rel="preload"
as="style"
onload="
this.onload = null;
this.rel = 'stylesheet';
"
href="lib/tippy.js/tippy.css" />
<link
rel="preload"
as="style"
onload="
this.onload = null;
this.rel = 'stylesheet';
"
href="lib/tippy.js/backdrop.css" />
<link
rel="preload"
as="style"
onload="
this.onload = null;
this.rel = 'stylesheet';
"
href="lib/tippy.js/border.css" />
<link
rel="preload"
as="style"
onload="
this.onload = null;
this.rel = 'stylesheet';
"
href="lib/tippy.js/svg-arrow.css" />
<noscript>
<link rel="stylesheet" href="lib/tippy.js/tippy.css" />
<link rel="stylesheet" href="lib/tippy.js/backdrop.css" />
<link rel="stylesheet" href="lib/tippy.js/border.css" />
<link rel="stylesheet" href="lib/tippy.js/svg-arrow.css" />
</noscript>
<script type="module" src="src/main.ts"></script>
<title>GeoGirafe</title>
</head>
<body>
<div id="splash-screen">
<svg
id="Logo_Geogirafe_vertical_black"
data-name="Logo Geogirafe vertical black"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2256 1110.5">
<g>
<path
d="M171.64,832.63c0-73.5,44.45-119.35,119-119.35,30.8,0,57.4,6.3,74.2,13.3v42.7h-1.75c-21-10.15-47.6-15.4-72.1-15.4-45.85,0-73.15,29.4-73.15,76.3s24.5,77,68.95,77c12.6,0,23.45-1.75,34.65-5.6v-47.25h-52.5v-38.5h95.9v124.95h-40.25c-12.6,3.5-26.95,5.6-40.25,5.6-71.05,0-112.7-42.35-112.7-113.75Z" />
<path d="M585.33,716.78v38.85h-115.85v53.2h106.75v38.5h-106.75v56.7h115.85v38.85h-160.65v-226.1h160.65Z" />
<path
d="M625.59,830.53c0-74.9,39.55-119.35,106.4-119.35s107.1,42,107.1,117.95-39.9,119.35-107.1,119.35-106.4-41.65-106.4-117.95ZM792.54,829.83c0-50.75-20.65-78.4-60.55-78.4s-60.2,28-60.2,78.4,21,78.4,60.2,78.4,60.55-27.65,60.55-78.4Z" />
<path
d="M875.83,832.63c0-73.5,44.45-119.35,119-119.35,30.8,0,57.4,6.3,74.2,13.3v42.7h-1.75c-21-10.15-47.6-15.4-72.1-15.4-45.85,0-73.15,29.4-73.15,76.3s24.5,77,68.95,77c12.6,0,23.45-1.75,34.65-5.6v-47.25h-52.5v-38.5h95.9v124.95h-40.25c-12.6,3.5-26.95,5.6-40.25,5.6-71.05,0-112.7-42.35-112.7-113.75Z" />
<path d="M1128.88,716.78h45.15v226.1h-45.15v-226.1Z" />
<path
d="M1235.63,716.78h95.9c55.3,0,81.2,29.4,81.2,71.75,0,31.15-14.7,53.55-41.3,64.4l46.9,88.2v1.75h-48.3l-43.05-81.9h-46.2v81.9h-45.15v-226.1ZM1280.78,755.63v66.85h45.85c26.6,0,40.25-12.25,40.25-33.6s-12.6-33.25-40.25-33.25h-45.85Z" />
<path
d="M1673.48,942.88h-49l-16.8-46.55h-98.35l-16.45,46.55h-47.25l83.3-226.1h61.25l83.3,226.1ZM1522.62,857.48h71.05l-35-96.95h-2.1l-33.95,96.95Z" />
<path d="M1869.12,716.78v38.85h-112v59.15h103.6v38.85h-103.6v89.25h-45.15v-226.1h157.15Z" />
<path d="M2079.47,716.78v38.85h-115.85v53.2h106.75v38.5h-106.75v56.7h115.85v38.85h-160.65v-226.1h160.65Z" />
</g>
<g id="icon">
<path
id="arrow"
d="M1155,586.75c-29.9,0-59.02-5.29-86.26-15.43-2.24-.83-4.01,2-2.27,3.64l83.96,78.99c2.57,2.42,6.58,2.42,9.15,0l83.96-78.99c1.74-1.64-.03-4.47-2.27-3.64-27.24,10.13-56.36,15.43-86.26,15.43Z" />
<path
id="circle"
d="M1294.3,200.45c-36.91-36.91-85.88-57.37-138.02-57.7-51.15-.32-100.63,19.32-137.55,54.73-39.37,37.76-61,88.88-60.72,143.3.27,52.29,21.45,102.52,58.68,139.24,37.09,36.59,86.16,56.73,138.32,56.73s97.44-18.67,133.96-52.58c.33-.31.65-.62.97-.93-10.54-6.14-20.35-13.01-29.43-20.59-27.83-23.21-48.8-53.08-62.56-89.27-15.65-41.19-20.21-85.41-22.76-127.09-1.13-18.49-28.23-18.47-40.6-13.58-17.01,6.72-34.22,30.3-39.66,46.96-36.24,111.04,35.41,173.1,130.05,204.66-21.4,10.38-45.44,16.15-70.85,16.01-88.62-.48-159.7-71.97-159.7-160.58,0-88.69,71.9-160.59,160.59-160.59,25.42,0,49.45,5.91,70.81,16.43l.19.32c10.2,10.92,13.38,26.34,14.57,45.88,4.51,74.06,14.84,146.98,84.62,186.12,2.57,1.44,5.84.41,7.13-2.24,12.89-26.6,19.68-56.19,19.68-85.91,0-52.62-20.49-102.09-57.7-139.3Z" />
</g>
</svg>
<div class="loader"></div>
<span lang="en">Loading...</span>
</div>
<girafe-app>
<header>
<girafe-theme-select data-tour="theme-selection"></girafe-theme-select>
<img class="logo" alt="geogirafe-logo" src="images/logo/horizontal_black.svg" />
<div class="header-center-align">
<girafe-search id="search" plugin="config:search"></girafe-search>
</div>
<girafe-news-button plugin="config:news"></girafe-news-button>
<girafe-oauth></girafe-oauth>
<girafe-add-bookmark></girafe-add-bookmark>
</header>
<girafe-help></girafe-help>
<girafe-modals></girafe-modals>
<girafe-default-context-menu></girafe-default-context-menu>
<girafe-custom-context-menu></girafe-custom-context-menu>
<div id="content">
<div id="main">
<girafe-lr-panel class="panel-left" dock="left">
<girafe-tree-view slot="main"></girafe-tree-view>
</girafe-lr-panel>
<div id="content-map">
<girafe-map></girafe-map>
<div class="info-area">
<girafe-basemap data-tour="basemap-selection"></girafe-basemap>
<girafe-infobox></girafe-infobox>
</div>
<girafe-prototype-banner></girafe-prototype-banner>
<footer>
<girafe-scale></girafe-scale>
<girafe-coordinate></girafe-coordinate>
<span class="copyright">
<span i18n="Information without public faith">Information without public faith</span>
<span>
©
<a href="https://doc.geogirafe.org" target="_blank">GeoGirafe</a>,
<a href="https://www.swisstopo.admin.ch/en/legal-basis" target="_blank">swisstopo</a>,
<a href="http://www.openstreetmap.org/copyright" target="_blank">OSM</a>
</span>
</span>
</footer>
</div>
<girafe-lr-panel class="panel-right" dock="right">
<girafe-drawing slot="main"></girafe-drawing>
<girafe-selection-tool slot="main"></girafe-selection-tool>
<girafe-print slot="main"></girafe-print>
<girafe-ext-layer slot="main"></girafe-ext-layer>
<girafe-cross-section-settings slot="main"></girafe-cross-section-settings>
<girafe-advanced-filter slot="main"></girafe-advanced-filter>
<girafe-news slot="main"></girafe-news>
<girafe-edit slot="main"></girafe-edit>
<girafe-layout slot="main"></girafe-layout>
<girafe-about slot="main"></girafe-about>
<girafe-user-preferences slot="main"></girafe-user-preferences>
<girafe-share slot="main"></girafe-share>
<girafe-contact slot="main"></girafe-contact>
</girafe-lr-panel>
<girafe-info-window></girafe-info-window>
<girafe-selection-window></girafe-selection-window>
</div>
<div id="content-bottom">
<girafe-selection-grid dock="bottom"></girafe-selection-grid>
<girafe-cross-section-view id="cross-section-footer" dock="bottom"></girafe-cross-section-view>
</div>
</div>
<div id="buttonbar">
<button
id="buttonbar-toggle"
class="gg-icon-button gg-big"
type="button"
tip="open-buttonbar-menu"
aria-expanded="false"
onclick="this.parentNode.classList.toggle('open')">
<img alt="" src="icons/menu.svg" />
</button>
<div
id="buttonbar-grid"
role="menubar"
tabindex="0"
onclick="this.parentNode.classList.toggle('open')"
onkeyup="this.parentNode.classList.toggle('open')">
<girafe-video-record></girafe-video-record>
<button
tip="drawing-panel"
slot="menu-content"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.drawingPanelVisible =
!document.geogirafe.state.interface.drawingPanelVisible
">
<img alt="draw-icon" src="icons/draw.svg" />
</button>
<button
tip="selection-tool-panel"
slot="menu-content"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.selectionToolPanelVisible =
!document.geogirafe.state.interface.selectionToolPanelVisible
">
<img alt="draw-icon" src="icons/select.svg" />
</button>
<button
tip="external-entry"
slot="menu-content"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.extLayerPanelVisible =
!document.geogirafe.state.interface.extLayerPanelVisible
">
<img alt="ext-icon" src="icons/external-entry.svg" />
</button>
<button
tip="print-panel"
slot="menu-content"
class="gg-icon-button gg-big"
plugin="config:print"
onclick="
document.geogirafe.state.interface.printPanelVisible =
!document.geogirafe.state.interface.printPanelVisible
">
<img alt="print-icon" src="icons/print.svg" />
</button>
<button
tip="lidar-panel"
slot="menu-content"
class="gg-icon-button gg-big"
plugin="config:lidar"
onclick="
document.geogirafe.state.interface.crossSectionPanelVisible =
!document.geogirafe.state.interface.crossSectionPanelVisible
">
<img alt="cross-section-icon" src="icons/cross-section.svg" />
</button>
<button
tip="advanced-filter-panel"
slot="menu-content"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.advancedFilterPanelVisible =
!document.geogirafe.state.interface.advancedFilterPanelVisible
">
<img alt="advanced-filter-icon" src="icons/advanced-filter.svg" />
</button>
<button
tip="edit-panel"
slot="menu-content"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.editPanelVisible = !document.geogirafe.state.interface.editPanelVisible
">
<img alt="edit-icon" src="icons/edit.svg" />
</button>
<button
tip="share-panel"
slot="menu-content"
class="gg-icon-button gg-big"
plugin="config:share"
onclick="
document.geogirafe.state.interface.sharePanelVisible =
!document.geogirafe.state.interface.sharePanelVisible
">
<img alt="share-icon" src="icons/share.svg" />
</button>
<button
tip="layout-panel"
class="gg-icon-button gg-big"
plugin="config:map3d"
onclick="
document.geogirafe.state.interface.layoutPanelVisible =
!document.geogirafe.state.interface.layoutPanelVisible
">
<img alt="layout-icon" src="icons/layout.svg" />
</button>
<button
tip="contact-panel"
class="gg-icon-button gg-big"
plugin="config:contact"
onclick="
document.geogirafe.state.interface.contactPanelVisible =
!document.geogirafe.state.interface.contactPanelVisible
">
<img alt="layout-icon" src="icons/mail.svg" />
</button>
<button tip="infra3d" class="gg-icon-button gg-big" plugin="plugin_infra3d" onclick="alert('infra3d')">
<img alt="help-icon" src="icons/infra3d.svg" />
</button>
<div class="filler"></div>
<button
tip="help"
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.helpVisible = true">
<img alt="help-icon" src="icons/help.svg" />
</button>
<button
tip="about-panel"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.aboutPanelVisible =
!document.geogirafe.state.interface.aboutPanelVisible
">
<img alt="info-icon" src="icons/info.svg" />
</button>
<button
tip="user-preferences-panel"
class="gg-icon-button gg-big"
onclick="
document.geogirafe.state.interface.userPreferencesPanelVisible =
!document.geogirafe.state.interface.userPreferencesPanelVisible
">
<img alt="user-preferences-icon" src="icons/config.svg" />
</button>
</div>
</div>
</girafe-app>
</body>
</html>