forked from CartoDB/training
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathworkshops_map.html
121 lines (113 loc) · 4.51 KB
/
workshops_map.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<base target="_parent" />
<head>
<title>CartoDB Trainings Locations</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script id='infowindow_template' type="infowindow/html">
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h4>name</h4>
<p>{{content.data.name}}</p>
<h4>place</h4>
<p>{{content.data.place}}</p>
<h4>date</h4>
<p>{{content.data.date}}</p>
{{#content.data.url}}
<h4>Workshop Information</h4>
<p><a href="{{url}}">{{content.data.description}}</a></p>
{{/content.data.url}}
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<style type="robot/text" id='robot'>
,--. ,--.
((O ))--((O ))
,'_`--'____`--'_`.
_: ____________ :_
| | ||::::::::::|| | |
| | ||::::::::::|| | |
| | ||::::::::::|| | |
|_| |/__________\| |_|
|________________|
__..-' `-..__
.-| : .----------------. : |-.
,\ || | |\______________/| | || /.
/`.\:| | || __ __ __ || | |;/,'\
:`-._\;.| || '--''--''--' || |,:/_.-':
| : | || .----------. || | : |
| | | || '----SSt---' || | | |
| | | || _ _ _ || | | |
:,--.; | || (_) (_) (_) || | :,--.;
(`-'|) | ||______________|| | (|`-')
`--' | |/______________\| | `--'
|____________________|
`.________________,'
(_______)(_______)
(_______)(_______)
(_______)(_______)
(_______)(_______)
| || |
'--------''--------'
</style>
<script src="http://libs.cartodb.com/cartodb.js/v3/3.14/cartodb.js"></script>
<script>
function main() {
// create map
var map = L.map('map', {
center: [20, -75],
zoom: 2,
scrollWheelZoom: false
});
var layerSource = {
user_name: 'eschbacher',
type: 'cartodb',
sublayers: [{
sql: 'SELECT ST_MakeLine(the_geom_webmercator ORDER BY date ASC) the_geom_webmercator FROM workshops',
cartocss: '#workshops{ line-color: #FFCC00; line-width: 1.5; line-opacity: 0.7; line-clip: false; line-smooth: 3; line-dasharray: 5,3,2;}'
},
{
sql: "SELECT the_geom_webmercator, name, description, place, url, to_char(date,'Mon DD, YYYY') AS date FROM workshops",
cartocss: '#workshops{ marker-file: url(http://com.cartodb.users-assets.production.s3.amazonaws.com/pin-maps/pins91.svg); marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 20; marker-fill: #5CA2D1; marker-allow-overlap: true; marker-comp-op: screen; }',
interactivity: 'name, description, place, date, url'
}]
}
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(map);
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer) {
var visitLayer = layer.getSubLayer(1);
visitLayer.setInteraction(true);
cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(1), ['name', 'description', 'place', 'date', 'url'], {
infowindowTemplate: $('#infowindow_template').text(),
templateType: 'mustache',
triggerEvent: 'featureClick',
cursorInteraction: true
});
}).error(function() {
console.log($("#robot").text());
});
}
window.onload = main;
</script>
</body>
</html>