Implement map

This commit is contained in:
hodasemi 2019-01-11 12:31:36 +01:00
parent 5d19e14084
commit 52a0705eff
10 changed files with 1676 additions and 139 deletions

44
aufgabe5/node_modules/mappa-mundi/README.md generated vendored Normal file
View file

@ -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

1447
aufgabe5/node_modules/mappa-mundi/dist/mappa.js generated vendored Normal file

File diff suppressed because it is too large Load diff

117
aufgabe5/node_modules/mappa-mundi/package.json generated vendored Normal file
View file

@ -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"
}

View file

@ -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",

View file

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

View file

@ -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);
});
};

File diff suppressed because one or more lines are too long

11
aufgabe5/public/assets/js/p5.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -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() {
const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
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',
pitch: 50
};
style: 'mapbox://styles/mapbox/traffic-night-v2'
}
const mappa = new Mappa('MapboxGL', key);
let myMap;
//let canvas = ...;
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
// Create a tile map with the options declared
myMap = mappa.tileMap(options);
myMap.overlay(canvas);
}
function draw() {
}

View file

@ -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>