/
map.html
148 lines (121 loc) · 5.61 KB
/
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
---
layout: nil
title: Let's Play With Maps!
place: San Francisco, CA
description: Testing out Mapbox.
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>{% if page.title %}{{ page.title }} | {% endif %}Roundhere.net by Chris Martin</title>
<meta name="author" content="Chris James Martin" />
<link href="http://feeds.feedburner.com/cjmartin" rel="alternate" title="Roundhere.net by Chris Martin" type="application/atom+xml" />
<!-- Bootstrap -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Mapbox -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="/css/screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="/css/syntax.css" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="map-page">
<div id='map' class="header-map"></div>
<div id="page-content">
<div class="container">
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
<p class="meta">18 Aug 2014{% if page.place %} — {{ page.place }}{% endif %}</p>
<div class="post-content text">
<p>
Flickr Web Embed Version 2.0, how does it work?
</p>
<p>
It's easy! Just grab the standard "html" embed code for a flickr photo, it will look like this:
</p>
{% highlight html %}
<a data-flickr-embed="true" href="https://www.flickr.com/photos/cjmartin/15256093683" title="Playa Perro by Chris Martin, on Flickr"><img src="https://farm8.staticflickr.com/7579/15256093683_830dac5243_z.jpg" width="640" height="480" alt="Playa Perro"></a>
{% endhighlight %}
<p>
And add this extra code to the end:
</p>
{% highlight html %}
<script async src="//widgets.flickr.com/embedr/embedr.js" charset="utf-8"></script>
{% endhighlight %}
<p>
The final embed code will look like:
</p>
{% highlight html %}
<a data-flickr-embed="true" href="https://www.flickr.com/photos/cjmartin/15256093683" title="Playa Perro by Chris Martin, on Flickr"><img src="https://farm8.staticflickr.com/7579/15256093683_830dac5243_z.jpg" width="640" height="480" alt="Playa Perro"></a>
<script async src="//widgets.flickr.com/embedr/embedr.js" charset="utf-8"></script>
{% endhighlight %}
<p>
And when entered into a web page, the result is:
</p>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/cjmartin/15256093683" title="Playa Perro by Chris Martin, on Flickr"><img src="https://farm8.staticflickr.com/7579/15256093683_830dac5243_z.jpg" width="640" height="480" alt="Playa Perro"></a><script async src="//widgets.flickr.com/embedr/embedr.js" charset="utf-8"></script>
</div>
</div>
<p>©2014 Chris James Martin</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY2ptYXJ0aW4iLCJhIjoiZTBjMWJmOGJhMDA3YWMwNjQ1MDYwMTc0OWVjOWRiMTUifQ.F7VGA4QNrW6vE7Crxf0ang';
var mapContainer = document.getElementById('map'),
contentContainer = document.getElementById('page-content'),
mapRect,
contentRect,
mapOpen = false;
map = L.mapbox.map('map', 'mapbox.streets', {
scrollWheelZoom: false
}).setView([37.733795, -122.446747], 12);
;(function() {
mapContainer.style.height = window.innerHeight + 'px';
contentContainer.style.marginTop = window.innerHeight + 'px';
mapRect = mapContainer.getBoundingClientRect();
map.invalidateSize();
window.scrollTo(0, window.innerHeight-400);
// Thanks MDN
var throttle = function(type, name, obj) {
var obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle ("scroll", "optimizedScroll");
})();
// handle event
window.addEventListener("optimizedScroll", function() {
if (contentContainer.getBoundingClientRect().top <= 400) {
mapContainer.style.position = 'fixed';
mapContainer.style.top = (mapRect.height-400)*-1 + 'px';
mapOpen = false;
} else {
mapContainer.style.position = 'absolute';
mapContainer.style.top = null;
mapOpen = true;
}
console.log(mapOpen);
});
</script>
</body>
</html>