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 - Canada 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="Vector Canada map with clickable states and pins, 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="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>
73 
                    <ul id="examples">
74 
                        <li>
75 
                            <a href="./">Mall Map</a>
76 
                        </li>
77 
                        <li>
78 
                            <a href="apartment.html">Apartment</a>
79 
                        </li>
80 
                        <li>
81 
                            <a href="world.html">World</a>
82 
                        </li>
83 
                        <li>
84 
                            <a href="continents.html">Continents</a>
85 
                        </li>
86 
                        <li>
87 
                            <a href="europe.html">Europe</a>
88 
                        </li>
89 
                        <li>
90 
                            <a href="usa.html">USA</a>
91 
                        </li>
92 
                        <li class="active">
93 
                            <a href="canada.html">Canada</a>
94 
                        </li>
95 
                        <li>
96 
                            <a href="australia.html">Australia</a>
97 
                        </li>
98 
                        <li>
99 
                            <a href="france.html">France</a>
100 
                        </li>
101 
                        <li>
102 
                            <a href="germany.html">Germany</a>
103 
                        </li>
104 
                        <li>
105 
                            <a href="italy.html">Italy</a>
106 
                        </li>
107 
                        <li>
108 
                            <a href="uk.html">United Kingdom</a>
109 
                        </li>
110 
                        <li>
111 
                            <a href="switzerland.html">Switzerland</a>
112 
                        </li>
113 
                        <li>
114 
                            <a href="russia.html">Russia</a>
115 
                        </li>
116 
                        <li>
117 
                            <a href="china.html">China</a>
118 
                        </li>
119 
                        <li>
120 
                            <a href="brazil.html">Brazil</a>
121 
                        </li>
122 
                    </ul>
123 
                </section>
124 
                <section class="purple">
125 
                    <div class="inner">
126 
                        <h1>Bring your
127 
                            <strong>images</strong> and
128 
                            <strong>vector graphics</strong> to life!</h1>
129 
                        <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
130 
                            is the limit. It's also perfectly suitable for touchscreen kiosk maps.</p>
131 
                    </div>
132 
                </section>
133 
                <section class="inner features">
134 
                    <div class="container">
135 
                        <div class="one-third icon landmark">
136 
                            <h3>Unlimited landmarks</h3>
137 
                            <p>Any number of locations with unique pins and various actions</p>
138 
                        </div>
139 
                        <div class="one-third icon layer">
140 
                            <h3>Unlimited floors</h3>
141 
                            <p>Multiple floors are supported without any limitation</p>
142 
                        </div>
143 
                        <div class="one-third icon link">
144 
                            <h3>Deeplinking</h3>
145 
                            <p>Every location can be referenced by it's own URL</p>
146 
                        </div>
147 
                    </div>
148 
                    <div class="container">
149 
                        <div class="one-third icon browser">
150 
                            <h3>Browser support</h3>
151 
                            <p>Works great in every major browser (even Internet Explorer 8)</p>
152 
                        </div>
153 
                        <div class="one-third  icon responsive">
154 
                            <h3>Responsive design</h3>
155 
                            <p>Provides optimal experience across a wide range of devices</p>
156 
                        </div>
157 
                        <div class="one-third icon mobile">
158 
                            <h3>Touch optimised</h3>
159 
                            <p>Touchscreen devices, like tablets and smartphones are also supported</p>
160 
                        </div>
161 
                    </div>
162 
                </section>
163 
                <section class="blue">
164 
                    <div class="inner">
165 
                        <a id="wordpress" href="http://www.mapplic.com" target="_blank">
166 
                            <img src="images/wp.png" alt="WordPress">
167 
                            <strong>WordPress</strong> version available!</a>
168 
                    </div>
169 
                </section>
170 
            </div>
171 
            <!-- Site footer -->
172 
            <footer id="footer">
173 
                <div class="inner">
174 
                    <a id="contact" href="http://codecanyon.net/user/sekler?ref=sekler#contact" target="_blank"></a>
175 
                    <span>Copyright &copy; 2015
176 
                        <a href="http://codecanyon.net/user/sekler?ref=sekler">sekler</a>. All rights reserved.</span>
177 
                </div>
178 
            </footer>
179 
        </div>
180 
        <!-- Scripts -->
181 
        <script type="text/javascript" src="js/jquery.min.js"></script>
182 
        <script type="text/javascript" src="js/hammer.min.js"></script>
183 
        <script type="text/javascript" src="js/jquery.easing.js"></script>
184 
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
185 
        <script type="text/javascript" src="js/smoothscroll.js"></script>
186 
        <script type="text/javascript" src="mapplic/mapplic.js"></script>
187 
        <script type="text/javascript">
188 
            $(document).ready(function()
189 
            {
190 
                // Inline JSON
191 
                var data = {
192 
                    "mapwidth": "640",
193 
                    "mapheight": "600",
194 
                    "categories": [],
195 
                    "levels": [
196 
                    {
197 
                        "id": "canada",
198 
                        "title": "Canada",
199 
                        "map": "maps/canada.svg",
200 
                        "locations": [
201 
                        {
202 
                            "id": "ca-qc",
203 
                            "title": "Quebec",
204 
                            "description": "Quebec.",
205 
                            "pin": "hidden",
206 
                            "fill": "#AFC144",
207 
                            "x": "0.6874",
208 
                            "y": "0.7325",
209 
                            "zoom": "2.5"
210 
                        },
211 
                        {
212 
                            "id": "calgary",
213 
                            "title": "Calgary",
214 
                            "description": "Calgary.",
215 
                            "pin": "circular",
216 
                            "x": "0.2273",
217 
                            "y": "0.7425"
218 
                        }]
219 
                    }]
220 
                };
221 
                $('#mapplic').mapplic(
222 
                {
223 
                    source: 'canada.json',
224 
                    //source: data,
225 
                    height: 400,
226 
                    sidebar: false,
227 
                    minimap: false,
228 
                    zoombuttons: false,
229 
                    deeplinking: true,
230 
                    fullscreen: false,
231 
                    hovertip: true,
232 
                    developer: true,
233 
                    maxscale: 3,
234 
                    skin: 'mapplic-dark',
235 
                    zoom: false
236 
                });
237 
                $('.usage').click(function(e)
238 
                {
239 
                    e.preventDefault();
240 
                    $('.editor-window').slideToggle(200);
241 
                });
242 
                $('.editor-window .window-mockup').click(function()
243 
                {
244 
                    $('.editor-window').slideUp(200);
245 
                });
246 
            });
247 
        </script>
248 
    </body>
249 
 
250 
</html>