Bump UI & Codebase
This commit is contained in:
App Generator
742
app/base/static/assets/demo/demo.js
Normal file
742
app/base/static/assets/demo/demo.js
Normal file
@ -0,0 +1,742 @@
|
||||
type = ['primary', 'info', 'success', 'warning', 'danger'];
|
||||
|
||||
demo = {
|
||||
initPickColor: function() {
|
||||
$('.pick-class-label').click(function() {
|
||||
var new_class = $(this).attr('new-class');
|
||||
var old_class = $('#display-buttons').attr('data-class');
|
||||
var display_div = $('#display-buttons');
|
||||
if (display_div.length) {
|
||||
var display_buttons = display_div.find('.btn');
|
||||
display_buttons.removeClass(old_class);
|
||||
display_buttons.addClass(new_class);
|
||||
display_div.attr('data-class', new_class);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
initDocChart: function() {
|
||||
chartColor = "#FFFFFF";
|
||||
|
||||
// General configuration for the charts with Line gradientStroke
|
||||
gradientChartOptionsConfiguration = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
bodySpacing: 4,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest",
|
||||
xPadding: 10,
|
||||
yPadding: 10,
|
||||
caretPadding: 10
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: 0,
|
||||
gridLines: 0,
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
drawTicks: false,
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: 0,
|
||||
gridLines: 0,
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
drawTicks: false,
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 15
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ctx = document.getElementById('lineChartExample').getContext("2d");
|
||||
|
||||
gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
|
||||
gradientStroke.addColorStop(0, '#80b6f4');
|
||||
gradientStroke.addColorStop(1, chartColor);
|
||||
|
||||
gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
|
||||
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
|
||||
gradientFill.addColorStop(1, "rgba(249, 99, 59, 0.40)");
|
||||
|
||||
myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
responsive: true,
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
label: "Active Users",
|
||||
borderColor: "#f96332",
|
||||
pointBorderColor: "#FFF",
|
||||
pointBackgroundColor: "#f96332",
|
||||
pointBorderWidth: 2,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 1,
|
||||
pointRadius: 4,
|
||||
fill: true,
|
||||
backgroundColor: gradientFill,
|
||||
borderWidth: 2,
|
||||
data: [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 630]
|
||||
}]
|
||||
},
|
||||
options: gradientChartOptionsConfiguration
|
||||
});
|
||||
},
|
||||
|
||||
initDashboardPageCharts: function() {
|
||||
|
||||
gradientChartOptionsConfigurationWithTooltipBlue = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#2380f7"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#2380f7"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
gradientChartOptionsConfigurationWithTooltipPurple = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#9a9a9a"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(225,78,202,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9a9a9a"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
gradientChartOptionsConfigurationWithTooltipOrange = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 50,
|
||||
suggestedMax: 110,
|
||||
padding: 20,
|
||||
fontColor: "#ff8a76"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(220,53,69,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#ff8a76"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
gradientChartOptionsConfigurationWithTooltipGreen = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.0)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 50,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(0,242,195,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
gradientBarChartConfiguration = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: "nearest",
|
||||
intersect: 0,
|
||||
position: "nearest"
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 120,
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9e9e9e"
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("chartLinePurple").getContext("2d");
|
||||
|
||||
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
|
||||
gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
|
||||
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
|
||||
|
||||
var data = {
|
||||
labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
||||
datasets: [{
|
||||
label: "Data",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
borderColor: '#d048b6',
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: '#d048b6',
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: '#d048b6',
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: [80, 100, 70, 80, 120, 80],
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: gradientChartOptionsConfigurationWithTooltipPurple
|
||||
});
|
||||
|
||||
|
||||
var ctxGreen = document.getElementById("chartLineGreen").getContext("2d");
|
||||
|
||||
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(66,134,121,0.15)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(66,134,121,0.0)'); //green colors
|
||||
gradientStroke.addColorStop(0, 'rgba(66,134,121,0)'); //green colors
|
||||
|
||||
var data = {
|
||||
labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
borderColor: '#00d6b4',
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: '#00d6b4',
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: '#00d6b4',
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: [90, 27, 60, 12, 80],
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = new Chart(ctxGreen, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: gradientChartOptionsConfigurationWithTooltipGreen
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
|
||||
var chart_data = [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100];
|
||||
|
||||
|
||||
var ctx = document.getElementById("chartBig1").getContext('2d');
|
||||
|
||||
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
|
||||
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chart_labels,
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
borderColor: '#d346b1',
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: '#d346b1',
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: '#d346b1',
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: chart_data,
|
||||
}]
|
||||
},
|
||||
options: gradientChartOptionsConfigurationWithTooltipPurple
|
||||
};
|
||||
var myChartData = new Chart(ctx, config);
|
||||
$("#0").click(function() {
|
||||
var data = myChartData.config.data;
|
||||
data.datasets[0].data = chart_data;
|
||||
data.labels = chart_labels;
|
||||
myChartData.update();
|
||||
});
|
||||
$("#1").click(function() {
|
||||
var chart_data = [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120];
|
||||
var data = myChartData.config.data;
|
||||
data.datasets[0].data = chart_data;
|
||||
data.labels = chart_labels;
|
||||
myChartData.update();
|
||||
});
|
||||
|
||||
$("#2").click(function() {
|
||||
var chart_data = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
|
||||
var data = myChartData.config.data;
|
||||
data.datasets[0].data = chart_data;
|
||||
data.labels = chart_labels;
|
||||
myChartData.update();
|
||||
});
|
||||
|
||||
|
||||
var ctx = document.getElementById("CountryChart").getContext("2d");
|
||||
|
||||
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||
|
||||
gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
|
||||
gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
|
||||
gradientStroke.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
|
||||
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
data: {
|
||||
labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
|
||||
datasets: [{
|
||||
label: "Countries",
|
||||
fill: true,
|
||||
backgroundColor: gradientStroke,
|
||||
hoverBackgroundColor: gradientStroke,
|
||||
borderColor: '#1f8ef1',
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
data: [53, 20, 10, 80, 100, 45],
|
||||
}]
|
||||
},
|
||||
options: gradientBarChartConfiguration
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
initGoogleMaps: function() {
|
||||
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
||||
var mapOptions = {
|
||||
zoom: 13,
|
||||
center: myLatlng,
|
||||
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
||||
styles: [{
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#1d2c4d"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#8ec3b9"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [{
|
||||
"color": "#1a3646"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "administrative.country",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": [{
|
||||
"color": "#4b6878"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "administrative.land_parcel",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#64779e"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "administrative.province",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": [{
|
||||
"color": "#4b6878"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape.man_made",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": [{
|
||||
"color": "#334e87"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape.natural",
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#023e58"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#283d6a"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#6f9ba5"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [{
|
||||
"color": "#1d2c4d"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi.park",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"color": "#023e58"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi.park",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#3C7680"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#304a7d"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#98a5be"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [{
|
||||
"color": "#1d2c4d"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#2c6675"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"color": "#9d2a80"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": [{
|
||||
"color": "#9d2a80"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#b0d5ce"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [{
|
||||
"color": "#023e58"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#98a5be"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [{
|
||||
"color": "#1d2c4d"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit.line",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"color": "#283d6a"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit.station",
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#3a4762"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "geometry",
|
||||
"stylers": [{
|
||||
"color": "#0e1626"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#4e6d70"
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: myLatlng,
|
||||
title: "Hello World!"
|
||||
});
|
||||
|
||||
// To add the marker to the map, call setMap();
|
||||
marker.setMap(map);
|
||||
},
|
||||
|
||||
showNotification: function(from, align) {
|
||||
color = Math.floor((Math.random() * 4) + 1);
|
||||
|
||||
$.notify({
|
||||
icon: "tim-icons icon-bell-55",
|
||||
message: "Welcome to <b>Black Dashboard</b> - a beautiful freebie for every web developer."
|
||||
|
||||
}, {
|
||||
type: type[color],
|
||||
timer: 8000,
|
||||
placement: {
|
||||
from: from,
|
||||
align: align
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user