lutangar · lutangar · Nov 29, 2023 · Nov 29, 2023 · Nov 29, 2023
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -0,0 +1,18 @@
+name: Docs
+
+on:
+  push:
+    branches: ['master']
+  pull_request:
+    branches: ['master']
+  workflow_dispatch:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+docs/*.json
 node_modules
 npm-debug.log
 admin1CodesASCII.txt

diff --git a/.npmignore b/.npmignore
@@ -42,6 +42,7 @@ packages
 
 # Project
 .github/
+docs/
 .prettierignore
 .prettierrc
 .release-it.json

diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base target="_top" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>cities.json - Cities of the World with a population > 1000</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/[email protected]/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+      .leaflet-container {
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+      }
+      .ribbon-link {
+        position: fixed;
+        right: 0;
+        top: 0;
+        z-index: 999;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <a class="ribbon-link" href="https://github.com/lutangar/cities.json"
+      ><img
+        decoding="async"
+        width="149"
+        height="149"
+        src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149"
+        class="attachment-full size-full"
+        alt="Fork me on GitHub"
+        loading="lazy"
+        data-recalc-dims="1"
+    /></a>
+    <script type="module" src="./index.js"></script>
+    <script></script>
+  </body>
+</html>
diff --git a/docs/index.js b/docs/index.js
@@ -0,0 +1,29 @@
+import cities from './cities.geo.json' assert { type: 'json' };
+
+const map = L.map('map').setView([45.74846, 4.84671], 15);
+
+L.tileLayer(
+  'https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png',
+  {
+    maxZoom: 18,
+  }
+).addTo(map);
+
+function onEachFeature(feature, layer) {
+  const popupContent = `<h2>${feature?.properties?.name}</h2>`;
+  layer.bindPopup(popupContent);
+}
+
+L.geoJSON([cities], {
+  onEachFeature,
+  pointToLayer(feature, latlng) {
+    return L.circleMarker(latlng, {
+      radius: 5,
+      fillColor: '#ff7800',
+      color: '#000',
+      weight: 1,
+      opacity: 1,
+      fillOpacity: 0.8,
+    });
+  },
+}).addTo(map);
diff --git a/geojson.js b/geojson.js
@@ -0,0 +1,24 @@
+const cities = require('./cities.json');
+const jsonfile = require('jsonfile');
+
+const mapCityToPointFeature = ({ lat, lng, ...properties }) => ({
+  type: 'Feature',
+  properties,
+  geometry: {
+    type: 'Point',
+    coordinates: [parseFloat(lng), parseFloat(lat)],
+  },
+});
+jsonfile.writeFile(
+  './docs/cities.geo.json',
+  {
+    type: 'FeatureCollection',
+    features: cities.map(mapCityToPointFeature),
+  },
+  { spaces: 2 },
+  (e) => {
+    if (e) {
+      console.error(e);
+    }
+  }
+);
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "convert": "node convert",
     "download": "node download",
     "build": "npm run download && npm run convert",
+    "geojson": "node geojson",
     "prettier": "prettier -w -u .",
     "release": "release-it"
   },