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

New map style (Maptiler vector tiles) #6

Closed
RedAuburn wants to merge 1 commit from use-maptiler into master
pull from: use-maptiler
merge into: organicmaps:master
Conversation 6 Commits 1 Files changed 1 +18 -13
1 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/ge0.html
View file

@ -9,18 +9,21 @@
<meta name="apple-itunes-app" content="app-id=1567437057, app-argument=om:/${path}">
<meta name="description" content="Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
<meta itemprop="name" content="Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
<meta itemprop="description" content="Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
<meta name="description" content="Android & iOS offline maps app for travellers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
<meta itemprop="name" content="Android & iOS offline maps app for travellers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
<meta itemprop="description" content="Android & iOS offline maps app for travellers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#449f33">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.css" />
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel='stylesheet' />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.17/leaflet-maplibre-gl.js"></script>
<style>
html,
body {
margin: 0;
@ -67,7 +70,7 @@
background-color: #FFF;
text-align: center;
padding: 10px;
box-shadow: 0 3px 10px 0 #00000030;
box-shadow: 0 0px 5px 0 #00000030;
display: flex;
flex-flow: row wrap;
align-items: center;
@ -131,7 +134,6 @@
to { opacity: 0; }
}
</style>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<title>${title}</title>
</head>
@ -160,7 +162,9 @@
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="map" class="map">
<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<div id="notif" class="notif">Coordinates copied to clipboard.</div>
<script type="text/javascript">
var isiOS = navigator.platform.substr(0, 2) === 'iP' || // iPhone, iPad, iPod, including simulators.
@ -206,19 +210,20 @@
var lon = ${ lon };
var zoom = ${ zoom };
var map = L.map('map').setView([lat, lon], zoom);
var POI_Icon = L.icon({
iconUrl: '/placemarks/poi-icon.svg',
iconSize: [25, 36.5],
iconAnchor: [12.5, 36.5],
popupAnchor: [0, -36.5]
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { /*https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png*/
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19,
const gl = L.maplibreGL({
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
style: `https://api.maptiler.com/maps/65258bd7-685d-4272-a6eb-0a4a62066f3c/style.json?key=88F9udSJXKhAAhJqrJ8d`
}).addTo(map);
map.zoomControl.setPosition('bottomright');
var marker = L.marker([lat, lon], {icon: POI_Icon}).addTo(map);
marker.bindPopup('${name}');//.openPopup();
</script>