| 5 |
lars |
1 |
<!DOCTYPE html>
|
|
|
2 |
<html>
|
|
|
3 |
|
|
|
4 |
<head>
|
|
|
5 |
<!-- Meta -->
|
|
|
6 |
<meta charset="utf-8">
|
|
|
7 |
<title>Mapplic - Custom Interactive Map Plugin - Apartment Example</title>
|
|
|
8 |
<!-- Viewport for Responsivity -->
|
|
|
9 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|
|
10 |
<meta name="description" content="Image map of an apartment, an example of using Mapplic, a premium custom interactive map plugin to display custom image or vector (SVG) maps.">
|
|
|
11 |
<!-- Stylesheets -->
|
|
|
12 |
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
|
|
|
13 |
<link rel="stylesheet" type="text/css" href="css/style.css">
|
|
|
14 |
<link rel="stylesheet" type="text/css" href="mapplic/mapplic.css">
|
|
|
15 |
<!-- Internet Explorer -->
|
|
|
16 |
<!--[if lt IE 9]>
|
|
|
17 |
<link rel="stylesheet" type="text/css" href="mapplic/mapplic-ie.css">
|
|
|
18 |
<script type="text/javascript" src="js/html5shiv.js"></script>
|
|
|
19 |
<![endif]-->
|
|
|
20 |
</head>
|
|
|
21 |
|
|
|
22 |
<body>
|
|
|
23 |
<div id="wrap">
|
|
|
24 |
<!-- Site header -->
|
|
|
25 |
<header id="header">
|
|
|
26 |
<div class="inner">
|
|
|
27 |
<nav>
|
|
|
28 |
<ul id="main-menu">
|
|
|
29 |
<li>
|
|
|
30 |
<a href="#" class="usage">Usage</a>
|
|
|
31 |
</li>
|
|
|
32 |
<li>
|
|
|
33 |
<a href="http://codecanyon.net/user/sekler?ref=sekler#contact" target="_blank">Contact</a>
|
|
|
34 |
</li>
|
|
|
35 |
<li>
|
|
|
36 |
<a href="http://codecanyon.net/item/custom-interactive-map-jquery-plugin/6275001?ref=sekler" target="_blank" class="button">Purchase
|
|
|
37 |
<span>$18</span>
|
|
|
38 |
</a>
|
|
|
39 |
</li>
|
|
|
40 |
</ul>
|
|
|
41 |
</nav>
|
|
|
42 |
<a id="logo" href="./"></a>
|
|
|
43 |
<h1>The most
|
|
|
44 |
<strong>advanced</strong> custom interactive map
|
|
|
45 |
<br> plugin on the web</h1>
|
|
|
46 |
<div class="clear"></div>
|
|
|
47 |
</div>
|
|
|
48 |
</header>
|
|
|
49 |
<!-- Site content -->
|
|
|
50 |
<div id="content">
|
|
|
51 |
<section id="map-section" class="inner over">
|
|
|
52 |
<div class="editor-window">
|
|
|
53 |
<div class="window-mockup brown"></div>
|
|
|
54 |
<div class="editor-body"> <code>
|
|
|
55 |
{<br>
|
|
|
56 |
"id": "newlandmark",<br>
|
|
|
57 |
"title": "New Landmark",<br>
|
|
|
58 |
"description": "Creating a new landmark is that easy!",<br>
|
|
|
59 |
"x": "<span class="mapplic-coordinates-x">0.0000</span>",<br>
|
|
|
60 |
"y": "<span class="mapplic-coordinates-y">0.0000</span>",<br>
|
|
|
61 |
...<br>
|
|
|
62 |
}
|
|
|
63 |
</code> </div>
|
|
|
64 |
</div>
|
|
|
65 |
<!-- Map -->
|
|
|
66 |
<div class="map-container">
|
|
|
67 |
<div class="window-mockup">
|
|
|
68 |
<div class="window-bar"></div>
|
|
|
69 |
</div>
|
|
|
70 |
<div id="mapplic"></div>
|
|
|
71 |
</div>
|
|
|
72 |
<ul id="examples">
|
|
|
73 |
<li>
|
|
|
74 |
<a href="./">Mall Map</a>
|
|
|
75 |
</li>
|
|
|
76 |
<li class="active">
|
|
|
77 |
<a href="apartment.html">Apartment</a>
|
|
|
78 |
</li>
|
|
|
79 |
<li>
|
|
|
80 |
<a href="world.html">World</a>
|
|
|
81 |
</li>
|
|
|
82 |
<li>
|
|
|
83 |
<a href="continents.html">Continents</a>
|
|
|
84 |
</li>
|
|
|
85 |
<li>
|
|
|
86 |
<a href="europe.html">Europe</a>
|
|
|
87 |
</li>
|
|
|
88 |
<li>
|
|
|
89 |
<a href="usa.html">USA</a>
|
|
|
90 |
</li>
|
|
|
91 |
<li>
|
|
|
92 |
<a href="canada.html">Canada</a>
|
|
|
93 |
</li>
|
|
|
94 |
<li>
|
|
|
95 |
<a href="australia.html">Australia</a>
|
|
|
96 |
</li>
|
|
|
97 |
<li>
|
|
|
98 |
<a href="france.html">France</a>
|
|
|
99 |
</li>
|
|
|
100 |
<li>
|
|
|
101 |
<a href="germany.html">Germany</a>
|
|
|
102 |
</li>
|
|
|
103 |
<li>
|
|
|
104 |
<a href="italy.html">Italy</a>
|
|
|
105 |
</li>
|
|
|
106 |
<li>
|
|
|
107 |
<a href="uk.html">United Kingdom</a>
|
|
|
108 |
</li>
|
|
|
109 |
<li>
|
|
|
110 |
<a href="switzerland.html">Switzerland</a>
|
|
|
111 |
</li>
|
|
|
112 |
<li>
|
|
|
113 |
<a href="russia.html">Russia</a>
|
|
|
114 |
</li>
|
|
|
115 |
<li>
|
|
|
116 |
<a href="china.html">China</a>
|
|
|
117 |
</li>
|
|
|
118 |
<li>
|
|
|
119 |
<a href="brazil.html">Brazil</a>
|
|
|
120 |
</li>
|
|
|
121 |
</ul>
|
|
|
122 |
</section>
|
|
|
123 |
<section class="purple">
|
|
|
124 |
<div class="inner">
|
|
|
125 |
<h1>Bring your
|
|
|
126 |
<strong>images</strong> and
|
|
|
127 |
<strong>vector graphics</strong> to life!</h1>
|
|
|
128 |
<p>It can be used for multi storey buildings, airports, shopping malls, department stores, resorts, hospitals, harbors, campings or festivals, ski tracks, sport stadiums, cruise ships or anything you can think of, your imagination
|
|
|
129 |
is the limit. It's also perfectly suitable for touchscreen kiosk maps.</p>
|
|
|
130 |
</div>
|
|
|
131 |
</section>
|
|
|
132 |
<section class="inner features">
|
|
|
133 |
<div class="container">
|
|
|
134 |
<div class="one-third icon landmark">
|
|
|
135 |
<h3>Unlimited landmarks</h3>
|
|
|
136 |
<p>Any number of locations with unique pins and various actions</p>
|
|
|
137 |
</div>
|
|
|
138 |
<div class="one-third icon layer">
|
|
|
139 |
<h3>Unlimited floors</h3>
|
|
|
140 |
<p>Multiple floors are supported without any limitation</p>
|
|
|
141 |
</div>
|
|
|
142 |
<div class="one-third icon link">
|
|
|
143 |
<h3>Deeplinking</h3>
|
|
|
144 |
<p>Every location can be referenced by it's own URL</p>
|
|
|
145 |
</div>
|
|
|
146 |
</div>
|
|
|
147 |
<div class="container">
|
|
|
148 |
<div class="one-third icon browser">
|
|
|
149 |
<h3>Browser support</h3>
|
|
|
150 |
<p>Works great in every major browser (even Internet Explorer 8)</p>
|
|
|
151 |
</div>
|
|
|
152 |
<div class="one-third icon responsive">
|
|
|
153 |
<h3>Responsive design</h3>
|
|
|
154 |
<p>Provides optimal experience across a wide range of devices</p>
|
|
|
155 |
</div>
|
|
|
156 |
<div class="one-third icon mobile">
|
|
|
157 |
<h3>Touch optimised</h3>
|
|
|
158 |
<p>Touchscreen devices, like tablets and smartphones are also supported</p>
|
|
|
159 |
</div>
|
|
|
160 |
</div>
|
|
|
161 |
</section>
|
|
|
162 |
<section class="blue">
|
|
|
163 |
<div class="inner">
|
|
|
164 |
<a id="wordpress" href="http://www.mapplic.com" target="_blank">
|
|
|
165 |
<img src="images/wp.png" alt="WordPress">
|
|
|
166 |
<strong>WordPress</strong> version available!</a>
|
|
|
167 |
</div>
|
|
|
168 |
</section>
|
|
|
169 |
</div>
|
|
|
170 |
<!-- Site footer -->
|
|
|
171 |
<footer id="footer">
|
|
|
172 |
<div class="inner">
|
|
|
173 |
<a id="contact" href="http://codecanyon.net/user/sekler?ref=sekler#contact" target="_blank"></a>
|
|
|
174 |
<span>Copyright © 2015
|
|
|
175 |
<a href="http://codecanyon.net/user/sekler?ref=sekler">sekler</a>. All rights reserved.</span>
|
|
|
176 |
</div>
|
|
|
177 |
</footer>
|
|
|
178 |
</div>
|
|
|
179 |
<!-- Scripts -->
|
|
|
180 |
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
|
181 |
<script type="text/javascript" src="js/hammer.min.js"></script>
|
|
|
182 |
<script type="text/javascript" src="js/jquery.easing.js"></script>
|
|
|
183 |
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
|
|
|
184 |
<script type="text/javascript" src="js/smoothscroll.js"></script>
|
|
|
185 |
<script type="text/javascript" src="mapplic/mapplic.js"></script>
|
|
|
186 |
<script type="text/javascript">
|
|
|
187 |
$(document).ready(function()
|
|
|
188 |
{
|
|
|
189 |
$('#mapplic').mapplic(
|
|
|
190 |
{
|
|
|
191 |
source: 'apartment.json',
|
|
|
192 |
height: 460,
|
|
|
193 |
animate: true,
|
|
|
194 |
mapfill: true,
|
|
|
195 |
sidebar: true,
|
|
|
196 |
minimap: true,
|
|
|
197 |
deeplinking: true,
|
|
|
198 |
fullscreen: true,
|
|
|
199 |
hovertip: true,
|
|
|
200 |
developer: true,
|
|
|
201 |
maxscale: 1
|
|
|
202 |
});
|
|
|
203 |
$('.usage').click(function(e)
|
|
|
204 |
{
|
|
|
205 |
e.preventDefault();
|
|
|
206 |
$('.editor-window').slideToggle(200);
|
|
|
207 |
});
|
|
|
208 |
$('.editor-window .window-mockup').click(function()
|
|
|
209 |
{
|
|
|
210 |
$('.editor-window').slideUp(200);
|
|
|
211 |
});
|
|
|
212 |
});
|
|
|
213 |
</script>
|
|
|
214 |
</body>
|
|
|
215 |
|
|
|
216 |
</html>
|