Implement map

aufgabe5/node_modules/mappa-mundi/README.md

@@ -0,0 +1,44 @@
+![mappa](website/static/img/logo_small.png)
+
+[Mappa](https://mappa.js.org/)
+========
+
+[![travis build](https://img.shields.io/travis/cvalenzuela/Mappa.svg?style=flat-square)](https://travis-ci.org/cvalenzuela/Mappa)
+[![codecov coverage](https://img.shields.io/codecov/c/github/cvalenzuela/Mappa.svg?style=flat-square)](https://codecov.io/github/cvalenzuela/Mappa)
+![version](https://img.shields.io/npm/v/mappa-mundi.svg?style=flat-square)
+
+Mappa.js is a Javascript library that allows you to overlay a `<canvas>` on top of a tile map. It also provides a set of tools for working with static maps, interactive tile maps and geo-data among other tools useful when building geolocation-based visual representations.
+
+Mappa was originally designed for [p5.js](https://github.com/processing/p5.js), but it can be used with plain Javascript or with other libraries that use the canvas element as the render object.
+
+## Reference
+
+- [Getting Started](https://mappa.js.org/docs/getting-started.html)
+- [API Reference](https://mappa.js.org/docs/api-mappa.html)
+- [Examples](https://mappa.js.org/docs/examples-google-maps.html)
+- [Tutorials](https://mappa.js.org/docs/introduction-to-web-maps.html)
+
+## Usage
+
+Download the [full](dist/mappa.js), [minified](dist/mappa.min.js) or use the online version and add  it to the head section of the document. Mappa will automatically load the required map libraries when necessary.
+
+```html
+<script src="mappa.min.js" type="text/javascript"></script>
+```
+or
+```html
+<script src="https://unpkg.com/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>
+```
+
+If you are using npm:
+```bash
+npm install mappa-mundi
+```
+
+## Licence
+  MIT
+
+## GSOC
+![gsoc](website/static/img/gsoc.png)
+
+Project developed as part of Google Summer of Code 2017

aufgabe5/node_modules/mappa-mundi/package.json

@@ -0,0 +1,117 @@
+{
+  "_from": "mappa-mundi",
+  "_id": "mappa-mundi@0.0.5",
+  "_inBundle": false,
+  "_integrity": "sha512-Tf9xk8kEvl2DKpY1V4/qGyRyRp4XU4c0o3JDdJywBartClIqYbKsIeQHfx88YOVkdV1YqgU4iWCVuDXRanc9ng==",
+  "_location": "/mappa-mundi",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "mappa-mundi",
+    "name": "mappa-mundi",
+    "escapedName": "mappa-mundi",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/mappa-mundi/-/mappa-mundi-0.0.5.tgz",
+  "_shasum": "776a96181c287a91918e56936d138494e6687425",
+  "_spec": "mappa-mundi",
+  "_where": "/home/hodasemi/Documents/Workspace/WME/aufgabe5",
+  "author": {
+    "name": "Cristobal Valenzuela",
+    "email": "cvalenzuela@nyu.edu",
+    "url": "https://github.com/cvalenzuela"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "stage-2"
+    ]
+  },
+  "bugs": {
+    "url": "https://github.com/cvalenzuela/Mappa/issues"
+  },
+  "bundleDependencies": false,
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run cover && npm run check-coverage"
+    },
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "deprecated": false,
+  "description": "An addon to facilitate work between p5 and existing map libraries and APIs.",
+  "devDependencies": {
+    "babel-cli": "6.24.1",
+    "babel-loader": "7.0.0",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-stage-2": "6.24.1",
+    "babel-register": "6.24.1",
+    "chai": "4.0.2",
+    "chai-as-promised": "7.1.1",
+    "codecov": "2.2.0",
+    "commitizen": "2.9.6",
+    "cz-conventional-changelog": "2.0.0",
+    "eslint": "4.15.0",
+    "eslint-config-airbnb-base": "12.1.0",
+    "eslint-plugin-import": "2.8.0",
+    "ghooks": "2.0.0",
+    "html-loader": "0.4.5",
+    "istanbul": "0.4.5",
+    "jsdom": "11.1.0",
+    "jsdom-global": "3.0.2",
+    "json-loader": "0.5.4",
+    "mocha": "3.4.2",
+    "npm-run-all": "4.0.2",
+    "nyc": "10.3.2",
+    "raw-loader": "0.5.1",
+    "rimraf": "2.6.1",
+    "semantic-release": "6.3.6",
+    "uglify-es": "3.0.28",
+    "webpack": "2.6.1",
+    "webpack-dev-server": "2.4.5"
+  },
+  "directories": {
+    "examples": "examples",
+    "dist": "dist",
+    "test": "test"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "homepage": "https://github.com/cvalenzuela/Mappa#readme",
+  "keywords": [
+    "p5.js",
+    "maps"
+  ],
+  "license": "ISC",
+  "main": "dist/mappa.js",
+  "name": "mappa-mundi",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cvalenzuela/Mappa.git"
+  },
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "build:copy2website": "rm website/static/js/mappa.min.js && mv dist/mappa.min.js website/static/js/",
+    "build:main": "webpack --output-filename mappa.js",
+    "build:min": "uglifyjs dist/mappa.js -o dist/mappa.min.js",
+    "check-coverage": "nyc check-coverage --statements 0 --branch 0 --functions 0 --lines 0",
+    "commit": "git-cz",
+    "cover": "nyc npm t",
+    "prebuild": "rimraf dist",
+    "report-coverage": "nyc report --reporter=lcov > coverage.lcov && codecov",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "test": "mocha test/index.test.js --compilers js:babel-register",
+    "watch:test": "npm t -- -w"
+  },
+  "version": "0.0.5"
+}

aufgabe5/package-lock.json

@@ -213,6 +213,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
+    "mappa-mundi": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/mappa-mundi/-/mappa-mundi-0.0.5.tgz",
+      "integrity": "sha512-Tf9xk8kEvl2DKpY1V4/qGyRyRp4XU4c0o3JDdJywBartClIqYbKsIeQHfx88YOVkdV1YqgU4iWCVuDXRanc9ng=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",

aufgabe5/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "csvtojson": "^2.0.8",
-    "express": "^4.16.4"
+    "express": "^4.16.4",
+    "mappa-mundi": "0.0.5"
   }
 }

aufgabe5/public/assets/js/ajax.js

@@ -1,124 +0,0 @@
-let tableData_global; // fetched date
-let range_global = null;
-let filterId_global = null;
-let propertyToShowMap_global = {};
-let properties_global;
-// true/false-map für properties
-
-
-const doFetchCountries = (filterId, range) => {
-    let url_append = "";
-    if (filterId !== null && filterId !== undefined) {
-        url_append += "/" + filterId;
-    }
-    if (range !== null && range !== undefined) {
-        url_append += "/" + range;
-    }
-
-    $.ajax({url: "/items" + url_append}).done((data) => {
-        if (data instanceof Array) tableData_global = data;
-        else {
-            tableData_global = [];
-            tableData_global.push(data);
-        }
-        doTablePrint();
-    });
-};
-
-const onLoadedProperties = (props) => {
-    properties_global = props;
-    properties_global.forEach(function (prop) {
-        propertyToShowMap_global[prop] = true;
-    });
-    // standardmäßig alle properties anzeigen; map aufbauen
-
-    // options im select
-    let html1 = "";
-    properties_global.forEach(function (prop) {
-        html1 += "<option value=\"" + prop + "\">" + prop + "</option>"
-    });
-    $("#prop_selection").html(html1);
-};
-
-const doTablePrint = () => {
-    // thead
-    let html = "";
-    properties_global.forEach((prop) => {
-        if (propertyToShowMap_global[prop]) {
-            html += "<th>" + prop + "</th>";
-        }
-    });
-    $("#table_head").html(html);
-    // tbody
-    html = "";
-    tableData_global.forEach(row => {
-        html += "<tr>";
-        properties_global.forEach((key) => {
-            if (propertyToShowMap_global[key]) {
-                html += "<td>" + row[key] + "</td>";
-            }
-        });
-        html += "</tr>";
-    });
-    $("#table_body").html(html);
-};
-
-const clickListenersInit = () => {
-
-    $("#country_filter_submit").click(() => {
-        // Filterung
-        filterId_global = $("#country_filter_id").val();
-        range_global = $("#country_filter_range").val();
-        if (range_global === "") {
-            doFetchCountries(filterId_global, null);
-        } else {
-            doFetchCountries(filterId_global, range_global);
-        }
-    });
-
-
-    $("#rm_submit").click(() => {     // Löschen
-        $.ajax({
-            url: '/items/' + $("#country_delete_id").val(), type: 'DELETE'
-        }).done(() => {
-            console.log("Item mit ID " + $("#country_delete_id").val() + " gelöscht!");
-        });
-        doFetchCountries(filterId_global, range_global);
-    });
-
-    $("#add_submit").click(() => {
-        $.ajax({
-            url: "/items",
-            type: "POST",
-            contentType: "application/json; charset=utf-8",
-            dataType: "json",
-            data: JSON.stringify({
-                name: $("#country_name").val(),
-                "birth_rate_per_1000": $("#country_birth").val(),
-                "cell_phones_per_100": $("#country_cellphone").val()
-            })
-        }).done(function () {
-            console.log("Item angelegt!");
-        });
-        doFetchCountries(filterId_global, range_global);
-    });
-    $("#show_selected_prop").click(() => {
-        propertyToShowMap_global[$("#prop_selection option:selected").text()] = true;
-        doTablePrint();
-    });
-
-
-    $("#hide_selected_prop").click(() => {
-        propertyToShowMap_global[$("#prop_selection option:selected").text()] = false;
-        doTablePrint();
-    });
-};
-
-
-window.onload = () => {
-    clickListenersInit();
-    $.ajax({url: "/properties"}).done((data) => {
-        onLoadedProperties(data);
-        doFetchCountries(null, null);
-    });
-};

aufgabe5/public/assets/js/webgl.js

@@ -1,4 +1,22 @@
+let tableData_global; // fetched date
+// true/false-map für properties
 
+const doFetchCountries = () => {
+    $.ajax({ url: "/items" }).done((data) => {
+        if (data instanceof Array) tableData_global = data;
+        else {
+            tableData_global = [];
+            tableData_global.push(data);
+        }
+    });
+};
+
+window.onload = () => {
+    doFetchCountries();
+    setup();
+};
+
+/*
 function three() {
     var scene = new THREE.Scene();
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1,
@@ -19,22 +37,31 @@ function three() {
     };
     animate();
 }
+*/
 
-function mappa() {
+let myMap;
+let canvas;
+let mappa;
+
+// Lets put all our map options in a single object
+const options = {
+    lat: 0,
+    lng: 0,
+    zoom: 4,
+    style: 'mapbox://styles/mapbox/traffic-night-v2'
+}
+
+function setup() {
     const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
+    mappa = new Mappa('MapboxGL', key);
+    canvas = createCanvas(window.innerWidth, window.innerHeight);
+    // background(100); let's uncomment this, we don't need it for now
 
-    const options = {
+    // Create a tile map with the options declared
-        lat: 0,
-        lng: 0,
-        zoom: 4,
-        style: 'mapbox://styles/mapbox/traffic-night-v2',
-        pitch: 50
-    };
-
-    const mappa = new Mappa('MapboxGL', key);
-    let myMap;
-    //let canvas = ...;
-
     myMap = mappa.tileMap(options);
     myMap.overlay(canvas);
 }
+
+function draw() {
+
+}

aufgabe5/public/index.html

@@ -13,12 +13,13 @@
 	 rel='stylesheet' type='text/css'>
 	<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 	<link href="assets/css/style.css" type="text/css" rel="stylesheet">
+	<script src="assets/js/mappa.min.js" type="text/javascript"></script>
+	<script src="assets/js/p5.min.js" type="text/javascript"></script>
 </head>
 
 <body>
 
 	<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
-	<script type="text/javascript" src="assets/js/ajax.js"></script>
 	<script type="text/javascript" src="assets/js/webgl.js"></script>
 
 </body>