RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map: use terrain at high zoom levels

pull/396/head
Varun Patil 2023-02-09 09:51:26 -08:00
parent 5f07ffd5c9
commit 5004de8cf6
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/Controller/PageController.php
View File

@ -117,6 +117,7 @@ class PageController extends Controller
// Allow OSM // Allow OSM
$policy->addAllowedFrameDomain('www.openstreetmap.org'); $policy->addAllowedFrameDomain('www.openstreetmap.org');
$policy->addAllowedImageDomain('https://*.tile.openstreetmap.org'); $policy->addAllowedImageDomain('https://*.tile.openstreetmap.org');
$policy->addAllowedImageDomain('https://*.a.ssl.fastly.net');
return $policy; return $policy;
} }

23
src/components/top-matter/MapSplitMatter.vue
View File

@ -8,7 +8,7 @@
@moveend="refresh" @moveend="refresh"
@zoomend="refresh" @zoomend="refresh"
> >
<LTileLayer :url="url" :attribution="attribution" /> <LTileLayer :url="tileurl" :attribution="attribution" />
<LMarker <LMarker
v-for="cluster in clusters" v-for="cluster in clusters"
:key="cluster.id" :key="cluster.id"
@ -38,9 +38,11 @@ import axios from "@nextcloud/axios";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
const TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; const OSM_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const ATTRIBUTION = const OSM_ATTRIBUTION =
'&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'; '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const STAMEN_URL = `https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}{r}.png`;
const STAMEN_ATTRIBUTION = `Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.`;
type IMarkerCluster = { type IMarkerCluster = {
id?: number; id?: number;
@ -66,8 +68,6 @@ export default defineComponent({
}, },
data: () => ({ data: () => ({
url: TILE_URL,
attribution: ATTRIBUTION,
zoom: 2, zoom: 2,
clusters: [] as IMarkerCluster[], clusters: [] as IMarkerCluster[],
}), }),
@ -82,6 +82,16 @@ export default defineComponent({
this.refresh(); this.refresh();
}, },
computed: {
tileurl() {
return this.zoom >= 5 ? OSM_TILE_URL : STAMEN_URL;
},
attribution() {
return this.zoom >= 5 ? OSM_ATTRIBUTION : STAMEN_ATTRIBUTION;
},
},
methods: { methods: {
async refresh() { async refresh() {
const map = this.$refs.map as LMap; const map = this.$refs.map as LMap;
@ -96,7 +106,8 @@ export default defineComponent({
// Set query parameters to route if required // Set query parameters to route if required
const s = (x: number) => x.toFixed(6); const s = (x: number) => x.toFixed(6);
const bounds = `${s(minLat)},${s(maxLat)},${s(minLon)},${s(maxLon)}`; const bounds = `${s(minLat)},${s(maxLat)},${s(minLon)},${s(maxLon)}`;
const zoom = map.mapObject.getZoom().toString(); this.zoom = map.mapObject.getZoom();
const zoom = this.zoom.toString();
if (this.$route.query.b === bounds && this.$route.query.z === zoom) { if (this.$route.query.b === bounds && this.$route.query.z === zoom) {
return; return;
} }