-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
130 lines (124 loc) · 5.68 KB
/
index.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
<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type='text/css'>
body {
font-family: 'Helvetica';
letter-spacing:-5px;
background:#000;
background-size:100%;
color:#fff;
margin:0;
padding:0;
font-weight:bold;
}
h1, h2, h3, p {
margin:0;
}
em, a {
font-style:normal;
color:#8dbd0c;
}
a {
background: #34d0e7;
color:#000;
text-decoration:none;
}
img {
width:100%;
}
div {
cursor:pointer;
cursor:hand;
position:absolute;
top:0;
left:0;
}
</style><script type='text/javascript'>
window.onload = function() {
var s = document.getElementsByTagName('div'), cur = 0;
if (!s) return;
function go(n) {
cur = n;
var i = 1e3, e = s[n];
for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
e.style.display = 'inline';
e.style.fontSize = i + 'px';
if (e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
e.firstChild.style.display = 'none';
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
while (
e.offsetWidth > window.innerWidth ||
e.offsetHeight > window.innerHeight) {
e.style.fontSize = (i -= 10) + 'px';
if (i < 0) break;
}
e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
document.onclick = function() {
go(++cur % (s.length));
};
document.onkeydown = function(e) {
(e.which === 39) && go(Math.min(s.length - 1, ++cur));
(e.which === 37) && go(Math.max(0, --cur));
};
function parse_hash() {
return Math.max(Math.min(
s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) cur = parse_hash() || cur;
window.onhashchange = function() {
var c = parse_hash();
if (c !== cur) go(c);
};
go(cur);
};
</script></head><body>
<div><em>Maptime</em> Windsor Essex</div>
<div>Intro to <em>OpenStreetMap</em></div>
<div style="color: black"><img src="sf.png">What is OpenStreetMap?</div>
<div style="color: black"><img src="sf.png">OpenStreetMap is the <a href="https://www.google.com/search?q=%22wikipedia+of+maps%22">"Wikipedia of maps"</a></div>
<div style="color: black"><img src="sf.png">Anyone (like YOU!) can edit OSM</div>
<div>Let's get started!</div>
<div>Two ways to edit OSM: web editor <a href="https://wiki.openstreetmap.org/wiki/ID">iD</a> or advanced editor <a href="https://josm.openstreetmap.de/">JOSM</a></div>
<div style="color: black"><img src="sf_cityhall.png">iD: just click edit up in the corner ↖︎</div>
<div style="color: black"><img src="sf_cityhall_editing.png"></div>
<div style="color: black"><img src="sf_layers.png">Look: layers! ⬈</div>
<div style="color: black"><img src="sf_layers_bikemap.png">Cycle Layer</div>
<div style="color: black"><img src="sf_layers_transit.png">Transport Layer</div>
<div style="color: black"><img src="OSMisXML.png"><em>Secret: OSM IS just XML</em></div>
<div>data model: nodes / ways / relations <img src="node-way-relation.png"></div>
<div>OK! But what should I edit first? <em>Suggestions:</em></div>
<div>Trace some buildings</div>
<div>Add some POIs (points of interest)</div>
<div style="color: black"><img src="sf_layers_notes.png">Look: notes!⬊</div>
<div><img src="sf_layers_notes_open.png"></div>
<div>Find ways without names</div>
<div><img src="OSM-QA.png"></div>
<div style="color: black"><img src="OSM-QA.png">map from <em>qa.poole.ch</em></div>
<div><em>Advanced edits</em></div>
<div>Play <a href="http://maproulette.org">MapRoulette</a></div>
<div><img src="maproulette.png"></div>
<div>Do some <a href="http://tasks.hotosm.org/">HOT tasks</a> (Humanitarian OSM Team)</div>
<div><img src="hot.png"></div>
<div><img src="pushpin.png">Get outside!</div>
<div><img src="fieldpapers.png"></div>
<div><img src="field-paper-3.png"></div>
<div style="color: black"><img src="OpenStreetMapGPSTraces.png">Make tracks with your GPS</div>
<div style="color: black"><img src="OpenStreetMapGPSTraces.png">Large imports are <em>deliberately</em> hard to do!</div>
<div>What not to do:</div>
<div>Main rule of thumb: no copying from <span style="color:blue">G</span><span style="color:red">o</span><span style="color:yellow">o</span><span style="color:blue">g</span><span style="color:green">l</span><span style="color:red">e</span> products!</div>
<div style="color: black"><img src="sf_layers_transit.png">And don't map for the renderer</div>
<div>What should you do?</div>
<div style="color: black"><img src="signup.png">Sign up <a href="https://www.openstreetmap.org/user/new">now!</a></div>
<div><em>Be brave!</em></div>
<div>And get mapping!</div>
<div>Where to learn more: <a href="http://learnosm.org">www.learnosm.org</a> <a href="http://wiki.openstreetmap.org">wiki.osm.org</a> <a href="http://help.openstreetmap.org">help.osm.org</a></div>
<div>To learn how to add any kind of thing to the map: <a href="http://wiki.openstreetmap.org/wiki/Map_Features">wiki.osm.org / wiki / Map_Features</a></div>
<div>Am I doing it the <em>right way?</em> Read about <a href="http://wiki.openstreetmap.org/wiki/Good_practice">wiki.osm.org / wiki / Good_practice</a></div>
<div>Presentation made with <a href="http://www.macwright.org/big/">big</a></div>
<div>Presentation remixed from <a href="https://github.com/maptime/osm-101">osm 101 from maptime</a></div>