Home Explore Help
Sign In
tati
/
accent-dialect-map
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add and configure webpack

Tatiana Inama 6 years ago
parent
c180834b13
commit
736ddfff9d
8 changed files with 6945 additions and 22 deletions
Unified View Show Diff Stats
  1. 4 8
      index.html
  2. 1 0
      dist/main.js
  3. 0 0
      dist/styles.css
  4. 6878 0
      package-lock.json
  5. 19 2
      package.json
  6. 5 2
      app.js
  7. 7 10
      map.js
  8. 31 0
      webpack.config.js

+ 4 - 8
index.html
View File 

@@ -4,14 +4,10 @@
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
-    <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
 
-    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
 
-    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
 
+    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
 
     <title>Accent dialect map</title>
 
     <title>Accent dialect map</title>
 
   </head>
 
   </head>
 
   <body class="bg-light">
 
   <body class="bg-light">
 
-    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
 
-    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css" type="text/css" />
 
     <link rel="stylesheet" href="styles.css"/>
 
     <link rel="stylesheet" href="styles.css"/>
 
 
 
     <div class="container main-app">      
     <div class="container main-app">      
@@ -119,7 +115,7 @@
 
           </form>
 
           </form>
 
       </div>
 
       </div>
 
       <div id="map-drawing" class="content page page-3">
 
       <div id="map-drawing" class="content page page-3">
 
-        <h2>Map</h2>
 
+        <h2>Map yeah</h2>
 
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, numquam necessitatibus, iusto at eum non, voluptatum accusantium fugiat aut sapiente recusandae tenetur amet! Quod itaque eaque illo nemo temporibus perferendis!</p>
 
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, numquam necessitatibus, iusto at eum non, voluptatum accusantium fugiat aut sapiente recusandae tenetur amet! Quod itaque eaque illo nemo temporibus perferendis!</p>
 
         <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
 
         <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
 
         <button type="button">Previous</button>
 
         <button type="button">Previous</button>
 
@@ -127,13 +123,13 @@
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
     <footer class="text-center text-small">
 
     <footer class="text-center text-small">
 
-      <p class="mb-1">&copy; Legal stuff if needed</p>
 
+      <p class="mb-1">&copy; Legal stuff if needed keke</p>
 
       <ul class="list-inline">
 
       <ul class="list-inline">
 
         <li class="list-inline-item"><a href="#">Privacy</a></li>
 
         <li class="list-inline-item"><a href="#">Privacy</a></li>
 
         <li class="list-inline-item"><a href="#">Terms</a></li>
 
         <li class="list-inline-item"><a href="#">Terms</a></li>
 
       </ul>
 
       </ul>
 
     </footer>
 
     </footer>
 
   </div>
 
   </div>
 
-  <script src="app.js"></script>
 
+  <script src="main.js"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

File diff suppressed because it is too large
+ 1 - 0
dist/main.js


styles.css → dist/styles.css
View File


File diff suppressed because it is too large
+ 6878 - 0
package-lock.json


+ 19 - 2
package.json
View File 

@@ -4,7 +4,10 @@
 
   "description": "",
 
   "description": "",
 
   "main": "app.js",
 
   "main": "app.js",
 
   "scripts": {
 
   "scripts": {
 
-    "test": "echo \"Error: no test specified\" && exit 1"
 
+    "test": "echo \"Error: no test specified\" && exit 1",
 
+    "watch": "webpack --watch",
 
+    "start": "webpack-dev-server --open",
 
+    "build": "npx webpack --config webpack.config.js"
 
   },
 
   },
 
   "repository": {
 
   "repository": {
 
     "type": "git",
 
     "type": "git",
 
@@ -14,5 +17,19 @@
 
     "map"
 
     "map"
 
   ],
 
   ],
 
   "author": "tati",
 
   "author": "tati",
 
-  "license": "ISC"
 
+  "license": "ISC",
 
+  "devDependencies": {
 
+    "css-loader": "^3.4.2",
 
+    "html-webpack-plugin": "^3.2.0",
 
+    "webpack": "^4.42.0",
 
+    "webpack-cli": "^3.3.11",
 
+    "webpack-dev-server": "^3.10.3"
 
+  },
 
+  "dependencies": {
 
+    "@mapbox/mapbox-gl-draw": "^1.1.2",
 
+    "@types/mapbox-gl": "^1.8.1",
 
+    "mapbox-gl": "^1.8.1",
 
+    "mapbox-gl-draw-freehand-mode": "^1.0.3",
 
+    "style-loader": "^1.1.3"
 
+  }
 
 }
 
 }

+ 5 - 2
app.js
View File 

@@ -1,6 +1,6 @@
 
 'use strict';
 
 'use strict';
 
 
 
-let currentPage = 2;
 
+let currentPage = 3;
 
 const tabs = document.getElementsByClassName('page');
 
 const tabs = document.getElementsByClassName('page');
 
 const validField = (formId, fieldId, customFieldId) => {
 
 const validField = (formId, fieldId, customFieldId) => {
 
   const form = document.getElementById(formId);
 
   const form = document.getElementById(formId);
 
@@ -67,4 +67,7 @@ const changePage = (page, condition) => {
 
   currentPage = page;
 
   currentPage = page;
 
 }
 
 }
 
 
 
-showPage(2);
 
+showPage(currentPage);
 
+window.showPage = showPage;
 
+window.changePage = changePage;
 
+window.showCustomInput = showCustomInput;

+ 7 - 10
map.js
View File 

@@ -1,12 +1,12 @@
 
 'use strict';
 
 'use strict';
 
+import mapbox, { Map, Popup } from '../node_modules/mapbox-gl/dist/mapbox-gl.js';
 
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
 
+import FreeHand from 'mapbox-gl-draw-freehand-mode';
 
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 
 
 
-mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
 
-const bounds = [
 
-  [-2.460270, 53.370427],
 
-  [-2.062598, 53.552900]
 
-]
 
+mapbox.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
 
 
 
-const map = new mapboxgl.Map({
 
+const map = new Map({
 
   container: 'map',
 
   container: 'map',
 
   style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
 
   style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
 
   center: [-2.884808, 53.495743],
 
   center: [-2.884808, 53.495743],
 
@@ -21,14 +21,12 @@ const Draw = new MapboxDraw({
 
   }
 
   }
 
   });
 
   });
 
 
 
-console.log("turf", turf);
 
-
 
 const AddPopup = (map) => (area) => {
 
 const AddPopup = (map) => (area) => {
 
   let polygon = turf.polygon(area);
 
   let polygon = turf.polygon(area);
 
   let center = turf.centroid(polygon);
 
   let center = turf.centroid(polygon);
 
   console.log(center, polygon)
 
   console.log(center, polygon)
 
 
 
-  return new mapboxgl.Popup({closeOnClick: false})
 
+  return new Popup({closeOnClick: false})
 
     .setLngLat(center.geometry.coordinates)
 
     .setLngLat(center.geometry.coordinates)
 
     .setHTML(`
 
     .setHTML(`
 
       <h3>form</h3>
 
       <h3>form</h3>
 
@@ -39,7 +37,6 @@ const AddPopup = (map) => (area) => {
 
     .addTo(map)
 
     .addTo(map)
 
 }
 
 }
 
 
 
-
 
 map.addControl(Draw, 'top-right');
 
 map.addControl(Draw, 'top-right');
 
 
 
 map.on('load', function() {
 
 map.on('load', function() {

+ 31 - 0
webpack.config.js
View File 

@@ -0,0 +1,31 @@
 
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const path = require('path');
 
+
 
+module.exports = {
 
+  mode: 'development',
 
+  entry: {
 
+    main: [
 
+      './src/app.js',
 
+      './src/map.js'
 
+    ],
 
+  },
 
+  devServer: {
 
+    contentBase: './dist',
 
+    hot: true,
 
+  },
 
+  node: {
 
+    fs: "empty"
 
+  },
 
+  output: {
 
+    filename: 'main.js',
 
+    path: path.resolve(__dirname, 'dist'),
 
+  },
 
+  module: {
 
+    rules: [
 
+      {
 
+        test: /\.css$/i,
 
+        use: ['style-loader', 'css-loader'],
 
+      }
 
+    ]
 
+  }
 
+};