Add base map code

This was built with `npm create ol-app my-app`.
2023-07-03 00:20:36 -05:00 · 2023-07-03 00:20:36 -05:00 · a762f2b9a4
commit a762f2b9a4
10 changed files with 1471 additions and 0 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -0,0 +1,32 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+env:
+  CI: true
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone Repository
+        uses: actions/checkout@v3
+
+      - name: Set Node.js Version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+node_modules
+dist
--- a/README.md
+++ b/README.md
@ -0,0 +1,36 @@
+# maps.chandlerswift.com
+
+ * My location (from whereis.chandlerswift.com)
+ * Menards, Culver's, Kwik Trip locations (triangles rendered?)
+ * Bridges
+ * Survey markers
+ * OSM contributions
+ * workouts (bike rides, runs)
+ * Amtrack routes -- https://www.amtrak.com/plan-your-trip.html
+ * NHL stadiums -- filters for Eric and Chandler have visited -- https://upload.wikimedia.org/wikipedia/commons/2/28/NHL_arenas.jpg
+ * Layer for drone imagery a la openaerialmap.com
+ * Trip layers/slideshows
+ 
+
+All filterable by time frame
+
+Americana theme?
+
+## OpenLayers + Vite (from `npm create ol-app my-app`'s README)
+
+This example demonstrates how the `ol` package can be used with [Vite](https://vitejs.dev/).
+
+To get started, run the following (requires Node 14+):
+
+    npx create-ol-app my-app --template vite
+
+Then change into your new `my-app` directory and start a development server (available at http://localhost:5173):
+
+    cd my-app
+    npm start
+
+To generate a build ready for production:
+
+    npm run build
+
+Then deploy the contents of the `dist` directory to your server.  You can also run `npm run serve` to serve the results of the `dist` directory for preview.
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Using OpenLayers with Vite</title>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,17 @@
+import './style.css';
+import {Map, View} from 'ol';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,15 @@
+{
+  "name": "maps.chandlerswift.com",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^4.0.4"
+  },
+  "dependencies": {
+    "ol": "latest"
+  }
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,12 @@
+@import "node_modules/ol/ol.css";
+
+html, body {
+  margin: 0;
+  height: 100%;
+}
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,5 @@
+export default {
+  build: {
+    sourcemap: true,
+  }
+}