Implement map
This commit is contained in:
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
44
aufgabe5/node_modules/mappa-mundi/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
|
||||
[Mappa](https://mappa.js.org/)
|
||||
========
|
||||
|
||||
[](https://travis-ci.org/cvalenzuela/Mappa)
|
||||
[](https://codecov.io/github/cvalenzuela/Mappa)
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
Project developed as part of Google Summer of Code 2017
|
||||
1447
aufgabe5/node_modules/mappa-mundi/dist/mappa.js
generated
vendored
Normal file
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
117
aufgabe5/node_modules/mappa-mundi/package.json
generated
vendored
Normal 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"
|
||||
}
|
||||
5
aufgabe5/package-lock.json
generated
5
aufgabe5/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"csvtojson": "^2.0.8",
|
||||
"express": "^4.16.4"
|
||||
"express": "^4.16.4",
|
||||
"mappa-mundi": "0.0.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
8
aufgabe5/public/assets/js/mappa.min.js
vendored
Normal file
8
aufgabe5/public/assets/js/mappa.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11
aufgabe5/public/assets/js/p5.min.js
vendored
Normal file
11
aufgabe5/public/assets/js/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
||||
const options = {
|
||||
// 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() {
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue