| `Map_Tile_Attribution` | [OpenStreetMap](https://openstreetmap.org/copyright) obviously |
+## Theming
+
+You can customize parts of the website by overwriting files in `dist/theme/`
+
+ * Set a `Page_Title` in the configuration
+ * Logo
+ * Content of Welcome and About&Help page
+ * Additional CSS styling
+
## License
The source code is available under a [GPLv2 license](LICENSE).
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset='utf-8'>
+ <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+ <title>Nominatim Demo</title>
+
+ <link rel="icon" type="image/png" href="theme/favicon-194x194.png" sizes="194x194" />
+ <link rel="icon" type="image/png" href="theme/favicon-32x32.png" sizes="32x32" />
+
+ <link rel='stylesheet' href='build/bundle.css'>
+ <link rel='stylesheet' href='theme/style.css'>
+
+ <script src='config.js'></script>
+ <script defer src='build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
// Nominatim_Config['Map_Default_Lat'] = 20.0;
// Nominatim_Config['Map_Default_Lon'] = 0.0;
// Nominatim_Config['Map_Default_Zoom'] = 2;
+
+// ---- BRANDING ----
+// Nominatim_Config['Page_Title'] = 'Nominatim Demo';
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
- <title>OpenStreetMap Nominatim</title>
+ <title>Nominatim Demo</title>
- <link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194" />
- <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
+ <link rel="icon" type="image/png" href="theme/favicon-194x194.png" sizes="194x194" />
+ <link rel="icon" type="image/png" href="theme/favicon-32x32.png" sizes="32x32" />
- <link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
+ <link rel='stylesheet' href='theme/style.css'>
<script src='config.js'></script>
<script defer src='build/bundle.js'></script>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
- <title>OpenStreetMap Nominatim</title>
+ <title>Nominatim Demo</title>
- <link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194" />
- <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
+ <link rel="icon" type="image/png" href="theme/favicon-194x194.png" sizes="194x194" />
+ <link rel="icon" type="image/png" href="theme/favicon-32x32.png" sizes="32x32" />
- <link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
+ <link rel='stylesheet' href='theme/style.css'>
<script src='config.js'></script>
<script defer src='build/bundle.js'></script>
+++ /dev/null
-body {
- font-size: 0.85em
-}
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
- <title>OpenStreetMap Nominatim</title>
+ <title>Nominatim Demo</title>
- <link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194" />
- <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
+ <link rel="icon" type="image/png" href="theme/favicon-194x194.png" sizes="194x194" />
+ <link rel="icon" type="image/png" href="theme/favicon-32x32.png" sizes="32x32" />
- <link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
+ <link rel='stylesheet' href='theme/style.css'>
<script src='config.js'></script>
<script defer src='build/bundle.js'></script>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
- <title>OpenStreetMap Nominatim</title>
+ <title>Nominatim Demo</title>
- <link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194" />
- <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
+ <link rel="icon" type="image/png" href="theme/favicon-194x194.png" sizes="194x194" />
+ <link rel="icon" type="image/png" href="theme/favicon-32x32.png" sizes="32x32" />
- <link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
+ <link rel='stylesheet' href='theme/style.css'>
<script src='config.js'></script>
<script defer src='build/bundle.js'></script>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
- <title>OpenStreetMap Nominatim</title>
+ <title>Nominatim Demo</title>
- <link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194" />
- <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
+ <link rel="icon" type="image/png" href="theme/favicon-194x194.png" sizes="194x194" />
+ <link rel="icon" type="image/png" href="theme/favicon-32x32.png" sizes="32x32" />
- <link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
+ <link rel='stylesheet' href='theme/style.css'>
<script src='config.js'></script>
<script defer src='build/bundle.js'></script>
--- /dev/null
+<h2 class="my-4">About & Help</h2>
+
+<p>
+ This website is based on <a href="https://github.com/osm-search/nominatim-ui">Nominatim UI</a>,
+ a debugging interface for the <a href="https://nominatim.org/">Nominatim</a> geocoding software.
+</p>
+
+<p>
+ The Nominatim API is installed at <code>Nominatim_API_Endpoint</code> and for questions you
+ should contact their administrators.
+</p>
+
+<p>
+ Nominatim is a search engine for <a href="https://www.openstreetmap.org/">OpenStreetMap</a> data.
+ You may search for a name or address (forward search) or look up data by its geographic coordinate
+ (reverse search). Each result comes with a link to a details page where you can inspect what data
+ about the object is saved in the database and investigate how the address of the object has been
+ computed.
+</p>
+
+
+<p class="alert alert-secondary my-4">
+ If you're the adminstrator of this website you can edit the text above in
+ <code>dist/branding/about-and-help.html</code>
+</p>
--- /dev/null
+#theme-logo {
+ height: 30px;
+}
--- /dev/null
+<h2>Welcome to Nominatim</h2>
+
+<p>
+ Nominatim is a search engine for
+ <a href="https://www.openstreetmap.org">OpenStreetMap</a> data. This
+ is the debugging interface.
+</p>
+
+<a href="about.html">More information</a>
\ No newline at end of file
import { page, refresh_page } from './lib/stores.js';
import Footer from './components/Footer.svelte';
- import ReportIssueModal from './components/ReportIssueModal.svelte';
import SearchPage from './pages/SearchPage.svelte';
import ReversePage from './pages/ReversePage.svelte';
import DetailsPage from './pages/DetailsPage.svelte';
import PolygonsPage from './pages/PolygonsPage.svelte';
import DeletablePage from './pages/DeletablePage.svelte';
+ import AboutPage from './pages/AboutPage.svelte';
$: view = $page.tab;
<DeletablePage />
{:else if view === 'polygons'}
<PolygonsPage />
+{:else if view === 'about'}
+<AboutPage />
{/if}
<Footer/>
-<ReportIssueModal/>
import LastUpdated from './LastUpdated.svelte';
import { page } from '../lib/stores.js';
+ import { get_config_value } from '../lib/config_reader.js';
$: view = $page.tab;
</script>
white-space: nowrap;
}
- .dropdown-menu { /* need to be above map markers */
- z-index: 1005;
- }
-
.page-title-section {
display: none;
text-align: center;
<header class="container-fluid">
<nav class="navbar navbar-expand-sm navbar-light">
+ <!-- Brand -->
<div class="navbar-brand">
<PageLink page="search">
- <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
- <h1>Nominatim</h1>
+ <img alt="logo" id="theme-logo" src="theme/logo.png" />
+ <h1>{get_config_value('Page_Title')}</h1>
</PageLink>
</div>
+ <!-- Toggler (hamburger button) -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <!-- Left-aligned links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item {view === 'search' ? 'active' : ''}">
<PageLink page="search" extra_classes="nav-link ">Search</PageLink>
<PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
</li>
</ul>
- <ul class="navbar-nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#open-about-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- About & Help
- </a>
- <div class="dropdown-menu dropdown-menu-right">
- <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
- <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
- <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
- <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
- <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
- </div>
- </li>
- </ul>
</div>
+ <!-- Right aligned links -->
+ <ul class="navbar-nav">
+ <li class="nav-item {view === 'about' ? 'active' : ''}">
+ <PageLink page="about" extra_classes="nav-link ">About & Help</PageLink>
+ </li>
+ </ul>
</nav>
</header>
<section class="page-title-section">
+++ /dev/null
-<div class="modal fade" id="report-modal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title">Report a problem</h4>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- </div>
- <div class="modal-body">
- <p>
- Before reporting problems please read the <a target="_blank" href="https://nominatim.org/release-docs/develop/api/Overview/">user documentation</a>
- and
- <a target="_blank" href="https://nominatim.org/release-docs/develop/api/Faq/">FAQ</a>.
-
- If your problem relates to the address of a particular search result please use the 'details' link
- to check how the address was generated before reporting a problem.
- </p>
- <p>
- Use <a target="_blank" href="https://github.com/osm-search/Nominatim/issues">Nominatim issues on github</a>
- to report problems.
- </p>
- <p>
- Please ensure that you include a full description of the problem, including the search
- query that you used, the problem with the result and, if the problem relates to missing data,
- the osm type (node, way, relation) and id of the item that is missing.
- </p>
- <p>
- Problems that contain enough detail are likely to get looked at before ones that require
- significant research.
- </p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">OK</button>
- </div>
- </div>
- </div>
-</div>
\ No newline at end of file
-<div id="welcome">
- <h2>Welcome to Nominatim</h2>
+<script>
+ import { onMount } from 'svelte';
+ import { fetch_content_into_element } from '../lib/api_utils.js';
- <p>
- Nominatim is a search engine for
- <a href="https://www.openstreetmap.org">OpenStreetMap</a> data. This
- is the debugging interface. You may search for a name or address
- (forward search) or look up data by its geographic coordinate (reverse
- search). Each result comes with a link to a details page where you
- can inspect what data about the object is saved in the database and
- investigate how the address of the object has been computed.
- </p>
+ onMount(() => {
+ fetch_content_into_element('theme/welcome.html', document.getElementById('welcome'));
+ });
+</script>
- For more information visit the
- <a href="https://nominatim.org">Nominatim home page</a>.
-</div>
+<div id="welcome"></div>
if (endpoint_name !== 'status') last_api_request_url_store.set(api_url);
}
+var fetch_content_cache = {};
+export async function fetch_content_into_element(url, dom_element) {
+ if (fetch_content_cache[url]) {
+ dom_element.innerHTML = fetch_content_cache[url];
+ return;
+ }
+ await fetch(url)
+ .then(response => response.text())
+ .then(html => {
+ html = html.replace('Nominatim_API_Endpoint', get_config_value('Nominatim_API_Endpoint'));
+ dom_element.innerHTML = html;
+ fetch_content_cache[url] = html;
+ });
+}
+
function generate_nominatim_api_url(endpoint_name, params) {
return get_config_value('Nominatim_API_Endpoint') + endpoint_name + '.php?'
+ Object.keys(clean_up_parameters(params)).map((k) => {
}
export function update_html_title(title) {
- document.title = [title, 'OpenStreetMap Nominatim']
+ document.title = [title, get_config_value('Page_Title')]
.filter((val) => val && val.length > 1)
.join(' | ');
}
Map_Default_Lon: 0.0,
Map_Default_Zoom: 2,
Map_Tile_URL: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
- Map_Tile_Attribution: '<a href="https://osm.org/copyright">OpenStreetMap contributors</a>'
+ Map_Tile_Attribution: '<a href="https://osm.org/copyright">OpenStreetMap contributors</a>',
+ Page_Title: 'Nominatim Demo'
};
function get_config_value(str, default_val) {
* the requested query parameters. It may also be omitted completely for a
* link without query parameters.
*/
+const pagenames = ['search', 'reverse', 'details', 'deletable', 'polygons', 'about'];
+
export function refresh_page(pagename, params) {
if (typeof pagename === 'undefined') {
pagename = window.location.pathname.replace('.html', '').replace(/^.*\//, '');
- if (['search', 'reverse', 'details', 'deletable', 'polygons'].indexOf(pagename) === -1) {
- pagename = 'search';
- }
+ if (!pagenames.includes(pagename)) pagename = 'search';
params = new URLSearchParams(window.location.search);
} else {
--- /dev/null
+<script>
+ import Header from '../components/Header.svelte';
+ import { onMount } from 'svelte';
+ import { fetch_content_into_element } from '../lib/api_utils.js';
+
+ onMount(() => {
+ fetch_content_into_element('theme/about-help.html', document.getElementById('about-help'));
+ });
+</script>
+
+<Header />
+<div id="about-help" class="container"></div>
+
+<style>
+ #about-help {
+ max-width: 800px;
+ padding: 4em;
+ }
+</style>
\ No newline at end of file
projects / nominatim-ui.git / commitdiff
