Add tileSize parameter to basemap options (#7918)

* Added tileSize parameter to basemap options

* Fix blurry icon in map interface.

api/src/database/system-data/fields/settings.yaml

@@ -318,3 +318,17 @@ fields:
             interface: text-input
             options:
               placeholder: http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png
+        - field: tileSize
+          name: $t:tile_size
+          schema:
+            is_nullable: true
+          meta:
+            interface: input
+            options:
+              placeholder: '512'
+            conditions:
+              name: typeNeqRaster
+              rule:
+                type:
+                  _neq: 'raster'
+              hidden: true

app/src/interfaces/map/map.vue

@@ -75,7 +75,7 @@ import { useAppStore } from '@/stores';
 import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/basemap';
 
 const MARKER_ICON_URL =
-	'https://cdn.jsdelivr.net/gh/google/material-design-icons/png/maps/place/materialicons/24dp/1x/baseline_place_black_24dp.png';
+	'https://cdn.jsdelivr.net/gh/google/material-design-icons/png/maps/place/materialicons/24dp/2x/baseline_place_black_24dp.png';
 
 export default defineComponent({
 	props: {

app/src/interfaces/map/style.ts

@@ -131,7 +131,7 @@ export default [
 			'icon-image': 'place',
 			'icon-anchor': 'bottom',
 			'icon-allow-overlap': true,
-			'icon-size': 2,
+			'icon-size': 1,
 			'icon-offset': [0, 3],
 		},
 		paint: {
@@ -152,7 +152,7 @@ export default [
 			'icon-image': 'place',
 			'icon-anchor': 'bottom',
 			'icon-allow-overlap': true,
-			'icon-size': 2,
+			'icon-size': 1,
 			'icon-offset': [0, 3],
 		},
 		paint: {
@@ -173,7 +173,7 @@ export default [
 			'icon-image': 'place',
 			'icon-anchor': 'bottom',
 			'icon-allow-overlap': true,
-			'icon-size': 2,
+			'icon-size': 1,
 			'icon-offset': [0, 3],
 		},
 		paint: {

app/src/utils/geometry/basemap.ts

@@ -7,12 +7,14 @@ export type BasemapSource = {
 	name: string;
 	type: 'raster' | 'tile' | 'style';
 	url: string;
+	tileSize?: number;
 };
 
 const defaultBasemap: BasemapSource = {
 	name: 'OpenStreetMap',
 	type: 'raster',
 	url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+	tileSize: 256,
 };
 
 const baseStyle: Style = {
@@ -38,6 +40,7 @@ export function getStyleFromBasemapSource(basemap: BasemapSource): Style | strin
 		const source: RasterSource = { type: 'raster' };
 		if (basemap.type == 'raster') {
 			source.tiles = expandUrl(basemap.url);
+			source.tileSize = basemap.tileSize || 512;
 		}
 		if (basemap.type == 'tile') {
 			source.url = basemap.url;