Skip to content
Snippets Groups Projects
Commit f385e308 authored by Christopher Pietsch's avatar Christopher Pietsch
Browse files

map projection

parent effe24a0
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
css/style.css
+ 5
− 0
View file @ f385e308
...@@ -50,6 +50,10 @@ body { ...@@ -50,6 +50,10 @@ body {
#map { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 1;} #map { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 1;}
#map.hide {
opacity: 0;
}
canvas { canvas {
position: absolute; position: absolute;
...@@ -342,6 +346,7 @@ svg { ...@@ -342,6 +346,7 @@ svg {
.timeline { .timeline {
z-index: 200; z-index: 200;
color: #000; color: #000;
position: absolute;
} }
.timeline * { .timeline * {
......
index.html
+ 9
− 6
View file @ f385e308
...@@ -36,7 +36,10 @@ ...@@ -36,7 +36,10 @@
<script src="js/modernizr-custom.js"></script> <script src="js/modernizr-custom.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" /> <link
href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
rel="stylesheet"
/>
<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
...@@ -188,9 +191,9 @@ cpietsch@gmail.com ...@@ -188,9 +191,9 @@ cpietsch@gmail.com
<span v-html="marked(info)"></span> <span v-html="marked(info)"></span>
<div class="credit"> <div class="credit">
Powered by Powered by
<a href="https://vikusviewer.fh-potsdam.de/" target="_blank" <a href="https://vikusviewer.fh-potsdam.de/" target="_blank">
>VIKUS Viewer</a VIKUS Viewer
> </a>
</div> </div>
</div> </div>
</div> </div>
...@@ -204,7 +207,7 @@ cpietsch@gmail.com ...@@ -204,7 +207,7 @@ cpietsch@gmail.com
</div> </div>
</div> </div>
<div id="map"></div> <div id="map" class="hide"></div>
<script src="js/sidebars.js"></script> <script src="js/sidebars.js"></script>
<script src="js/viz.js"></script> <script src="js/viz.js"></script>
......
js/canvas.js
+ 573
− 562
View file @ f385e308
This diff is collapsed.
js/mapbox.js
+ 161
− 93
View file @ f385e308
mapboxgl.accessToken = ''; mapboxgl.accessToken =
'pk.eyJ1IjoidGVjaG5vbG9naWVzdGlmdHVuZyIsImEiOiJja2EyODNzenQwMHB0M2xsazd1dXZtOW5tIn0.GxXlHFEWUj_zfgnPAjpX3g'
function Mapbox() { function Mapbox() {
var state = { var state = {
open: false open: false,
} }
var map; var map
var initialZoom; var initialZoom
var initialCenter; var initialCenter
var projected
var validData
var bounds
function mapbox() {} function mapbox() {}
mapbox.init = function (data) { mapbox.init = function (data) {
data.forEach((d) => {
data.forEach(d => {
d.lat = Number(d._Lat) d.lat = Number(d._Lat)
d.lng = Number(d._Lon) d.lng = Number(d._Lon)
}) })
var validData = data.filter(d => !isNaN(d.lat) && !isNaN(d.lng)) validData = data.filter((d) => !isNaN(d.lat) && !isNaN(d.lng))
var extent = [ var extent = [
d3.extent(validData, function(d){ return d.lng; }) d3.extent(validData, function (d) {
,d3.extent(validData, function(d){ return d.lat; }) return d.lng
}),
d3.extent(validData, function (d) {
return d.lat
}),
] ]
var bounds = [[extent[0][0], extent[1][0]], [extent[0][1], extent[1][1]]] bounds = [
[extent[0][0], extent[1][0]],
[extent[0][1], extent[1][1]],
]
console.log(bounds, bounds) console.log(bounds, bounds)
map = new mapboxgl.Map({ map = new mapboxgl.Map({
...@@ -37,47 +44,109 @@ function Mapbox() { ...@@ -37,47 +44,109 @@ function Mapbox() {
//fitBoundsOptions: { padding: 200 }, //fitBoundsOptions: { padding: 200 },
// causes pan & zoom handlers not to be applied, similar to // causes pan & zoom handlers not to be applied, similar to
// .dragging.disable() and other handler .disable() funtions in Leaflet. // .dragging.disable() and other handler .disable() funtions in Leaflet.
interactive: false interactive: false,
}); })
window.mapbox = map window.mapbox = map
initialZoom = map.getZoom()
initialCenter = map.getCenter()
map.on('load', function () { map.on('load', function () {
console.log('load')
mapbox.project()
})
// map.on('resize', function () {
// mapbox.project()
// })
}
var projected = validData.map(d => { mapbox.project = function () {
console.log('projekt')
map.fitBounds(bounds)
var projected = validData.map((d) => {
var point = map.project([d.lng, d.lat]) var point = map.project([d.lng, d.lat])
return { return {
id: d.id, id: d.id,
// x: point.x - 50 - canvas.imgPadding(),
// y: point.y - canvas.imgPadding() - canvas.height(),
x: point.x, x: point.x,
y: point.y- canvas.height() y: point.y,
} }
}) })
canvas.addMapData(projected) initialZoom = map.getZoom()
canvas.projectMap() initialCenter = map.getCenter()
canvas.wakeup() initialCenterPos = map.project(initialCenter)
var aspect = canvas.width() / canvas.height()
// var magic = aspect ? 18.4 : 17.85
var magic = 17.75
}) console.log(aspect)
zoomScale.range([initialZoom, magic])
canvas.setMapData(projected)
// canvas.projectMap()
// canvas.wakeup()
} }
mapbox.zoom = function(center, scale, translate, scale1){ var zoomScale = d3.scale.log().domain([1, 80])
mapbox.zoom = function (center, mousePos, scale, translate, imageSize) {
if (!map) return if (!map) return
var height = canvas.height() // console.log('zoom')
console.log(scale, translate, scale1)
//map.setZoom(initialZoom + scale) // console.log(map.getZoom(), scale)
// console.log(Math.log(scale))
if (initialCenter) {
var x0 = translate[0] + (canvas.width() * scale - canvas.width()) / 2
var y0 = translate[1] + (canvas.height() * scale - canvas.height()) / 2
// console.log(translate, y0)
// console.log(canvas.width() / 2, canvas.height() / 2)
var x = canvas.width() / 2 + x0
var y = canvas.height() / 2 + y0
var zoom = zoomScale(scale)
var y = (height + translate[1]) * -1 map.setZoom(zoom)
var x = translate[0] map.transform.setLocationAtPoint(initialCenter, new mapboxgl.Point(x, y))
}
if (center) {
// var centerCoord = { lng: center.lng, lat: center.lat }
// var centerPos = [center.x, center.y]
// var projected = map.project(centerCoord)
// // console.log(centerCoord, center, projected, mousePos, centerPos)
// var x0 = translate[0] + (canvas.width() * scale - canvas.width()) / 2
// var y0 = translate[1] + (canvas.height() * scale - canvas.height()) / 2
// console.log(translate, y0)
// var x = center.x + x0
// var y = center.y + canvas.height() + y0
// var zoom = zoomScale(scale)
// // console.log('zooom', zoom, scale)
// //map.panTo(initialCenter, { offset: translate, animate: false })
// map.transform.setLocationAtPoint(centerCoord, new mapboxgl.Point(x, y))
// map.setZoom(zoom)
// ---
// console.log(map.getCenter())
//initialCenter = centerCoord
//map.setCenter(c)
//console.log(c)
// map.flyTo({
// around: c,
// zoom: initialZoom - (1 - Math.sqrt(scale)),
// duration: 0,
// })
}
// } else {
// map.panTo(initialCenter, { offset: scaledTranslate, animate: false })
// console.log(map.getCenter())
// console.log(translate)
// //initialCenter = map.getCenter()
// }
map.panTo(initialCenter, {offset: translate, animate:false})
map.setZoom(initialZoom - (1-Math.sqrt(scale)))
// if(center){ // if(center){
// var c = [center.lng, center.lat] // var c = [center.lng, center.lat]
// //map.setCenter(c) // //map.setCenter(c)
...@@ -88,8 +157,7 @@ function Mapbox() { ...@@ -88,8 +157,7 @@ function Mapbox() {
// duration: 0 // duration: 0
// }) // })
// } // }
} }
return mapbox; return mapbox
} }
js/utils.js
+ 176
− 117
View file @ f385e308
...@@ -3,132 +3,192 @@ ...@@ -3,132 +3,192 @@
// @chrispiecom // @chrispiecom
// 2015-2018 // 2015-2018
window.utils = {}
window.utils = {};
utils.isMobile = function () { utils.isMobile = function () {
return (window.innerWidth return (
|| document.documentElement.clientWidth (window.innerWidth ||
|| document.body.clientWidth) < 500; document.documentElement.clientWidth ||
document.body.clientWidth) < 500
)
} }
utils.isSafari = function () { utils.isSafari = function () {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
} }
utils.welcome = function () { utils.welcome = function () {
// who needs this fancy console styles // who needs this fancy console styles
if (window.console) if (window.console) {
{ window.console.log(
window.console.log('\n _ ________ ____ ______ \n| | / / _/ //_/ / / / __/ \n| |/ // // ,< / /_/ /\ \ \n|___/___/_/|_|\____/___/_______ \n| | / / _/ __/ | /| / / __/ _ \ \n| |/ // // _/ | |/ |/ / _// , _/ \n|___/___/___/ |__/|__/___/_/|_| \n') '\n _ ________ ____ ______ \n| | / / _/ //_/ / / / __/ \n| |/ // // ,< / /_/ / \n|___/___/_/|_|____/___/_______ \n| | / / _/ __/ | /| / / __/ _ \n| |/ // // _/ | |/ |/ / _// , _/ \n|___/___/___/ |__/|__/___/_/|_| \n',
)
} }
} }
utils.initConfig = function (config) { utils.initConfig = function (config) {
// load infosidebar info.md // load infosidebar info.md
d3.text(config.loader.info, function(text){ if(text) infoVue.info = text }) d3.text(config.loader.info, function (text) {
if (text) infoVue.info = text
})
// set window title // set window title
document.title = config.project.name document.title = config.project.name
// puh thats kind of nasty, lets call it oldschool... // puh thats kind of nasty, lets call it oldschool...
var length = document.styleSheets[0].cssRules.length var length = document.styleSheets[0].cssRules.length
document.styleSheets[0].insertRule('.close::before { background-color: ' + config.style.fontColorActive + '}', length); document.styleSheets[0].insertRule(
document.styleSheets[0].insertRule('.close::after { background-color: ' + config.style.fontColorActive + '}', length); '.close::before { background-color: ' + config.style.fontColorActive + '}',
document.styleSheets[0].insertRule('.tag.active { color: ' + config.style.fontColorActive + '}', length); length,
document.styleSheets[0].insertRule('.tag.active { background: ' + config.style.fontBackground + '}', length); )
document.styleSheets[0].insertRule('.timeline .entry { background: ' + config.style.timelineBackground + '}', length); document.styleSheets[0].insertRule(
document.styleSheets[0].insertRule('.timeline .entry { color: ' + config.style.timelineFontColor + '}', length); '.close::after { background-color: ' + config.style.fontColorActive + '}',
document.styleSheets[0].insertRule('.timeline .year { color: ' + config.style.fontColor + '}', length); length,
document.styleSheets[0].insertRule('.tagcloud .tag { text-shadow: ' + config.style.textShadow + '}', length); )
document.styleSheets[0].insertRule('.infobar .outer { background: ' + config.style.infoBackground + '}', length); document.styleSheets[0].insertRule(
document.styleSheets[0].insertRule('.infobar .outer { color: ' + config.style.infoFontColor + '}', length); '.tag.active { color: ' + config.style.fontColorActive + '}',
document.styleSheets[0].insertRule('.infobar a { color: ' + config.style.infoFontColor + '}', length); length,
document.styleSheets[0].insertRule('.infobar .infobutton path { stroke: ' + config.style.infoFontColor + '}', length); )
document.styleSheets[0].insertRule('.infobar.sneak .infobutton path { stroke: ' + config.style.fontColor + '}', length); document.styleSheets[0].insertRule(
document.styleSheets[0].insertRule('.sidebar .outer { background: ' + config.style.detailBackground + '}', length); '.tag.active { background: ' + config.style.fontBackground + '}',
document.styleSheets[0].insertRule('.searchbar input { background: ' + config.style.searchbarBackground + '}', length); length,
)
document.styleSheets[0].insertRule(
'.timeline .entry { background: ' + config.style.timelineBackground + '}',
length,
)
document.styleSheets[0].insertRule(
'.timeline .entry { color: ' + config.style.timelineFontColor + '}',
length,
)
document.styleSheets[0].insertRule(
'.timeline .year { color: ' + config.style.fontColor + '}',
length,
)
document.styleSheets[0].insertRule(
'.tagcloud .tag { text-shadow: ' + config.style.textShadow + '}',
length,
)
document.styleSheets[0].insertRule(
'.infobar .outer { background: ' + config.style.infoBackground + '}',
length,
)
document.styleSheets[0].insertRule(
'.infobar .outer { color: ' + config.style.infoFontColor + '}',
length,
)
document.styleSheets[0].insertRule(
'.infobar a { color: ' + config.style.infoFontColor + '}',
length,
)
document.styleSheets[0].insertRule(
'.infobar .infobutton path { stroke: ' + config.style.infoFontColor + '}',
length,
)
document.styleSheets[0].insertRule(
'.infobar.sneak .infobutton path { stroke: ' + config.style.fontColor + '}',
length,
)
document.styleSheets[0].insertRule(
'.sidebar .outer { background: ' + config.style.detailBackground + '}',
length,
)
document.styleSheets[0].insertRule(
'.searchbar input { background: ' + config.style.searchbarBackground + '}',
length,
)
document.styleSheets[0].insertRule(
'body { background: ' + config.style.canvasBackground + '}',
length,
)
} }
// exhibition installations, will reinitialize the vis after x seconds // exhibition installations, will reinitialize the vis after x seconds
utils.ping = function () { utils.ping = function () {
var time = +new Date(); var time = +new Date()
var timeout = 2 * 60 * 1000; var timeout = 2 * 60 * 1000
var interval = setInterval(function () { var interval = setInterval(function () {
if (new Date() - time > timeout) { if (new Date() - time > timeout) {
//location.reload(); //location.reload();
} }
}, 1000); }, 1000)
return function () { return function () {
time = +new Date(); time = +new Date()
} }
} }
utils.printkeywords = function (data) { utils.printkeywords = function (data) {
var keywords = {}; var keywords = {}
data.forEach(function (d) { data.forEach(function (d) {
d.keywords.forEach(function (d) { d.keywords.forEach(function (d) {
keywords[d] = 0; keywords[d] = 0
}) })
}) })
d3.keys(keywords).forEach(function (d) { d3.keys(keywords).forEach(function (d) {
console.log(d); console.log(d)
}) })
} }
utils.fullscreen = function () { utils.fullscreen = function () {
document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen; document.fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.documentElement.webkitRequestFullScreen
function requestFullscreen(element) { function requestFullscreen(element) {
if (element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen()
} else if (element.mozRequestFullScreen) { } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); element.mozRequestFullScreen()
} else if (element.webkitRequestFullScreen) { } else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
} }
} }
if (document.fullscreenEnabled) { if (document.fullscreenEnabled) {
requestFullscreen(document.documentElement); requestFullscreen(document.documentElement)
} }
} }
utils.clean = function (data) { utils.clean = function (data) {
data.forEach(function (d, i) { data.forEach(function (d, i) {
d.search = Object.keys(d).map(function(e) { return d[e] }).join(' - ').toUpperCase() d.search = Object.keys(d)
d.i = i; .map(function (e) {
return d[e]
})
.join(' - ')
.toUpperCase()
d.i = i
d.keywords = _(d.keywords) d.keywords = _(d.keywords)
.chain() .chain()
.split(",") .split(',')
.map(_.trim) .map(_.trim)
.uniq() .uniq()
.filter(function(d) { return d !== "" }) .filter(function (d) {
return d !== ''
})
.value() .value()
// for proper sorting // for proper sorting
d.keywords = d.keywords.map(function (d) { d.keywords = d.keywords.map(function (d) {
return d.charAt(0).toUpperCase() + d.slice(1); return d.charAt(0).toUpperCase() + d.slice(1)
}); })
d._year = d.year d._year = d.year
d._keywords = d.keywords d._keywords = d.keywords
// internal vars // internal vars
d.alpha = 1; d.alpha = 1
d.active = 1; d.active = 1
d.loaded = false; d.loaded = false
d.type = "image"; d.type = 'image'
d.page = 0 d.page = 0
d.scaleFactor = 0.9 d.scaleFactor = 0.9
d.x = i; d.x = i
d.y = i; d.y = i
d.order = i; d.order = i
}); })
} }
utils.simulateLargeDatasets = function (data) { utils.simulateLargeDatasets = function (data) {
...@@ -136,4 +196,3 @@ utils.simulateLargeDatasets = function(data){ ...@@ -136,4 +196,3 @@ utils.simulateLargeDatasets = function(data){
Array.prototype.push.apply(data, _.clone(data, true)) Array.prototype.push.apply(data, _.clone(data, true))
Array.prototype.push.apply(data, _.clone(data, true).slice(0, 1036)) Array.prototype.push.apply(data, _.clone(data, true).slice(0, 1036))
} }
js/viz.js
+ 121
− 128
View file @ f385e308
...@@ -26,46 +26,41 @@ ...@@ -26,46 +26,41 @@
// '---" '---' | | ,' \ \ ; | | ,' | |.' // '---" '---' | | ,' \ \ ; | | ,' | |.'
// `----' '---" `----' `---' // `----' '---" `----' `---'
// christopher pietsch // christopher pietsch
// @chrispiecom // @chrispiecom
// 2015-2018 // 2015-2018
utils.welcome()
utils.welcome(); var data
var tags
var data; var canvas
var tags; var search
var canvas; var ping
var search; var map
var ping;
var map;
if (Modernizr.webgl && !utils.isMobile()) { if (Modernizr.webgl && !utils.isMobile()) {
init(); init()
} }
function init() { function init() {
map = Mapbox()
map = Mapbox(); tags = Tags()
tags = Tags(); canvas = Canvas()
canvas = Canvas(); search = Search()
search = Search();
timeline = Timeline() timeline = Timeline()
ping = utils.ping(); ping = utils.ping()
d3.json("data/config.json", function (config) {
d3.json('data/config.json', function (config) {
utils.initConfig(config) utils.initConfig(config)
Loader(config.loader.timeline).finished(function (timeline) { Loader(config.loader.timeline).finished(function (timeline) {
Loader(config.loader.items).finished(function (data) { Loader(config.loader.items).finished(function (data) {
utils.clean(data)
utils.clean(data); tags.init(data, config)
search.init()
tags.init(data, config); canvas.init(data, timeline, config)
search.init();
canvas.init(data, timeline, config);
map.init(data) map.init(data)
window.data = data window.data = data
...@@ -73,7 +68,7 @@ function init() { ...@@ -73,7 +68,7 @@ function init() {
if (config.loader.tsne) { if (config.loader.tsne) {
d3.csv(config.loader.tsne, function (tsne) { d3.csv(config.loader.tsne, function (tsne) {
console.log(tsne) console.log(tsne)
d3.select(".navi").classed("hide", false) d3.select('.navi').classed('hide', false)
canvas.addTsneData(tsne) canvas.addTsneData(tsne)
}) })
} }
...@@ -92,50 +87,48 @@ function init() { ...@@ -92,50 +87,48 @@ function init() {
canvas.wakeup() canvas.wakeup()
}) })
.load(config.loader.textures.medium.url) .load(config.loader.textures.medium.url)
}); })
}); })
}); })
d3.select(window) d3.select(window)
.on("resize", function () { .on('resize', function () {
if (canvas !== undefined && tags !== undefined) { if (canvas !== undefined && tags !== undefined) {
clearTimeout(window.resizedFinished); clearTimeout(window.resizedFinished)
window.resizedFinished = setTimeout(function () { window.resizedFinished = setTimeout(function () {
canvas.resize(); canvas.resize()
tags.resize(); tags.resize()
}, 250); }, 250)
} }
}) })
.on("keydown", function (e) { .on('keydown', function (e) {
if (d3.event.keyCode != 27) return if (d3.event.keyCode != 27) return
search.reset(); search.reset()
tags.reset(); tags.reset()
canvas.split(); canvas.split()
}) })
d3.select(".slidebutton") d3.select('.slidebutton').on('click', function () {
.on("click", function () { var s = !d3.select('.sidebar').classed('sneak')
var s = !d3.select(".sidebar").classed("sneak"); d3.select('.sidebar').classed('sneak', s)
d3.select(".sidebar").classed("sneak", s);
}) })
d3.select(".infobutton") d3.select('.infobutton').on('click', function () {
.on("click", function () { var s = !d3.select('.infobar').classed('sneak')
var s = !d3.select(".infobar").classed("sneak"); d3.select('.infobar').classed('sneak', s)
d3.select(".infobar").classed("sneak", s)
}) })
d3.selectAll(".navi .button") d3.selectAll('.navi .button').on('click', function () {
.on("click", function () { var that = this
var that = this; var mode = d3.select(this).attr('data')
var mode = d3.select(this).attr("data"); canvas.setMode(mode)
canvas.setMode(mode); timeline.setDisabled(mode != 'time')
timeline.setDisabled(mode != "time"); d3.select('#map').classed('hide', mode != 'map')
d3.selectAll(".navi .button").classed("active", function () { d3.selectAll('.navi .button').classed('active', function () {
return that === this return that === this
}); })
}) })
} }
d3.select(".browserInfo").classed("show", utils.isMobile()); d3.select('.browserInfo').classed('show', utils.isMobile())
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment