Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-25 20:44:38 +04:00
Code Issues Projects Releases Wiki Activity

version 1.0.0-alpha.4

Browse Source
This commit is contained in:
codecalm
2020-02-22 13:06:55 +01:00
parent ea4bba630e
commit 43e8415114
146 changed files with 5159 additions and 19920 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/maps.html
+114 -74
View File
@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.3
* @version 1.0.0-alpha.4
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -25,21 +25,22 @@
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- Libs CSS -->
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/selectize/dist/css/selectize.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/core/main.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/list/main.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="./dist/css/tabler.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="./dist/css/tabler-flags.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/css/tabler-buttons.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/css/demo.min.css?1582145729" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
<link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
<style>
body {
display: none;
@@ -71,9 +72,9 @@
<span class="nav-link-title">Form elements</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item active">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
aria-expanded="false" >
aria-expanded="true" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-link-title">Base</span>
@@ -104,6 +105,16 @@
Modals
</a>
</li>
<li >
<a class="dropdown-item active" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
@@ -424,16 +435,16 @@
<img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
</a>
<form class="form-inline w-50 mr-4 d-none d-md-flex">
<div class="input-icon w100">
<div class="input-icon w-100">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-flush w100" placeholder="Search…">
<input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
</div>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
<a href="#" class="nav-link px-0" data-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
@@ -453,7 +464,7 @@
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
<span class="flag flag-country-us mr-1"></span>
English
<span class="d-none d-lg-inline">English</span>
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
<a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
@@ -479,9 +490,9 @@
</div>
</li>
<li class="nav-item dropdown pl-2">
<a href="#" class="nav-link d-flex lh-1 text-inherit py-0 text-left" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-md-block pl-2">
<div class="d-none d-lg-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">Founder</div>
</div>
@@ -519,21 +530,42 @@
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<div id="map-world" style="height: 20rem"></div>
<div class="card-title">Simple map</div>
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item">
<div id="map-simple" class="w-100 h-100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<div id="map-europe" style="height: 20rem"></div>
<div class="card-title">Light map style</div>
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item">
<div id="map-light" class="w-100 h-100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div id="map-usa" style="height: 20rem"></div>
<div class="embed-responsive embed-responsive-2by1">
<div class="embed-responsive-item">
<div id="map-markers" class="w-100 h-100 rounded"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="embed-responsive embed-responsive-2by1">
<div class="embed-responsive-item">
<div id="map-card" class="w-100 h-100 rounded"></div>
</div>
</div>
</div>
</div>
@@ -541,23 +573,15 @@
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
<a href="https://github.com/tabler/tabler" class="btn btn-secondary btn-sm" target="_blank" rel="noreferrer">
Source code
</a>
</div>
</div>
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
@@ -629,52 +653,68 @@
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.js?1582145729"></script>
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582145729"></script>
<script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js?1582145729"></script>
<script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1582145729"></script>
<script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1582145729"></script>
<script src="./dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1582145729"></script>
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js?1582145729"></script>
<script src="./dist/js/tabler.min.js?1582373134"></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function() {
$('#map-world').vectorMap({
map: 'world_en',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
scaleColors: ["#dff1cc", "#5eba00"],
normalizeFunction: 'polynomial',
values: (chart_data = {"af":16, "al":11, "dz":158, "ao":85, "ag":1, "ar":351, "am":8, "au":1219, "at":366, "az":52, "bs":7, "bh":21, "bd":105, "bb":3, "by":52, "be":461, "bz":1, "bj":6, "bt":1, "bo":19, "ba":16, "bw":12, "br":2023, "bn":11, "bg":44, "bf":8, "bi":1, "kh":11, "cm":21, "ca":1563, "cv":1, "cf":2, "td":7, "cl":199, "cn":5745, "co":283, "km":0, "cd":12, "cg":11, "cr":35, "ci":22, "hr":59, "cy":22, "cz":195, "dk":304, "dj":1, "dm":0, "do":50, "ec":61, "eg":216, "sv":21, "gq":14, "er":2, "ee":19, "et":30, "fj":3, "fi":231, "fr":2555, "ga":12, "gm":1, "ge":11, "de":3305, "gh":18, "gr":305, "gd":0, "gt":40, "gn":4, "gw":0, "gy":2, "ht":6, "hn":15, "hk":226, "hu":132, "is":12, "in":1430, "id":695, "ir":337, "iq":84, "ie":204, "il":201, "it":2036, "jm":13, "jp":5390, "jo":27, "kz":129, "ke":32, "ki":0, "kr":986, "undefined":5, "kw":117, "kg":4, "la":6, "lv":23, "lb":39, "ls":1, "lr":0, "ly":77, "lt":35, "lu":52, "mk":9, "mg":8, "mw":5, "my":218, "mv":1, "ml":9, "mt":7, "mr":3, "mu":9, "mx":1004, "md":5, "mn":5, "me":3, "ma":91, "mz":10, "mm":35, "na":11, "np":15, "nl":770, "nz":138, "ni":6, "ne":5, "ng":206, "no":413, "om":53, "pk":174, "pa":27, "pg":8, "py":17, "pe":153, "ph":189, "pl":438, "pt":223, "qa":126, "ro":158, "ru":1476, "rw":5, "ws":0, "st":0, "sa":434, "sn":12, "rs":38, "sc":0, "sl":1, "sg":217, "sk":86, "si":46, "sb":0, "za":354, "es":1374, "lk":48, "kn":0, "lc":1, "vc":0, "sd":65, "sr":3, "sz":3, "se":444, "ch":522, "sy":59, "tw":426, "tj":5, "tz":22, "th":312, "tl":0, "tg":3, "to":0, "tt":21, "tn":43, "tr":729, "tm":0, "ug":17, "ua":136, "ae":239, "gb":2258, "us":4624, "uy":40, "uz":37, "vu":0, "ve":285, "vn":101, "ye":30, "zm":15, "zw":5}),
onLabelShow: function (event, label, code) {
if (chart_data[code] > 0) {
label.append(': <strong>' + chart_data[code] + '</strong>');
}
},
mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ';
var map = new mapboxgl.Map({
container: 'map-simple',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 13,
center: [13.404900, 52.518827],
});
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function() {
$('#map-europe').vectorMap({
map: 'europe_en',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
enableZoom: true,
mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ';
var map = new mapboxgl.Map({
container: 'map-light',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 11,
center: [-0.2416782, 51.5285582],
});
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function() {
$('#map-usa').vectorMap({
map: 'usa_en',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ';
var map = new mapboxgl.Map({
container: 'map-markers',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 1,
center: [0, 0],
});
new mapboxgl.Marker({ color: "#206bc4" }).setLngLat([-58.666667, -34.58333333]).addTo(map);
new mapboxgl.Marker({ color: "#206bc4" }).setLngLat([16.366667, 48.2]).addTo(map);
new mapboxgl.Marker({ color: "#206bc4" }).setLngLat([116.383333, 39.91666667]).addTo(map);
new mapboxgl.Marker({ color: "#206bc4" }).setLngLat([149.133333, -35.26666667]).addTo(map);
new mapboxgl.Marker({ color: "#206bc4" }).setLngLat([58.583333, 23.61666667]).addTo(map);
new mapboxgl.Marker({ color: "#206bc4" }).setLngLat([-77, 38.883333]).addTo(map);
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function() {
mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ';
var map = new mapboxgl.Map({
container: 'map-card',
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 1,
center: [0, 0],
});
});
// @formatter:on
</script>
<script>
(function() {