This repository has been archived by the owner on Nov 21, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
116 lines (85 loc) · 3.4 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
<html>
<head>
<title>MapBox Locator</title>
<link href='https://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/icons/style.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/mapbox.share.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>MapBox Locator</h1>
</div>
<div id="content">
<div id="controls">
<div id="basic-controls" class="pad">
<a href="#" id="add-marker" class="icon-marker button blue block" data-nofollow>Add marker</a>
<a href="#" id="show-all" class="button blue block show-all" data-nofollow>Center map</a>
<div id="map-size" class="box">
<h3>SIZE <span>(px)</h3>
<input type="number" id="map-width" placeholder="width" class="change-size" />
<span class="x">X</span>
<input type="number" id="map-height" placeholder="height" class="change-size" />
</div>
</div>
<div id="adding-marker" class="hide">
<h2 class="title">Place marker</h2>
<div class="pad">
<p class="info">Click and hold to place a marker on the map.</p>
<a href="#" id="cancel-marker" class="button block" data-nofollow>Cancel</a>
</div>
</div>
<div id="edit-marker" class="clearfix hide">
<h2 class="title">Edit marker</h2>
<div class="pad clearfix">
<fieldset class="clearfix">
<label for="color" class="left">Color</label>
<select name="color" id="marker-color">
<option value="000000" selected>Black</option>
<option value="3178b5">Blue</option>
<option value="dc463f">Red</option>
<option value="5ea154">Green</option>
<option value="f8b44e">Orange</option>
</select>
</fieldset>
<fieldset class="clearfix">
<label for="icon" class="left">Icon</label>
<select name="icon" id="marker-icon">
<!-- Markers load here -->
</select>
</fieldset>
<fieldset>
<label for="marker-content">Tooltip Content</label>
<textarea name="marker-content" id="" rows="3" placeholder="(HTML is allowed)"></textarea>
</fieldset>
<a href="#" id="delete-marker" class="button" data-nofollow>Delete</a>
<a href="#" id="save-marker" class="button blue" data-nofollow>Save</a>
</div>
</div>
</div>
<div id="error" class="hide"></div>
<!-- Sharing Options -->
<div id="save" class="clearfix">
<h3 class="title">Share</h3>
<div class="buttons clearfix">
<a href="#" id="generate-image" class="button icon-download" data-nofollow>Image</a>
<a href="#" id="generate-embed" class="button icon-embed" data-nofollow>Embed</a>
</div>
<div id="share-code" class="hide">
<p>Copy and paste the following HTML:</p>
<textarea id="generate-result"></textarea>
</div>
</div>
</div>
<div id="map-wrapper" class="no-box-size">
<div id="map" class="map"><!-- Load MapBox Map--></div>
</div>
<!-- JS Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/third-party/underscore-min.js"></script>
<script src="js/third-party/backbone-min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<script src="js/locator.js"></script>
</body>
</html>