organicmaps/url-processor
13
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity Actions

Full screen ge0 map display

Browse source
This commit is contained in:
Alexander Borsuk 2021-05-31 09:31:44 +02:00
parent 279e7f4172
commit b0cd227f25
2 changed files with 49 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
public/ge0.html
View file

@ -10,27 +10,50 @@
body {
margin: 0;
padding: 0;
background-color: green;
width: 100%;
height: 100%;
}
.link {
background-color: white;
color: #00AA00;
padding: 5px;
text-decoration: none;
display: inline-block;
border: 1px solid #00AA00;
}
.link:hover {
background-color: #00AA00;
color: white;
cursor: grab;
}
a,
a:link,
a:visited,
a:visited {}
a:hover,
a:active {
color: black;
a:active {}
#name {
font-size: x-large;
font-weight: bold;
margin: 0 5px 0 5px;
}
#header {
text-align: center;
}
h2 {
color: white;
background-color: #00AA00AA;
text-align: center;
position: fixed;
width: 100%;
z-index: 1000;
padding: 10px;
}
#map {
height: 400px;
height: 100%;
width: 100%;
}
</style>
@ -40,12 +63,18 @@
<body>
<div id="header">
<h2 id="name">${name}</h2>
<h3>
<a id="open" href="#" onclick="onOpenClick">Open in <strong>O</strong>rganic <strong>M</strong>aps app</a>
<a href="https://organicmaps.app/">Install <strong>O</strong>rganic <strong>M</strong>aps app</a>
<a href="https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=${zoom}/${lat}/${lon}" target="_blank">See on OpenStreet Map</a>
</h3>
<span id="name">${name}</span>
<span>
<a id="open" href="#" class="link" onclick="onOpenClick">
Open in Organic Maps
</a>
<a href="https://organicmaps.app/" target="_blank" class="link">
Install Organic Maps
</a>
<a href="https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=${zoom}/${lat}/${lon}" target="_blank" class="link">
See on OpenStreetMap
</a>
</span>
</div>
<div id="map" class="map"></div>
<script type="text/javascript">
@ -58,7 +87,7 @@
document.getElementById('open').remove();
function onOpenClick() {
window.open('om://' + location.pathname);
window.open('om:/' + location.pathname);
}
const lat = ${ lat };
const lon = ${ lon };
@ -68,6 +97,7 @@
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19,
}).addTo(map);
map.zoomControl.setPosition('bottomright');
const marker = L.marker([lat, lon]).addTo(map);
marker.bindPopup('${name}');//.openPopup();

5
src/ge0.ts
View file

@ -14,10 +14,11 @@ export async function onGe0Decode(template: string, encodedLatLonZoom: string, n
const llz = decodeLatLonZoom(encodedLatLonZoom);
let title = 'Organic Maps';
if (name) {
name = decodeURIComponent(name.replaceAll('_', ' ')).replaceAll('"', "'");
name = decodeURIComponent(name.replace(/\+|_/g, ' '));
name = name.replace("'", '&rsquo;'); // To embed in popup.
title = name + ' | ' + title;
} else {
name = '♥';
name = 'Shared via <a href="https://organicmaps.app">Organic Maps app</a>';
}
template = replaceInTemplate(template, { ...llz, title, name });