Skip to content

GitLab

Commit fb0a7677 authored by Florian Barth's avatar Florian Barth
Browse files

add map data

parent ba69da76
Expand all Hide whitespace changes
Inline Side-by-side
templates/paris-project/README.md 0 → 100644
View file @ fb0a7677
# paris-project
Temporary hosting Space for the files of the Paris project.
templates/paris-project/_config.yml 0 → 100644
View file @ fb0a7677
theme: jekyll-theme-minimal
baseurl: /paris-project
templates/paris-project/arrowMap.html 0 → 100644
View file @ fb0a7677
<!DOCTYPE html>
<html>
<head>
<title>Europe</title>
<meta charset="utf-8" />
<!--<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="js/leaflet-providers.js"></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
width: 100%;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.legend {
background-color: “black”;
line-height: 25px;
color: #555;
width: auto;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
.arrow-icon {
width: 14px;
height: 14px;
}
.arrow-icon > div {
margin-left: -1px;
margin-top: -3px;
transform-origin: center center;
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="mapid">
<script src="js/arrowMap.js"></script>
</div>
</body>
</html>
templates/paris-project/europeMap.html 0 → 100644
View file @ fb0a7677
<!DOCTYPE html>
<html>
<head>
<title>Europe</title>
<meta charset="utf-8" />
<!--<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="js/leaflet-providers.js"></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
width: 100%;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.legend {
background-color: “black”;
line-height: 25px;
color: #555;
width: auto;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="mapid">
<script src="js/europeMap.js"></script>
</div>
</body>
</html>
templates/paris-project/geojson/france1700.geojson 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/geojson/hrr1700.geojson 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/geojson/visitsEuropeGeolocated.geojson 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/geojson/visitsParisGeolocated.geojson 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/js/arrowMap.js 0 → 100644
View file @ fb0a7677
//Map for Paris Project
//Victor Westrich
//Prerequisites
//Language Dictionary
var translation = {
"legendLabel": {
"fra": "Voyageurs",
"de": "Reisende"
},
"symbolsLabel": {
"fra": {
"Symbols":"Symboles",
"domestic":"édifices domestiques",
"military":"constructions militaires",
"religious":"édifices religieux",
"infrastructure":"infrastructure",
"public":"édifices publiques",
"miscellaneous":"autres"
},
"de":{
"Symbols":"Symbole",
"domestic":"Wohngebäude",
"military":"Militärische Gebäude",
"religious":"Religöse Gebäude",
"infrastructure":"Infrastruktur",
"public":"Öffentliche Gebäude",
"miscellaneous":"Sonstige"
}
},
"overlayLabel":{
"fra": {
"hre": "<b>Saint-Empire 1700</b>",
"france": "<b>France 1700</b>"
},
"de": {
"hre": "<b>HRR 1700</b>",
"france": "<b>Frankreich 1700</b>"
}
}
}
//Function Definitions
function getArrows(arrLatlngs, color, arrowCount, mapObj) {
if (typeof arrLatlngs === undefined || arrLatlngs == null ||
(!arrLatlngs.length) || arrLatlngs.length < 2)
return [];
if (typeof arrowCount === 'undefined' || arrowCount == null)
arrowCount = 1;
if (typeof color === 'undefined' || color == null)
color = '';
else
color = 'color:' + color;
var result = [];
for (var i = 1; i < arrLatlngs.length; i++) {
var icon = L.divIcon({ className: 'arrow-icon', bgPos: [5, 5], html: '<div style="' + color + ';transform: rotate(' + getAngle(arrLatlngs[i - 1], arrLatlngs[i], -1).toString() + 'deg)">▶</div>' });
for (var c = 1; c <= arrowCount; c++) {
result.push(L.marker(myMidPoint(arrLatlngs[i], arrLatlngs[i - 1], (c / (arrowCount + 1)), mapObj), { icon: icon }));
}
}
return result;
}
function getAngle(latLng1, latlng2, coef) {
var dy = latlng2[0] - latLng1[0];
var dx = Math.cos(Math.PI / 180 * latLng1[0]) * (latlng2[1] - latLng1[1]);
var ang = ((Math.atan2(dy, dx) / Math.PI) * 180 * coef);
return (ang).toFixed(2);
}
function myMidPoint(latlng1, latlng2, per, mapObj) {
if (!mapObj)
throw new Error('map is not defined');
var halfDist, segDist, dist, p1, p2, ratio,
points = [];
p1 = mapObj.project(new L.latLng(latlng1));
p2 = mapObj.project(new L.latLng(latlng2));
halfDist = distanceTo(p1, p2) * per;
if (halfDist === 0)
return mapObj.unproject(p1);
dist = distanceTo(p1, p2);
if (dist > halfDist) {
ratio = (dist - halfDist) / dist;
var res = mapObj.unproject(new Point(p2.x - ratio * (p2.x - p1.x), p2.y - ratio * (p2.y - p1.y)));
return [res.lat, res.lng];
}
}
function distanceTo(p1, p2) {
var x = p2.x - p1.x,
y = p2.y - p1.y;
return Math.sqrt(x * x + y * y);
}
function toPoint(x, y, round) {
if (x instanceof Point) {
return x;
}
if (isArray(x)) {
return new Point(x[0], x[1]);
}
if (x === undefined || x === null) {
return x;
}
if (typeof x === 'object' && 'x' in x && 'y' in x) {
return new Point(x.x, x.y);
}
return new Point(x, y, round);
}
function Point(x, y, round) {
this.x = (round ? Math.round(x) : x);
this.y = (round ? Math.round(y) : y);
}
//OnEachFeature Function
function onEachFeature(feature, layer) {
if (lang === "fra") {
layer.bindPopup(feature.properties.description.fra);
layer.setIcon(setMarker(feature.properties.type, feature.properties.color))
}
else if (lang === "de") {
layer.bindPopup(feature.properties.description.de);
layer.setIcon(setMarker(feature.properties.type, feature.properties.color))
}
}
//Function to Define Overlay Name
function overlayName(type, lang) {
if (lang==="fra") {
if (type==="hrr") {
return "<b>Saint-Empire 1700</b>"
}
else if (type==="france") {
return "<b>France 1700</b>"
}
}
else if (lang==="de"){
if (type==="hrr") {
return "<b>HRR 1700</b>"
}
else if (type==="france") {
return "<b>Frankreich 1700</b>"
}
}
}
//Function to Define Overlay Name
function overlayNames(lang) {
if (lang==="fra") {
var overlayMaps = {
"Sturm":"",
"Knesebeck":"",
"Corfey":"",
"Pitzler":"",
"Neumann":"",
"Harrach":"",
"<b>France 1700</b>":"",
"<b>Saint-Empire 1700</b>":""
};
return overlayMaps
}
else if (lang==="de"){
var overlayMaps = {
"Sturm":"",
"Knesebeck":"",
"Corfey":"",
"Pitzler":"",
"Neumann":"",
"Harrach":"",
"<b>HRR 1700</b>":"",
"<b>Frankreich 1700</b>":""
};
return overlayMaps
}
}
//Function for Language Variable (from URL Parameters)
function language() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var lang = urlParams.get("lang")
if (lang === "de" || lang === "fra") {
return lang
}
else {
return "fra"
}
}
//Set Language Variable
var lang = language()
//Polygon Styles
var franceStyle = {
"color": "#013896",
"weight": 1,
"opacity": 0.65
};
var hrrStyle = {
"color": "#860018",
"weight": 1,
"opacity": 0.65
};
//Map
//Init Map
var map = L.map('mapid').setView([48.856667, 2.351667], 5);
//Traditional
//Wikimedia
var Wikimedia = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
minZoom: 1,
maxZoom: 19
});
// array of coordinates
var mylatlngs = [[
53.67068019347264,
12.480468749999998
],
[
53.409531853086435,
10.634765625
],
[
52.84259457223949,
7.9541015625
],
[
51.97134580885172,
6.9873046875
],
[
51.01375465718821,
6.0205078125
],
[
50.21909462044748,
4.10888671875
],
[
49.49667452747045,
2.96630859375
],
[
48.58932584966975,
0.94482421875
],
[
47.70976154266637,
1.318359375
],
[
45.920587344733654,
2.6806640625
],
[
44.715513732021336,
2.900390625
]
];
var polyline = L.polyline(mylatlngs, { color: 'blue' }).addTo(map);
// draw 5 arrows per line
L.featureGroup(getArrows(mylatlngs, 'blue', 5,map)).addTo(map);
//Minimal
//Carto DB
var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
minZoom: 1,
maxZoom: 19
}).addTo(map);
//Overlay Name
var franceLabel = overlayName("france", lang);
var hreLabel = overlayName("hrr", lang);
//Layer Groups
//Base Maps
var baseMaps = {
"Wikimedia": Wikimedia,
"Carto DB" : CartoDB_Positron
};
//Overlay Maps
var overlayMaps = overlayNames(lang);
//France Polygon
fetch('https://vwestric.github.io/paris-project/france1700.geojson')
.then(response => response.json())
.then(data => {
var france = L.layerGroup([L.geoJSON(data, {style: franceStyle})]);
overlayMaps[franceLabel] = france
});
//France Polygon
fetch('https://vwestric.github.io/paris-project/hrr1700.geojson')
.then(response => response.json())
.then(data => {
var hrr = L.layerGroup([L.geoJSON(data, {style: hrrStyle})]);
overlayMaps[hreLabel] = hrr
//Add layer control to map
L.control.layers(baseMaps, overlayMaps).addTo(map);
});
// //Legend
// //Get Color For Legend
// function getColor(d) {
// return d === "Sturm" ? '#00cc00' :
// d === "Knesebeck" ? '#ff0066' :
// d === "Corfey" ? '#000099' :
// d === "Pitzler" ? '#ffcc00' :
// d === "Neumann" ? '#ff9900' :
// d === "Harrach" ? '#ff0000' :
// 'black';
// }
// //Get Icon For Legend
// function getIcon(d) {
// return d === "édifices domestiques" ? 'https://vwestric.github.io/paris-project/house.svg' :
// d === "constructions militaires" ? 'https://vwestric.github.io/paris-project/military.svg' :
// d === "édifices religieux" ? 'https://vwestric.github.io/paris-project/spiritual.svg' :
// d === "infrastructure" ? 'https://vwestric.github.io/paris-project/bridge.svg' :
// d === "édifices publiques" ? 'https://vwestric.github.io/paris-project/public.svg' :
// d === "autres" ? 'https://vwestric.github.io/paris-project/circle.svg' :
// d === "Wohngebäude" ? 'https://vwestric.github.io/paris-project/house.svg' :
// d === "Militärische Gebäude" ? 'https://vwestric.github.io/paris-project/military.svg' :
// d === "Religöse Gebäude" ? 'https://vwestric.github.io/paris-project/spiritual.svg' :
// d === "Infrastruktur" ? 'https://vwestric.github.io/paris-project/bridge.svg' :
// d === "Öffentliche Gebäude" ? 'https://vwestric.github.io/paris-project/public.svg' :
// d === "Sonstige" ? 'https://vwestric.github.io/paris-project/circle.svg' :
// 'https://vwestric.github.io/paris-project/circle.svg';
// }
// var legend = L.control({position: 'bottomleft'});
// legend.onAdd = function (map) {
// var div = L.DomUtil.create('div', 'info legend'),
// labels = ['<strong>'+ translation["legendLabel"][lang] +'</strong>'],
// symbols = ['<strong>'+ translation["symbolsLabel"][lang]["Symbols"]+'</strong>'],
// travelers = ["Pitzler","Harrach","Corfey","Knesebeck","Sturm","Neumann"];
// icons = [
// translation["symbolsLabel"][lang]["domestic"],
// translation["symbolsLabel"][lang]["military"],
// translation["symbolsLabel"][lang]["religious"],
// translation["symbolsLabel"][lang]["infrastructure"],
// translation["symbolsLabel"][lang]["public"],
// translation["symbolsLabel"][lang]["miscellaneous"],
// ]
// for (var i = 0; i < travelers.length; i++) {
// div.innerHTML +=
// labels.push(
// '<i style="background:' + getColor(travelers[i]) + '""></i> ' + travelers[i]);
// }
// for (var i = 0; i < icons.length; i++) {
// div.innerHTML +=
// symbols.push(
// '<img src="' + getIcon(icons[i]) + '" width=17 height=17> ' + icons[i]);
// }
// div.innerHTML = labels.join('<br>') + '<br>' + symbols.join('<br>');
// return div;
// };
// legend.addTo(map);
//Fetch Data
//In the actual Map, Data would be Fetched via this Request
// fetch('https://vwestric.github.io/paris-project/visitsEuropeGeolocated.geojson')
// .then(response => response.json())
// .then(data => {
// //Layer Group Cities for overlayMaps
// //Sturm Group
// var sturm = L.layerGroup([L.geoJSON(data, {onEachFeature: onEachFeature, filter:function(feature, layer) {
// return feature.properties.visitor=="Sturm";
// }})]);
// //Knesebeck Group
// var knesebeck = L.layerGroup([L.geoJSON(data, {onEachFeature: onEachFeature, filter:function(feature, layer) {
// return feature.properties.visitor=="Knesebeck";
// }})]);
// //Corfey Group
// var corfey = L.layerGroup([L.geoJSON(data, {onEachFeature: onEachFeature, filter:function(feature, layer) {
// return feature.properties.visitor=="Corfey";
// }})]);
// //Pitzler Group
// var pitzler = L.layerGroup([L.geoJSON(data, {onEachFeature: onEachFeature, filter:function(feature, layer) {
// return feature.properties.visitor=="Pitzler";
// }})]);
// //Neumann Group
// var neumann = L.layerGroup([L.geoJSON(data, {onEachFeature: onEachFeature, filter:function(feature, layer) {
// return feature.properties.visitor=="Neumann";
// }})]);
// //Harrach Group
// var harrach = L.layerGroup([L.geoJSON(data, {onEachFeature: onEachFeature, filter:function(feature, layer) {
// return feature.properties.visitor=="Harrach";
// }})]);
// //Add Layer Group Travelogues to overlayMaps
// overlayMaps["Sturm"] = sturm
// overlayMaps["Knesebeck"] = knesebeck
// overlayMaps["Corfey"] = corfey
// overlayMaps["Pitzler"] = pitzler
// overlayMaps["Neumann"] = neumann
// overlayMaps["Harrach"] = harrach
// });
templates/paris-project/js/europeMap.js 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/js/leaflet-providers.js 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/js/parisMap.js 0 → 100644
View file @ fb0a7677
This diff is collapsed.
templates/paris-project/parisMap.html 0 → 100644
View file @ fb0a7677
<!DOCTYPE html>
<html>
<head>
<title>Paris</title>
<meta charset="utf-8" />
<!--<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="js/leaflet-providers.js"></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet/georaster-layer-for-leaflet.browserify.min.js"></script>