-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
342 lines (295 loc) · 18.2 KB
/
index.html
File metadata and controls
342 lines (295 loc) · 18.2 KB
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="cs">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<meta name="google-site-verification" content="MrR5-oq1_vWewvmu0-XluGRH-v040HOn6ntoQEjOrOQ" />
<meta name="description" content="We are visualizating data on map.">
<meta name="keywords" content="map, design, GIS,data analytics, cartography,web development">
<meta name="author" content="Filip Zavadil">
<title>mapshakers | next level of cartography</title>
<link rel="apple-touch-icon" sizes="57x57" href="website/style/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="website/style/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="website/style/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="website/style/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="website/style/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="website/style/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="website/style/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="website/style/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="website/style/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="website/style/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="website/style/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="website/style/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="website/style/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="website/style/favicon/manifest.json">
<link rel="shortcut icon" href="website/style/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-TileImage" content="website/style/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="website/style/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="http://fonts.googleapis.com/css?family=Noto Sans" rel="stylesheet" type="text/css">
<link href='https://rawgit.com/mapshakers/mapkeyicons/master/dist/MapkeyIcons.css' rel='stylesheet' type='text/css'>
<script src="website/js/jquery-2.1.4.min.js"></script>
<link href="website/style/main.css" rel="stylesheet" type="text/css">
<link href="website/style/mobile.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="cc">
<div id="header">
<div id="logoWrapper">
<a href="http://www.mapshakers.com"><img src="website/img/logo/mapshakers_header_logo.png"></a>
</div>
<div id="navWrapper">
<button id="menuButton"><span class="mki mki-bars"></span></button>
<nav>
<ul>
<li><a href="index.html"><span class="mki-intext mki-home"></span> home</a></li>
<li><a href="#contact"><span class="mki-intext mki-post_office"></span> contact</a></li>
<!-- <li><a href="website/download.html"><span class="mki-intext mki-data"></span> data</a></li> -->
</ul>
</nav>
</div>
</div>
<div id ="carousel">
<div id="carouselContent"/>
</div>
<div id="carouselNav"/>
</div>
</header>
<section id="s1">
<div class="cc">
<div id="servicesWrapper">
<div class="one-third"><span class="mki mki-database" style="font-size: 150px"></span><br/>Cloud secure spatial database allow the fastest data retrieval and analysis. Let your data be with with you anywhere. </div><div class="one-third"><span class="mki mki-map" style="font-size: 150px"></span><br/>Visualize your data on our basemap and you have effective overview. Choose from plenty map styles right for your purpose.</div><div class="one-third"><span class="mki mki-analyse" style="font-size: 150px"></span><br/>Find and analyse your data on the fly. Do you prefer table view or chart view? Use our clear visualization to improve your work.</div>
</div>
</div>
</section>
<section id="sWebApp">
<div class="cc">
<h1>web map applications</h1>
<div class="one-half" style="width:50%">
Do you
<ul>
<li>collect spatial data?</li>
<li>need data always be with you?</li>
<li>want a current overview anytime?</li>
<li>like on the fly data analysis?</li>
<li>need very fast application?</li>
<li>want clear responsive design?</li>
<li>expect high level security?</li>
</ul>
</div><div class="one-half" style="width:50%;margin-top: 50px"><img class="shadowed" style="max-width: 100%;width: 90%" src="website/img/gisapp.png" ></div>
<p>That's why we are here! We create web map applications exactly for you!</p>
</div>
<div class="cc">
<div style="text-align: center;">
<img class="shadowed" style="max-width: 100%;width: 90%" src="website/img/SA_webapp.png" >
</div>
<div class="one-half" style="width:40%;text-align: center"><img width="50%" class="shadowed" src="website/img/tablet.png"></div><div class="one-half" style="width:60%">
<h3>fast applications</h3>
<p>
for our web maps we use the high-end technologies
</p>
</div>
<div class="one-half" style="width:50%">
<h3>responsive design</h3>
<p>our web maps are awesome on every device, take us on desktop browser, laptop, iPad, tablet or smartphone</p>
</div><div class="one-half" style="width:50%;text-align: center"><img width="90%" class="shadowed" src="website/img/desktop.png"></div>
<div class="one-half" style="width:40%;text-align: center"><img width="30%" class="shadowed" src="website/img/smartphone.png"></div><div class="one-half" style="width:60%">
<h3>cloud services</h3>
<p>
we store your data on our cloud, you have your data anywhere on any device and of course all safely
</p>
</div>
</div>
</section>
<section id="sStyles">
<div class="cc" style="text-align: center">
<h1>THE BASEMAPS</h1>
<p>We offer several basemap styles. Each is suitable for different purpose. For example if you are interested in road network, the best style for you is one with significant roads. And if you are tourist you should choose basemap with hillshading and contours.</p>
<p>Our basemaps are retina ready so you can enjoy high resolution maps and plans. And of course our basemap is also suitable for print media.</p>
<div id="mapStyles">
<div class="mapStyleItem greyBright shadowed"></div>
<div class="mapStyleItem default shadowed"></div>
<div class="mapStyleItem relief shadowed"></div>
<div class="mapStyleItem night shadowed"></div>
<div class="mapStyleItem retro shadowed"></div>
<div class="mapStyleItem tourism shadowed"></div>
<div class="mapStyleItem greyDark shadowed"></div>
<div class="mapStyleItem greyBrightII shadowed"></div>
</div>
<h3>THE MAP STYLER </h3>
<p>Didn't you find any suitable style for you? For our clients we provide simple application <strong>map styler</strong>, which is so easy to create the map exactly as you like it!</p>
<img width="80%" class="shadowed" src="website/img/mapStyler.png" style="border-radius: 2px">
</div>
</section>
<section id="s2">
<div class="cc">
<div style="text-align: center">
<img width="80%" src="website/img/mapkeyIcons.png" style="border-radius: 40px">
</div>
<div class="one-half" style="width:60%">
<h1>Modern map symbols</h1>
<p>Looking for modern retina map symbols? Are you web developer or cartographer? We create mapkeyicons for you! Visit <a target="_blank" href="http://www.mapkeyicons.com"> mapkeyicons.com </a>, download mapkeyicons package and use<strong> CSS toolkit</strong> for simply usage or download <strong>svg or png</strong> images. Everything <strong>for free</strong>! Mapkeyincons are distributed under public domain.</p>
<a class="anchorButton" target="_blank" href="https://github.com/mapshakers/mapkeyicons/releases/latest"><span class="mki-intext mki-download"></span> download </a>
</div><div class="one-half" style="width:40%">
<img style="width: 100%; max-width: 340px" src="website/img/MapkeyIconsPromo.png">
</div>
<div style="">
<h2> Cartographical use </h2>
<p>Mapkeyicons are symbols, pictograms and icons with clear relevance - are perfect for your map project. If you create web map applications based on excellent javascript library Leaflet, you might be interested in our plugin <a href="https://github.com/mapshakers/mapkeyicons"> leaflet-mapkey-icon</a>!</p>
<div style="text-align: center"> <img width="90%" src="website/img/mapkeyicons_praha.jpg" style="border-radius: 40px"></div>
<h2> GIS editors </h2>
<p><strong>Stay tuned!</strong> We are preparing symbol set, that you can use in your favourite map editor! We will soon provide symbol set for <i>ArcMap</i> and <i>QGIS</i>. </p>
</div>
</div>
</section>
<section id="s3">
<div class="cc">
<div style="text-align: center"></div>
<div class="one-half" style="width:25%;text-align:center;color:#525252"><span class="mki mki-cartography bigSymbol" style="font-size:240px;"></span></div><div class="one-half" style="width: 75%;text-align:left">
<h1>Cartographic/GIS data</h1>
<p>We provide plenty GIS data for <strong>free</strong>! There are mainly based on OpenStreetMap database. In download section you can choose from vector or raster data.</p>
</div>
<div class="one-half" style="width:35%;text-align:left">
<h3>Free GeoTiff maps</h3>
<p>We offer rendered geotiff maps and city plans in varying scales and places! Download it and use it for free! Maps are rendered in web mercator (<code style="font-size: 1.2em">epsg:3857</code>) projection in <code>geotiff</code> format with georeferencing. Ready to be used in your GIS application as basemap.</p>
</div><div class="one-half" style="width: 65%">
<img width="100%" src="website/img/the_world_greyDark.png" style=""/>
</div> </div>
<div style="text-align: center">
<div class="mapsItem barcelona"></div>
<div class="mapsItem europe"></div>
<div class="mapsItem lisboa"></div>
<div class="mapsItem world_2"></div>
<div class="mapsItem amsterdam"></div>
<div class="mapsItem south_america"></div>
<div class="mapsItem london"></div>
<div class="mapsItem cairo"></div>
<div class="mapsItem sicily"></div>
<div class="mapsItem tatras"></div>
<div class="mapsItem world"></div>
<div class="mapsItem berlin"></div>
<div class="mapsItem salzburk"></div>
<div class="mapsItem prague"></div>
<div class="mapsItem south_europe"></div>
<div class="mapsItem stockholm"></div>
<div class="mapsItem great_britain"></div>
<div class="mapsItem singapore"></div>
<div class="mapsItem chicago"></div>
<div class="mapsItem vesuv"></div>
</div>
</section>
<section id="s4">
<div class="cc">
<div id="consulting" class="one-half" style="width: 60%">
<h1>GIS consulting</h1>
<p>Need help with your GIS project? Don't hesitate to contact us! We are GIS guys with years of experience! We can share knowledge about <strong>GIS servers</strong>, <strong>spatial databases</strong>, <strong>designing maps</strong>, <strong>creating webmaps</strong> and <strong>GIS analysis</strong>. </p>
</div><div class="one-half" style="width:40%;text-align:center;color: #a4a4a4;"><span class="mki mki-university bigSymbol" style="font-size:300px"></span></div>
</div>
</section>
<section id="sOpenSource">
<div class="cc">
<div class="one-half" style="width:40%;text-align:center;color:#555e72;"><span class="mki mki-github bigSymbol" style="font-size:280px"></span></div><div class="one-half" style="width: 60%">
<p>We contribute to open-source projects. Check out our <strong>github profile</strong>. We are also contributors to awesome global mapping project <strong>OpenStreetMap</strong>!</p>
<div><a class="anchorButton" target="_blank" href="https://github.com/mapshakers"> go to github profile </a></div>
</div>
</div>
</section>
<section id="s5">
<div class="cc">
<div id="about" class="one-half" style="width: 60%"> <h1>about</h1> <p>We are group of map enthusiasts, who improve usability of map applications. Our work is our passion. We are interested in these three words: <strong>simplicity</strong>, <strong>security</strong> and <strong>good design</strong>. We are ready to materialize your ideas! </p>
</div><div id="contact" class="one-half" style="width: 40%">
<h1>contact</h1>
<ul>
<li><a target="_blank" href="tel:+420739636988"><span class="mki-intext mki-telephone"></span><span class="value">+420 739 636 988</span></a></li>
<li><a target="_blank" href="mailto:info@mapshakers.com"><span class="mki-intext mki-post_office"></span><span class="value">info@mapshakers.com</span></a></li>
<li><a target="_blank" href="https://www.google.com/maps/place/Prague"><span class="mki-intext mki-marker"></span><span class="value">Prague 4, Czech Rep.</span></a></li>
<li><a target="_blank" href="http://www.mapshakers.com"><span class="mki-intext mki-laptop"></span><span class="value">www.mapshakers.com</span></a></li>
<li><a target="_blank" href="https://github.com/mapshakers"><span class="mki-intext mki-github"></span><span class="value">github/mapshakers</span></a></li>
<li><a target="_blank" href="https://www.facebook.com/mapshakers"><span class="mki-intext mki-facebook"></span><span class="value">facebook/mapshakers</span></a></li>
<li><a target="_blank" href="https://www.pinterest.com/mapshakers/"><span class="mki-intext mki-pinterest"></span><span class="value">pinterest/mapshakers</span></a></li>
</ul>
</div>
</div>
</section>
<section id="sPinterest">
<div class="cc" style="text-align: center;padding-top: 30px;padding-bottom: 30px">
<h2>Follow us on Pinterest!</h2>
<a data-pin-board-width="900" data-pin-do="embedUser" data-pin-board-height="120" data-pin-scale-width="115" href="https://www.pinterest.com/mapshakers/planets-of-cities/"></a>
<!-- Please call pinit.js only once per page -->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div>
</section>
<section id="sLast">
<div class="cc" style="text-align: center">
<img style="width: 700px;max-width: 100%;padding-top: 20px" src="website/img/reference.png">
</div>
</section>
<footer>
<div class="cc" style="text-align: center;padding-top:30px">
<div id="copyright"> © mapshakers, 2015-2016 All rights reserved</div>
</div>
</footer>
<!-- CAROUSEL -->
<div id="gis" style="display: none">
<div class="carouselText">
YOUR<br/>DATA<br/>EVERYWHERE<br/>WITH YOU
</div><div class="carouselImage">
<img style="max-width:100%;" src="website/carousel/webGIScloud.png">
</div>
</div>
<div id="app" style="display: none">
<div class="carouselText">
WITH AN<br/>
EMPHASIS ON<br/>
SIMPLICITY,<br/>
USABILITY,<br/>
SECURITY!<br/>
</div><div class="carouselImage">
<img style="max-width:100%;width: 100%" src="website/carousel/webapp/webapp.png">
</div>
</div>
<div id="mapkeyicons" style="display: none">
<div class="carouselText">
MAPKEYICONS<br/>
MAP SYMBOLS<br/>
FOR CARTOGRAPHERS<br/>
</div><div class="carouselImage">
<img style="max-width:100%;width: 100%" src="website/carousel/mapkeyicons.png">
</div>
</div>
<div id="styles" style="display: none">
<div class="carouselText">
CHOOSE FROM<br/>
PLENTY MAP<br/>
STYLES EXACTLY<br/>
FOR YOUR<br/>
USE !
</div><div class="carouselImage">
<img style="max-width:100%;width: 100%" src="website/carousel/styles/styles.png">
</div>
</div>
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
</body>
<script src="website/js/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-63632280-4', 'auto');
ga('send', 'pageview');
</script>
</html>