forked from datadesk/web-map-maker
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
155 lines (112 loc) · 7.41 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<title>Web map maker</title>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.ledevoir.com/favicon.ico">
<link rel="stylesheet" type="text/css" href="http://d1qqc1e9kvmdh8.cloudfront.net/bootstrap/2.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://d1qqc1e9kvmdh8.cloudfront.net/css/ngux-tophat-0.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="http://d1qqc1e9kvmdh8.cloudfront.net/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="http://d1qqc1e9kvmdh8.cloudfront.net/css/ngux-tophat-responsive-0.4.5.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.1/leaflet-geocoder-mapzen.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cookbook.latimes.com/js/leaflet-1.0.0/leaflet.css">
<link rel="stylesheet" href="http://cookbook.latimes.com/css/jquery-ui-1.12.0/jquery-ui-1.12.0.css">
<link rel="stylesheet" href="http://cookbook.latimes.com/css/bing-geocodify-0.2.3/bing-geocodifier.css">
<link rel="stylesheet" href="styles/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cookbook.latimes.com/js/bing-geocodify-0.2.3/bing-geocodifier.js"></script>
<script type="text/javascript" src="http://d1qqc1e9kvmdh8.cloudfront.net/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://d1qqc1e9kvmdh8.cloudfront.net/js/underscore-1.8.3-min.js"></script>
<script type="text/javascript" src="http://cookbook.latimes.com/js/leaflet-1.0.0/leaflet.js"></script>
<script type="text/javascript" src="js/tangram-0.14.2.debug.js"></script>
<script type="text/javascript" src="http://cookbook.latimes.com/js/html2canvas-0.5.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cookbook.latimes.com/js/leaflet-bing-layer-0.0.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.1/leaflet-geocoder-mapzen.js"></script>
<!-- your config file -->
<script type="text/javascript" src="js/config.js"></script>
</head>
<body>
<!-- CONTENT GOES HERE -->
<div class="container" id="container">
<h1>Web Map Maker<a id="mapmakerVersion" href="https://github.com/datadesk/web-map-maker/releases/tag/2.1.3">v2.1.3</a></h1>
<div id="popupContainer">
<input id="popupText" type="text" placeholder="Pointer text" maxlength="40"><div id="geocodifier"></div>
</div>
<div id="web_blank">
<div id="map_options">
<div class="map_option">
<div id="geocoder"></div>
</div>
<div class="map_option">
<form class="standalone-dropdown">
<fieldset>
<select onchange="sizeChange(this)" id="preset_sizes">
<option value="custom">Custom size</option>
<option value="video">Video</option>
<option value="web_large" selected>Web large</option>
<option value="web_small">Web small</option>
<option value="twitter">Twitter</option>
<option value="col1">1 column</option>
<option value="col1_2">1 column 1/2</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
<option value="col4">4 column</option>
</select>
</fieldset>
</form>
</div>
<div class="map_option">
<input type="file" id="geo_files" name="files[]" accept=".geojson,.json" multiple>
<label for="geo_files" class="btn gray">Upload GeoJSON</label>
<a id="zoom_to_geojson">Zoom to file</a>
</div>
<div class="map_option">
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Layers</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes"></div>
</div>
</form>
</div>
<div class="map_option">
<button class='btn gray' onclick='addCustomLabel("small");'>+small label</button>
<button class='btn gray' onclick='addCustomLabel("medium");'>+medium label</button>
</div>
<div class="map_option">
<button class='btn gray' onclick='downloadIMG();' id='download_img'>Map loading...<img src="images/preloader.gif" alt="Preloader" class="map_loader" /></button>
<button class='btn' onclick='downloadVector();' id='download_vector'>Download vector</button>
</div>
<p class='map-info'>Zoom: <span id="zoom_level"></span> <i class="fa fa-unlock-alt" id="zoom_lock" onclick="zoomFreeze();" aria-hidden="true"></i> <span id="warning_msg"></span></p>
<input type="range" step="0.001" id="zoom-slider" class="graphic-slider" min="2" max="19" value="10">
</div>
<div id="map_area">
<div id="grid_holder">
<div id="map_ruler">
<div id="col_ruler"></div>
<div id="pixel_ruler"></div>
</div>
</div>
<div id="map_holder">
<div id="map"></div>
<div id="map_size"></div>
</div>
</div>
</div>
<p class="description">This tool uses Microsoft’s geocoder to approximate an address’s location. It also uses data provided by OpenStreetMap (which you can <a href="http://www.openstreetmap.org/" target="_blank">edit here</a>) and Nextzen. Some supervisor, congressional and other GeoJSON boundaries can be found at <a href="http://boundaries.latimes.com/" target="_blank">boundaries.latimes.com</a>. You can draw your own file at <a href="http://geojson.io/" target="_blank">geojson.io</a>. Questions? Contact <a href="mailto:[email protected]">[email protected]</a> or <a href="https://github.com/datadesk/web-map-maker/issues" target="_blank">submit a bug</a> in GitHub.</p>
<canvas id="canvas" width="1300" height="730"></canvas>
<div id="img-out"></div>
</div>
<div id="tooltip"></div>
<!-- load all the JS -->
<script type="text/javascript" src="http://cookbook.latimes.com/js/d3-3.5.6/d3.min.js"></script>
<script type="text/javascript" src="js/svg-export.js?v=2"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>