Add protomaps defaultTheme and labelRules (#158)

grommet · Aug 12, 2024 · 78740d4 · 78740d4
1 parent f409845
commit 78740d4
Show file tree

Hide file tree

Showing 6 changed files with 764 additions and 305 deletions.
diff --git a/grommet-leaflet/package.json b/grommet-leaflet/package.json
@@ -9,9 +9,13 @@
   ],
   "main": "./dist/grommet-leaflet.umd.cjs",
   "module": "./dist/grommet-leaflet.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/grommet-leaflet.js",
+      "import": {
+        "default": "./dist/grommet-leaflet.js",
+        "types": "./dist/index.d.ts"
+      },
       "require": "./dist/grommet-leaflet.umd.cjs"
     }
   },
@@ -43,7 +47,7 @@
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
     "prop-types": "^15.8.1",
-    "protomaps-leaflet": "^2.0.1",
+    "protomaps-leaflet": "^4.0.0",
     "react-leaflet": "^4.2.1",
     "uuid": "^9.0.1"
   },

diff --git a/grommet-leaflet/src/layers/Map/index.d.ts b/grommet-leaflet/src/layers/Map/index.d.ts
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import * as L from 'leaflet';
 import { GrommetLeafletThemeType } from 'grommet-leaflet';
+import { TileLayerExtendedProps } from '../TileLayer';
 
 export interface MapProps {
   children?: any;
   theme?: GrommetLeafletThemeType;
+  tileLayer: TileLayerExtendedProps
 }
 
 export interface MapExtendedProps
   extends MapProps,
-    L.MapOptions,
-    Omit<JSX.IntrinsicElements['div'], keyof MapProps> {}
+  L.MapOptions,
+  Omit<JSX.IntrinsicElements['div'], keyof MapProps> { }
 
 declare const Map: React.FC<MapExtendedProps>;
 

diff --git a/grommet-leaflet/src/layers/TileLayer/TileLayer.jsx b/grommet-leaflet/src/layers/TileLayer/TileLayer.jsx
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { TileLayer as LeafletTileLayer } from 'react-leaflet';
 import { leafletLayer, paintRules, labelRules } from 'protomaps-leaflet';
-import themes from 'protomaps-leaflet/dist/default_style/themes';
 import {
   // createElementObject,
   createTileLayerComponent,
   updateGridLayer,
 } from '@react-leaflet/core';
+import { themes } from '../../themes/protomaps/themes.ts';
 
-const { light } = themes;
+const defaultTheme = { ...themes.light };
 
 const createElementObject = (instance, context, container) =>
   Object.freeze({ instance, context, container });
@@ -42,10 +42,12 @@ export const TileLayer = ({ attribution, url, format, ...rest }) => {
         attribution={attribution}
         url={url}
         paintRules={
-          theme.map?.tiles && paintRules({ ...light, ...theme.map.tiles })
+          theme.map?.tiles &&
+          paintRules({ ...defaultTheme, ...theme.map.tiles })
         }
         labelRules={
-          theme.map?.labels && labelRules({ ...light, ...theme.map.tiles })
+          theme.map?.tiles &&
+          labelRules({ ...defaultTheme, ...theme.map.tiles })
         }
         {...rest}
       />

diff --git a/grommet-leaflet/src/layers/TileLayer/index.d.ts b/grommet-leaflet/src/layers/TileLayer/index.d.ts
@@ -9,8 +9,8 @@ export interface TileLayerProps {
 
 export interface TileLayerExtendedProps
   extends TileLayerProps,
-    L.TileLayer,
-    Omit<JSX.IntrinsicElements['div'], keyof TileLayerProps> {}
+  L.TileLayer,
+  Omit<JSX.IntrinsicElements['div'], keyof TileLayerProps> { }
 
 declare const TileLayer: React.FC<TileLayerExtendedProps>;