Working on vector tiles

src/components/gpx/osm-icons.ts

@@ -0,0 +1,101 @@
+import atm from '../../icons/osm/atm_euro.svg';
+import bar from '../../icons/osm/bar.svg';
+import cafe from '../../icons/osm/cafe.svg';
+import fast_food from '../../icons/osm/fastfood.svg';
+import pub from '../../icons/osm/pub.svg';
+import restaurant from '../../icons/osm/restaurant.svg';
+import bank from '../../icons/osm/bank_euro.svg';
+import doctors from '../../icons/osm/doctors.svg';
+import hospital from '../../icons/osm/hospital.svg';
+import pharmacy from '../../icons/osm/pharmacie.svg';
+import police from '../../icons/osm/police2.svg';
+import fire_station from '../../icons/osm/firestation.svg';
+import drinking_water from '../../icons/osm/drinking_water.svg';
+import waste_basket from '../../icons/osm/waste_basket.svg';
+import waste_disposal from '../../icons/osm/waste_disposal.svg';
+import vending_machine from '../../icons/osm/vending_machine.svg';
+
+import bakery from '../../icons/osm/bakery.svg';
+import butcher from '../../icons/osm/butcher2.svg';
+//import cheese from '../../icons/osm/cheese.svg';
+//import chocolate from '../../icons/osm/chocolate.svg';
+import dairy from '../../icons/osm/dairy.svg';
+//import farm from '../../icons/osm/farm.svg';
+import greengrocer from '../../icons/osm/greengrocer.svg';
+//import health_food from '../../icons/osm/health_food.svg';
+//import pasta from '../../icons/osm/pasta.svg';
+//import pastry from '../../icons/osm/pastry.svg';
+import seafood from '../../icons/osm/seafood.svg';
+//import water from '../../icons/osm/water.svg';
+import department_store from '../../icons/osm/department_store.svg';
+//import general from '../../icons/osm/general.svg';
+//import mall from '../../icons/osm/mall.svg';
+import supermarket from '../../icons/osm/supermarket.svg';
+//import wholesale from '../../icons/osm/wholesale.svg';
+import outdoor from '../../icons/osm/outdoor.svg';
+import laundry from '../../icons/osm/laundry.svg';
+import convenience from '../../icons/osm/convenience.svg';
+
+import hotel from '../../icons/osm/hotel2.svg';
+import alpine_hut from '../../icons/osm/alpinehut.svg';
+import apartment from '../../icons/osm/apartment.svg';
+import camp_site from '../../icons/osm/camping.svg';
+import chalet from '../../icons/osm/chalet.svg';
+import guest_house from '../../icons/osm/guest_house.svg';
+import hostel from '../../icons/osm/hostel.svg';
+import motel from '../../icons/osm/motel.svg';
+import wilderness_hut from '../../icons/osm/wilderness_hut.svg';
+
+export const osmIcons = {
+  bar,
+  fast_food,
+  food_court: fast_food,
+  pub,
+  restaurant,
+  cafe,
+  atm,
+  bank,
+  doctors,
+  hospital,
+  pharmacy,
+  police,
+  fire_station,
+  drinking_water,
+  water_point: drinking_water,
+  waste_basket,
+  waste_disposal,
+  vending_machine: convenience,
+
+  bakery,
+  butcher,
+  cheese: dairy,
+  chocolate: bakery,
+  convenience,
+  dairy,
+  farm: convenience,
+  greengrocer,
+  health_food: convenience,
+  pasta: dairy,
+  pastry: bakery,
+  seafood,
+  water: drinking_water,
+  department_store,
+  general: department_store,
+  mall: department_store,
+  supermarket,
+  wholesale: supermarket,
+  outdoor,
+  laundry,
+
+  hotel,
+  alpine_hut,
+  apartment,
+  camp_site,
+  chalet,
+  guest_house,
+  hostel,
+  motel,
+  wilderness_hut,
+};
+
+export default osmIcons;

src/components/gpx/styles.ts

@@ -20,6 +20,9 @@ import { Point } from 'ol/geom';
 import { Coordinate } from 'ol/coordinate';
 import { createDefaultStyle } from 'ol/style/Style';
 
+import osmIcons from './osm-icons';
+import { indexOf } from 'lodash';
+
 interface StyleParameters {
   type: string;
   isSelected: boolean;
@@ -308,6 +311,40 @@ const styles = {
     }, memoizeOptions),
   },
   MultiLineString: {},
+  Point: {
+    getParameters: (feature: Feature) => {
+      return {
+        isSelected: feature.get('isSelected') ?? false,
+        name: feature.get('name'),
+        klass: feature.get('class'),
+      };
+    },
+    getStyle: memoize((params: any) => {
+      console.log({ caller: 'getStyle', params });
+      const { isSelected, name, klass } = params;
+      const icon = osmIcons[klass];
+      if (icon === undefined) {
+        return null;
+      }
+      return new Style({
+        image: new Icon({
+          src: icon,
+          scale: 1.5,
+          opacity: 0.9,
+//          anchor: [0, 0],
+        }),
+        text: new Text({
+          text: name,
+          font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+          offsetY: +20,
+          padding: [2, 2, 2, 2],
+          fill: new Fill({
+            color: 'black',
+          }),
+        }),
+      });
+    }, memoizeOptions),
+  },
 };
 
 styles.MultiLineString = styles.LineString;
@@ -318,13 +355,16 @@ export const style = (feature: Feature, resolution: number) => {
   ) as keyof typeof styles;
   const styleForType = styles[type];
   if (!styleForType) {
-//    console.log({ caller: 'style / default', type, feature, resolution });
+    //    console.log({ caller: 'style / default', type, feature, resolution });
     return createDefaultStyle(feature, resolution)[0];
   }
   const params = styles[type].getParameters(feature);
   const getStyle = styles[type].getStyle;
   const style = getStyle(params);
-//  console.log({ caller: 'style', type, params, style });
+  //  console.log({ caller: 'style', type, params, style });
+  if (style === null) {
+    return createDefaultStyle(feature, resolution)[0];
+  }
   return style;
 };
 

src/components/map/Map.tsx

@@ -244,6 +244,7 @@ const Map: Component = () => {
     const vectorTileLayer1 = new VectorTileLayer({
       source: vectorTileSource1,
       style: style,
+      declutter: false,
     });
 
     const vectorTileSource2 = new VectorTileSource({