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

preview page: update buttons #1

Closed
alatarum wants to merge 1 commit from preview-page-layout into master
pull from: preview-page-layout
merge into: organicmaps:master
Conversation 3 Commits 1 Files changed 1 +30 -16
1 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
public/ge0.html
View file

@ -33,7 +33,7 @@
color: #00AA00;
padding: 5px;
text-decoration: none;
display: inline-block;
display: inline;
border: 1px solid #00AA00;
}
@ -43,6 +43,16 @@
cursor: grab;
}
.box {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.block {
padding-block: 5px;
padding-inline: 2px;
}
a,
a:link,
a:visited {}
@ -63,7 +73,7 @@
position: fixed;
width: 100%;
z-index: 1000;
padding: 10px;
padding: 5px;
}
#map {
@ -76,29 +86,33 @@
</head>
<body>
<div id="header">
<span id="name">${name}</span>
<span>
<a id="open" href="om:/${path}" class="link">
Open in Organic Maps
</a>
<a href="https://omaps.app/get" 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 id="header" class="box">
<div id="open" class="block">
<a href="om:/${path}" class="link">Show in Organic Maps</a>
</div>
<div id="osm" class="block">
<a href="https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=${zoom}/${lat}/${lon}" target="_blank" class="link">See on OpenStreetMap</a>
</div>
<div class="block">
<a href="https://omaps.app/get" target="_blank" class="link">Get Organic Maps</a>
</div>
</div>
<div id="map" class="map"></div>
<script type="text/javascript">
const isiOS = navigator.platform.substr(0, 2) === 'iP' || // iPhone, iPad, iPod, including simulators.
(navigator.userAgent.includes('Mac') && 'ontouchend' in document); // iPad on iOS 13.
const isAndroid = !isiOS && /(android)/i.test(navigator.userAgent);
const isDesktop = !isiOS && !isAndroid;
coords = 'Lat: ${lat}, Lon: ${lon}';
if (isDesktop)
{
document.getElementById('open').remove();
} else {
document.getElementById('osm').remove();
coords = '<a href="geo:${lat},${lon}?z=${zoom}">' + coords + '</a>';
}
const lat = ${ lat };
const lon = ${ lon };
@ -111,7 +125,7 @@
map.zoomControl.setPosition('bottomright');
const marker = L.marker([lat, lon]).addTo(map);
biodranik commented 2022-02-14 20:42:10 +00:00 (Migrated from github.com)
Review
Copy link

No, we can not remove om:// link. It is the only way to open https://omaps.app links on many androids and iOS devices where it's not open by default from the app.

No, we can not remove om:// link. It is the only way to open https://omaps.app links on many androids and iOS devices where it's not open by default from the app.
alatarum commented 2022-02-18 20:41:00 +00:00 (Migrated from github.com)
Review
Copy link

Is it? I was sure "geo:" link is enough, since it shows "open with" dialog where one can choose OM or any other application.

Is it? I was sure "geo:" link is enough, since it shows "open with" dialog where one can choose OM or any other application.
marker.bindPopup('${name}');//.openPopup();
marker.bindPopup('${name}<br />' + coords).openPopup();
</script>
</body>