Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

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