fix: remove generated code from repository and other maintenance

.eslintrc.cjs

@@ -15,6 +15,7 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-inferrable-types': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/require-await': 'off',
     'prefer-const': ['error', {destructuring: 'all'}]
   },
 

.gitignore

@@ -1,3 +1,5 @@
 /node_modules
 /dist
 /.env
+/examples/lib/*d.ts
+/examples/examples.json

README.md

@@ -47,9 +47,10 @@ modules can only be imported using async imports from urls.
 - `/src/editor`: contains all the source-files for editor-specific
   functionality (monaco setup etc.)
 - `/examples`: contains the examples-index-page and source-files for all
-  examples. The typescript-files here are packaged into examples.json by
-  the `update-examples.mjs` script and should all follow the conventions for
-  examples below
+  examples. The typescript files here should all follow the conventions for
+  examples below. For the examples index-page, these files are packaged 
+  into examples.json by the `build:examples` npm task (see 
+  `/scripts/update-examples.mjs`)
 - `/examples/lib`: contains the typescript declaration-files used by the
   editor and referenced by the examples. Those files are generated by
   `npm run build:dts` from the library files in `src/lib`
@@ -87,7 +88,8 @@ version should always be manually checked after a deployment.
 
 The following supporting scripts and tasks are available:
 
-- `npm start`: starts the vite dev-server
+- `npm start`: starts the vite dev-server (this will also run the `build:dts` 
+  and `build:examples` tasks)
 - `npm run build:dts`: compiles all typescript-files in `./src/lib`
   into corresponding declaration files in `./examples/lib`
 - `npm run build:examples`: runs the `script/update-examples.mjs` script to

examples/05.hover-styling.ts

@@ -2,11 +2,11 @@
 import {Marker} from './lib/marker';
 
 export default (map: google.maps.Map) => {
-  const marker = new Marker({
-    map,
-    position: {lat: 53.5, lng: 10}
-  });
+  const position = {lat: 53.5, lng: 10};
+  const marker = new Marker({map, position});
 
   marker.scale = ({marker}) => (marker.hovered ? 1.8 : 1.5);
   marker.color = ({marker}) => (marker.hovered ? '#4285F4' : '#F4B400');
+
+  map.setCenter(position);
 };

examples/07.mulitple-marker-single-select.ts

@@ -1,4 +1,4 @@
-// title: multiple markers / single selection
+// title: multiple markers / single selection (w/ user-data)
 import {Marker} from './lib/marker';
 
 function rnd(min: number, max: number) {

examples/07b.mulitple-marker-single-select.ts

@@ -0,0 +1,49 @@
+// title: multiple markers / single selection (alternative w/ 'style objects')
+import {Attributes, Marker} from './lib/marker';
+
+function rnd(min: number, max: number) {
+  return min + Math.random() * (max - min);
+}
+
+export default (map: google.maps.Map) => {
+  const markers: Marker[] = [];
+  const bounds = new google.maps.LatLngBounds();
+
+  //
+
+  const defaultStyle: Partial<Attributes> = {
+    color: '#4285F4',
+    scale: ({marker}) => (marker.hovered ? 1.3 : 1.2)
+  };
+  const selectedStyle = {...defaultStyle, color: '#DB4437'};
+
+  //
+
+  let selectedMarker: Marker | null = null;
+
+  // create a couple of random markers
+  for (let i = 0; i < 10; i++) {
+    const position = {lat: rnd(53.5, 53.6), lng: rnd(9.9, 10.1)};
+    bounds.extend(position);
+
+    const marker = new Marker({
+      map,
+      position,
+      ...defaultStyle
+    });
+
+    marker.addListener('click', () => {
+      if (selectedMarker !== null) {
+        selectedMarker.setAttributes(defaultStyle);
+      }
+
+      const marker = markers[i];
+      marker.setAttributes(selectedStyle);
+      selectedMarker = marker;
+    });
+
+    markers.push(marker);
+  }
+
+  map.fitBounds(bounds);
+};

examples/10.marker-collection.ts

@@ -0,0 +1,63 @@
+// title: basic marker collection
+
+import {CollisionBehavior, Marker} from './lib/marker';
+import {MarkerCollection} from './lib/marker-collection';
+import {MaterialIcons} from './lib/icons';
+
+function rnd(min: number, max: number) {
+  return min + Math.random() * (max - min);
+}
+
+type MyData = {
+  id: number;
+  position: google.maps.LatLngLiteral;
+  category: string;
+};
+
+const categories = ['a', 'b', 'c'];
+const categoryIcons: {[c: string]: string} = {
+  a: 'restaurant',
+  b: 'nightlife',
+  c: 'person'
+};
+
+async function loadData(): Promise<MyData[]> {
+  const data = [];
+  for (let i = 0; i < 50; i++) {
+    const position = {lat: rnd(53.5, 53.6), lng: rnd(9.9, 10.1)};
+    const category = categories[Math.floor(Math.random() * 3)];
+
+    data.push({
+      id: i,
+      position,
+      category
+    });
+  }
+
+  return data;
+}
+
+export default async (map: google.maps.Map) => {
+  Marker.registerIconProvider(MaterialIcons());
+
+  const data = await loadData();
+  const markers = new MarkerCollection(data, {
+    position: ({data}) => data.position,
+    scale: 1.4,
+    color: ({marker}) => (marker.hovered ? '#ffcc22' : '#dd9222'),
+    icon: ({data}) => categoryIcons[data.category],
+    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
+  });
+
+  markers.map = map;
+  map.moveCamera({
+    center: {lat: 53.55, lng: 10},
+    zoom: 11,
+    heading: 0,
+    tilt: 0
+  });
+
+  return () => {
+    markers.map = null;
+  };
+};

package.json

@@ -2,7 +2,7 @@
   "name": "marker-api-design-testing-ground",
   "version": "1.1.0",
   "scripts": {
-    "start": "vite",
+    "start": "run-p build:* && vite",
     "build:dts": "tsc --declaration --emitDeclarationOnly --module esnext --target es2022 --lib es2022,dom --stripInternal --strict src/lib/*.ts --outDir ./examples/lib",
     "build:examples": "zx scripts/update-examples.mjs",
     "build": "run-p build:* && vite build",