base layer config

frontend/src/pages/MapContainer.tsx

@@ -84,6 +84,8 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         defaultTheme={map.default_theme}
         showZoomControl={map.show_zoom_control}
         expandLayerControl={map.expand_layer_control}
+        tileServerUrl={map.tile_server_url}
+        tileServerAttribution={map.tile_server_attribution}
       >
         {layers &&
           apis &&

lib/src/Components/Map/UtopiaMap.tsx

@@ -56,6 +56,8 @@ function UtopiaMap({
   defaultTheme,
   donationWidget,
   expandLayerControl,
+  tileServerUrl,
+  tileServerAttribution,
 }: {
   /** height of the map (default '500px') */
   height?: string
@@ -85,6 +87,10 @@ function UtopiaMap({
   donationWidget?: boolean
   /** open layer control on map initialisation */
   expandLayerControl?: boolean
+  /** configure a custom tile server */
+  tileServerUrl?: string
+  /** configure a custom tile server attribution */
+  tileServerAttribution?: string
 }) {
   return (
     <ContextWrapper>
@@ -104,6 +110,8 @@ function UtopiaMap({
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}
           expandLayerControl={expandLayerControl}
+          tileServerUrl={tileServerUrl}
+          tileServerAttribution={tileServerAttribution}
         >
           {children}
         </UtopiaMapInner>

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -55,6 +55,8 @@ export function UtopiaMapInner({
   defaultTheme = '',
   donationWidget,
   expandLayerControl,
+  tileServerUrl,
+  tileServerAttribution,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -65,6 +67,8 @@ export function UtopiaMapInner({
   showThemeControl?: boolean
   defaultTheme?: string
   expandLayerControl?: boolean
+  tileServerUrl?: string
+  tileServerAttribution?: string
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -277,8 +281,12 @@ export function UtopiaMapInner({
       </Control>
       <TileLayer
         maxZoom={19}
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        tileSize={256}
-        url='https://tile.osmand.net/hd/{z}/{x}/{y}.png'
+        attribution={
+          tileServerAttribution ??
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }
+        url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
       />
       <MarkerClusterGroup
         ref={(r) => setClusterRef(r as any)}

lib/src/types/UtopiaMapProps.d.ts

@@ -18,4 +18,6 @@ export interface UtopiaMapProps {
   donationWidget?: boolean
   defaultTheme?: string
   expandLayerControl?: boolean
+  tile_server_url?: string
+  tile_server_attribution?: string
 }