Initial commit

DavidSouthgate · Oct 1, 2020 · abdce1c · abdce1c
commit abdce1c
Show file tree

Hide file tree

Showing 18 changed files with 14,976 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+**/node_modules
+dist/*
+!dist/*.css
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+# leaflet Multi Map
+## Installation
+Leaflet Multi Map requires Leaflet to be installed as a peer dependency.
+
+### With Imports
+```
+npm install leaflet
+npm install @davidsouthgate/leaflet-multi-map
+```
+
+```
+import L from "leaflet"
+import "leaflet/dist/leaflet.css";
+import "@davidsouthgate/leaflet-multi-map";
+import "@davidsouthgate/leaflet-multi-map/dist/leaflet-multi-map.css";
+```
+
+### Without Imports
+Build the project (using below instructions) and copy the leaflet-multi-map.min.js to your server.
+
+```html
+<head>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="leaflet-multi-map.min.js"></script>
+</head>
+```
+
+## Build
+To build run:
+
+```
+npm install
+npm run build
+```
diff --git a/dist/leaflet-multi-map.css b/dist/leaflet-multi-map.css
@@ -0,0 +1,10 @@
+.leaflet-multi-map-container {
+    position: relative;
+}
+
+.leaflet-multi-map {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
diff --git a/examples/react/README.md b/examples/react/README.md
@@ -0,0 +1,4 @@
+```
+npm install
+npm start
+```
diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.3",
+    "leaflet": "^1.7.1",
+    "proj4": "^2.6.2",
+    "proj4leaflet": "^1.0.2",
+    "@davidsouthgate/leaflet-multi-map": "../../"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/react/public/index.html b/examples/react/public/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/react/src/App.js b/examples/react/src/App.js
@@ -0,0 +1,93 @@
+import React from "react";
+import styles from "./App.module.css";
+
+import L from "leaflet"
+import "leaflet/dist/leaflet.css";
+import "proj4leaflet";
+import "@davidsouthgate/leaflet-multi-map";
+import "@davidsouthgate/leaflet-multi-map/dist/leaflet-multi-map.css";
+
+// Hack to get round marker not showing when using leaflet css from npm
+// https://github.com/PaulLeCam/react-leaflet/issues/453#issuecomment-410450387
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+});
+
+export default class Test extends React.Component {
+  componentDidMount() {
+      const CENTER = [56.8, -3.4];
+      const API_KEY = "LgUCghKqtwvZEASSCReMCCD9vpJlhrL9";
+      const SERVICE_URL = "https://api.os.uk/maps/raster/v1/zxy";
+
+      let multiMap = L.multiMap("map", {
+          tileLayers: [
+              L.MultiMap.tileLayer("osOutdoor", {
+                  title: "Ordnance Survey (Outdoor)",
+                  vanillaTileLayer: L.tileLayer(SERVICE_URL + '/Outdoor_27700/{z}/{x}/{y}.png?key=' + API_KEY, {
+                      attribution: "Contains OS data &copy; Crown copyright and database rights " + new Date().getFullYear()
+                  })
+              }),
+              L.MultiMap.tileLayer("openStreetMap", {
+                  title: "OpenStreetMap",
+                  vanillaTileLayer: L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                      attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
+                  })
+              }),
+              L.MultiMap.tileLayer("openTopoMap", {
+                  title: "OpenTopoMap",
+                  vanillaTileLayer: L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
+                      attribution: "Map data: &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, <a href=\"http://viewfinderpanoramas.org\">SRTM</a> | Map style: &copy; <a href=\"https://opentopomap.org\">OpenTopoMap</a> (<a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">CC-BY-SA</a>)"
+                  })
+              })
+          ],
+          maps: [
+              L.MultiMap.map("map27700", {
+                  tileLayerIds: [
+                      "osOutdoor"
+                  ],
+                  zoomOffset: 7,
+                  vanillaOptions: {
+                      crs: new L.Proj.CRS('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs', {
+                          resolutions: [ 896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75 ],
+                          origin: [ -238375.0, 1376256.0 ]
+                      }),
+                  }
+              }),
+              L.MultiMap.map("map3857", {
+                  tileLayerIds: [
+                      "openStreetMap",
+                      "openTopoMap"
+                  ],
+                  zoomOffset: 0
+              })
+          ],
+          center: CENTER,
+          zoom: 7
+      });
+
+      let cities = L.layerGroup(
+          [
+              L.marker([57.1498817, -2.1950666]).bindPopup("Aberdeen"),
+              L.marker([56.4745806, -3.0368723]).bindPopup("Dundee"),
+              L.marker([55.9544530, -3.1893327]).bindPopup("Edinburgh"),
+              L.marker([55.8554403, -4.3024976]).bindPopup("Glasgow"),
+              L.marker([57.4679914, -4.2568770]).bindPopup("Inverness"),
+              L.marker([56.3904758, -3.4842713]).bindPopup("Perth"),
+              L.marker([56.1168820, -3.9360940]).bindPopup("Stirling"),
+          ]
+      );
+
+      multiMap.addOverlay("Cities", cities, {checked: true});
+  }
+
+  render() {
+    return (
+        <div>
+          <div id="map" className={styles.map}/>
+        </div>
+    )
+  }
+}
diff --git a/examples/react/src/App.module.css b/examples/react/src/App.module.css
@@ -0,0 +1,5 @@
+.map {
+    width: 600px;
+    height: 600px;
+    background-color: red;
+}
diff --git a/examples/react/src/index.js b/examples/react/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Example</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../node_modules/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="../../dist/leaflet-multi-map.css" />
+    <style>
+        #map {
+            width: 600px;
+            height: 600px;
+        }
+    </style>
+</head>
+<body>
+<div id="map"></div>
+
+<script src="../../node_modules/leaflet/dist/leaflet.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
+<script src="../../dist/leaflet-multi-map.min.js"></script>
+
+<script>
+    const CENTER = [56.8, -3.4];
+    const API_KEY = "LgUCghKqtwvZEASSCReMCCD9vpJlhrL9";
+    const SERVICE_URL = "https://api.os.uk/maps/raster/v1/zxy";
+
+    let multiMap = L.multiMap("map", {
+        tileLayers: [
+            L.MultiMap.tileLayer("osOutdoor", {
+                title: "Ordnance Survey (Outdoor)",
+                vanillaTileLayer: L.tileLayer(SERVICE_URL + '/Outdoor_27700/{z}/{x}/{y}.png?key=' + API_KEY, {
+                    attribution: "Contains OS data &copy; Crown copyright and database rights " + new Date().getFullYear()
+                })
+            }),
+            L.MultiMap.tileLayer("openStreetMap", {
+                title: "OpenStreetMap",
+                vanillaTileLayer: L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                    attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
+                })
+            }),
+            L.MultiMap.tileLayer("openTopoMap", {
+                title: "OpenTopoMap",
+                vanillaTileLayer: L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
+                    attribution: "Map data: &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, <a href=\"http://viewfinderpanoramas.org\">SRTM</a> | Map style: &copy; <a href=\"https://opentopomap.org\">OpenTopoMap</a> (<a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">CC-BY-SA</a>)"
+                })
+            })
+        ],
+        maps: [
+            L.MultiMap.map("map27700", {
+                tileLayerIds: [
+                    "osOutdoor"
+                ],
+                zoomOffset: 7,
+                vanillaOptions: {
+                    crs: new L.Proj.CRS('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs', {
+                        resolutions: [ 896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75 ],
+                        origin: [ -238375.0, 1376256.0 ]
+                    }),
+                }
+            }),
+            L.MultiMap.map("map3857", {
+                tileLayerIds: [
+                    "openStreetMap",
+                    "openTopoMap"
+                ],
+                zoomOffset: 0
+            })
+        ],
+        center: CENTER,
+        zoom: 7
+    });
+
+    let cities = L.layerGroup(
+        [
+            L.marker([57.1498817, -2.1950666]).bindPopup("Aberdeen"),
+            L.marker([56.4745806, -3.0368723]).bindPopup("Dundee"),
+            L.marker([55.9544530, -3.1893327]).bindPopup("Edinburgh"),
+            L.marker([55.8554403, -4.3024976]).bindPopup("Glasgow"),
+            L.marker([57.4679914, -4.2568770]).bindPopup("Inverness"),
+            L.marker([56.3904758, -3.4842713]).bindPopup("Perth"),
+            L.marker([56.1168820, -3.9360940]).bindPopup("Stirling"),
+        ]
+    );
+
+    multiMap.addOverlay("Cities", cities, {checked: true});
+</script>
+</body>
+</html>