-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
90 lines (75 loc) · 4.43 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>mapstyler</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="//bgrins.github.io/spectrum/spectrum.css">
<link rel="stylesheet" href="css/map.css">
<link rel="icon" href="favicon.png" type="image/x-icon"/>
<script>
var dojoConfig = {
async: true,
isDebug: true,
paths: {
modules: location.href.replace(location.href.split("/").pop(), "") + "/js/modules"
}
};
</script>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="//bgrins.github.io/spectrum/spectrum.js"></script>
<script src="//js.arcgis.com/4.5/"></script>
<script src="js/mapstyler.js"></script>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<button onClick="document.getElementById('myModal').style.display='none';" class="close">×</button>
<img src="img/logo.svg"/>
<p>An app to quickly style vector tiles.</p>
<p class="footnote"><p>Developed by Esri UK, <em><stong>mapstyler</stong></em> allows users to style Esri vector tiles using images. Drag and drop an image onto the map or click upload to start. Looking for inspiration? Click the random icon to use one of our curated images.</p>
<p>Users can tweak colours before hitting the save button, creating a new basemap in ArcGIS Online. </p>
<p>Built using Esri's <a href="https://www.arcgis.com/home/item.html?id=5ad3948260a147a993ef4865e3fad476" target="_blank">dark gray canvas vector tile layer</a>, version 4 of the <a href="https://developers.arcgis.com/javascript/" target="_blank">ArcGIS API for JavaScript</a>, <a href="https://github.com/lokesh/color-thief" target="_blank">Color Thief</a>, <a href="https://github.com/anomal/RainbowVis-JS" target="_blank">RainbowVis-JS</a> and <a href="https://bgrins.github.io/spectrum/" target="_blank">Spectrum.</a> Get the code <a href="https://github.com/maplabs/mapstyler">here</a> and check out our other projects <a href="http://esriuk.com/labs">here.</a></p>
<button onClick="document.getElementById('myModal').style.display='none';" class="go-button">Got it!</button>
</div>
</div>
<div id="viewDiv"></div>
<div class="upload-btn-mobile">
<button class="btn">CHOOSE IMAGE</button>
<input type="file" accept="image/*" id="upload-mobile">
</div>
<div class="dialog">
<div class="card">
<div class="card-primary">
<ul class="pull-left">
<li class="undo"><a href="#" id="undo" class="btn disabled"></a></li>
<li class="redo"><a href="#" id="redo" class="btn disabled"></a></li>
<li class="random"><a href="#" class="btn"></a></li>
</ul>
<ul class="pull-right">
<li class="help"><a href="#" class="btn" onClick="document.getElementById('myModal').style.display='block';"></a></li>
</ul>
</div>
<div class="card-content">
<div id="diy" class="diy"><p>You've gone rogue, have fun!</p></div>
<canvas id="c"></canvas>
</div>
<div class="card-swatches">
<div id="swatch_1" class="swatch tooltip"><span class="tooltiptext">fill gradient start</span></div>
<div id="swatch_2" class="swatch tooltip"><span class="tooltiptext">fill gradient end</span></div>
<div id="swatch_3" class="swatch tooltip"><span class="tooltiptext">line colour</span></div>
<div id="swatch_4" class="swatch tooltip"><span class="tooltiptext">label colour</span></div>
<div id="swatch_5" class="swatch tooltip"><span class="tooltiptext">label halo colour</span></div>
</div>
<div class="card-action">
<a href="#" class="btn" id="save">Save</a>
<a href="#" class="btn" id="shuffle">Shuffle</a>
<div class="upload-btn-wrapper">
<button class="btn">Upload</button>
<input type="file" accept="image/*" id="upload">
</div>
</div>
</div>
</div>
</body>
</html>