Repository navigation
Expand file tree
/
Copy pathviz2.js
More file actions
107 lines (89 loc) · 3.52 KB
/
Copy pathviz2.js
File metadata and controls
107 lines (89 loc) · 3.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function set_values(){
var map_width = window.innerWidth * 0.5
var map_height = window.innerHeight * 0.8
var tweet_left_margin = (map_width + 80) + 'px'
var tweet_top_margin = (-(window.innerHeight * 0.5))+'px'
d3.select("#tweet")
.style("margin-left",tweet_left_margin)
.style("margin-top",tweet_top_margin)
d3.select('#map')
.attr('width',map_width)
.attr('height',map_height)
}
function addPoints(x,map){
if (x.value.hasOwnProperty("tweets")){
x.value.tweets.features.forEach(function(d,i){
var circle = L.circle([d.geometry.coordinate[1],d.geometry.coordinate[0]], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.2,
className: "tweet_location_pre_data"
}).addTo(map);
var circleData = d3.selectAll(".tweet_location_pre_data")
.classed("tweet_location_pre_data",false)
.classed("tweet_location",true)
.attr("id","tweetID_"+d.properties.tweet.split('/')[5])
.attr("media",d.properties.link)
.attr("tweet",d.properties.tweet)
.attr("user",d.properties.user_id);
})
};
}
function build_map(){
/*var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-zr0njcqy/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>'
});
*/
//var map = L.map('map')
//.addLayer(mapboxTiles)
//.setView([40.0274,-105.2519], 10);
var map = L.map('map').setView([40.0274,-105.2519], 10);
var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'dev.'}).addTo(map);
var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png');
//var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver};
var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver};
L.control.layers(baseLayers).addTo(map);
return map;
}
d3.json("data/BoulderFlood_viewer.json", function(collection) {
console.log(["collection:",collection])
// Enventuall: render photos
/* d3.json("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/",function(error, json) {
if (error) return console.warn(error);
data = json;
console.log(data)
});
*/
// build map and creat an svg.
var map = build_map();
// Initialize map & tweet orientation.
set_values();
// For each tweet, add a circle to map.
var dataArray = d3.entries(collection.time_series.interval_data);
dataArray.map(function(d){addPoints(d,map)});
var circles = d3.selectAll(".tweet_location")
// Adjust map & tweet orientation when window is resized.
window.addEventListener('resize', function(event){
set_values();
});
// Mouseover event that produces embeded tweet
circles.on("mouseover",function(event){
d3.select("#tweet").selectAll("*").remove();
twttr.widgets.createTweet(
d3.select(this).attr('tweet').split('/')[5],
document.getElementById('tweet'))
});
/*
var svg = d3.select(map.getPanes().overlayPane).append("svg");
var startDate = collection.time_series.metadata.time_start;
var endDate = collection.time_series.metadata.time_end;
var interval = collection.time_series.metadata.interval_minutes;
*/
/* var tester = L.circle([40.0274,-105.2519], 500, {
color: 'yellow',
fillColor: '#f03',
fillOpacity: 0.2,
className: "practice_point"
}).addTo(map);
*/
});