mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
buble maps and line maps style fixe re the new design changes
This commit is contained in:
parent
cb6a577b47
commit
d689652845
3 changed files with 35 additions and 26 deletions
|
|
@ -1,12 +1,16 @@
|
||||||
import {Injectable} from '@angular/core';
|
import {Injectable} from '@angular/core';
|
||||||
import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
|
import {BaThemeConfigProvider, layoutPaths} from '../../../../theme';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class BubbleMapsService {
|
export class BubbleMapsService {
|
||||||
|
|
||||||
getData() {
|
constructor(private _baConfig:BaThemeConfigProvider) {
|
||||||
|
}
|
||||||
|
|
||||||
|
getData() {
|
||||||
|
let layoutColors = this._baConfig.get().colors;
|
||||||
|
let latlong = {};
|
||||||
|
|
||||||
var latlong = {};
|
|
||||||
latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
|
latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
|
||||||
latlong['AE'] = {'latitude': 24, 'longitude': 54};
|
latlong['AE'] = {'latitude': 24, 'longitude': 54};
|
||||||
latlong['AF'] = {'latitude': 33, 'longitude': 65};
|
latlong['AF'] = {'latitude': 33, 'longitude': 65};
|
||||||
|
|
@ -248,7 +252,7 @@ export class BubbleMapsService {
|
||||||
latlong['ZM'] = {'latitude': -15, 'longitude': 30};
|
latlong['ZM'] = {'latitude': -15, 'longitude': 30};
|
||||||
latlong['ZW'] = {'latitude': -20, 'longitude': 30};
|
latlong['ZW'] = {'latitude': -20, 'longitude': 30};
|
||||||
|
|
||||||
var mapData = [
|
let mapData = [
|
||||||
{'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': layoutColors.primaryDark},
|
{'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': layoutColors.primaryDark},
|
||||||
{'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': layoutColors.warning},
|
{'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': layoutColors.warning},
|
||||||
{'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': layoutColors.danger},
|
{'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': layoutColors.danger},
|
||||||
|
|
@ -426,7 +430,7 @@ export class BubbleMapsService {
|
||||||
, max = -Infinity;
|
, max = -Infinity;
|
||||||
|
|
||||||
// get min and max values
|
// get min and max values
|
||||||
for (var i = 0; i < mapData.length; i++) {
|
for (let i = 0; i < mapData.length; i++) {
|
||||||
var value = mapData[i].value;
|
var value = mapData[i].value;
|
||||||
if (value < min) {
|
if (value < min) {
|
||||||
min = value;
|
min = value;
|
||||||
|
|
@ -446,16 +450,16 @@ export class BubbleMapsService {
|
||||||
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;
|
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;
|
||||||
|
|
||||||
// create circle for each country
|
// create circle for each country
|
||||||
for (var i = 0; i < mapData.length; i++) {
|
for (let i = 0; i < mapData.length; i++) {
|
||||||
var dataItem = mapData[i];
|
let dataItem = mapData[i];
|
||||||
var value = dataItem.value;
|
let value = dataItem.value;
|
||||||
// calculate size of a bubble
|
// calculate size of a bubble
|
||||||
var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
|
let square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
|
||||||
if (square < minSquare) {
|
if (square < minSquare) {
|
||||||
square = minSquare;
|
square = minSquare;
|
||||||
}
|
}
|
||||||
var size = Math.sqrt(square / (Math.PI * 2));
|
let size = Math.sqrt(square / (Math.PI * 2));
|
||||||
var id = dataItem.code;
|
let id = dataItem.code;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
import {Injectable} from '@angular/core';
|
import {Injectable} from '@angular/core';
|
||||||
|
|
||||||
import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
|
import {BaThemeConfigProvider, layoutPaths} from '../../../../theme';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class LineMapsService {
|
export class LineMapsService {
|
||||||
|
|
||||||
|
|
||||||
|
constructor(private _baConfig:BaThemeConfigProvider) {
|
||||||
|
}
|
||||||
|
|
||||||
getData() {
|
getData() {
|
||||||
|
let layoutColors = this._baConfig.get().colors;
|
||||||
|
|
||||||
// svg path for target icon
|
// svg path for target icon
|
||||||
let targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
|
let targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
|
||||||
|
|
@ -75,16 +79,16 @@ export class LineMapsService {
|
||||||
top: 45,
|
top: 45,
|
||||||
labelShiftY: 5,
|
labelShiftY: 5,
|
||||||
labelShiftX: 5,
|
labelShiftX: 5,
|
||||||
color: layoutColors.default,
|
color: layoutColors.defaultText,
|
||||||
labelColor: layoutColors.default,
|
labelColor: layoutColors.defaultText,
|
||||||
labelRollOverColor: layoutColors.default,
|
labelRollOverColor: layoutColors.defaultText,
|
||||||
labelFontSize: 20
|
labelFontSize: 20
|
||||||
}, {
|
}, {
|
||||||
label: 'show flights from Vilnius',
|
label: 'show flights from Vilnius',
|
||||||
left: 106,
|
left: 106,
|
||||||
top: 70,
|
top: 70,
|
||||||
labelColor: layoutColors.default,
|
labelColor: layoutColors.defaultText,
|
||||||
labelRollOverColor: layoutColors.default,
|
labelRollOverColor: layoutColors.defaultText,
|
||||||
labelFontSize: 11,
|
labelFontSize: 11,
|
||||||
linkToObject: 'vilnius'
|
linkToObject: 'vilnius'
|
||||||
} ]
|
} ]
|
||||||
|
|
@ -143,16 +147,16 @@ export class LineMapsService {
|
||||||
top: 45,
|
top: 45,
|
||||||
labelShiftY: 5,
|
labelShiftY: 5,
|
||||||
labelShiftX: 5,
|
labelShiftX: 5,
|
||||||
color: layoutColors.default,
|
color: layoutColors.defaultText,
|
||||||
labelColor: layoutColors.default,
|
labelColor: layoutColors.defaultText,
|
||||||
labelRollOverColor: layoutColors.default,
|
labelRollOverColor: layoutColors.defaultText,
|
||||||
labelFontSize: 20
|
labelFontSize: 20
|
||||||
}, {
|
}, {
|
||||||
label: 'show flights from London',
|
label: 'show flights from London',
|
||||||
left: 106,
|
left: 106,
|
||||||
top: 70,
|
top: 70,
|
||||||
labelColor: layoutColors.default,
|
labelColor: layoutColors.defaultText,
|
||||||
labelRollOverColor: layoutColors.default,
|
labelRollOverColor: layoutColors.defaultText,
|
||||||
labelFontSize: 11,
|
labelFontSize: 11,
|
||||||
linkToObject: 'london'
|
linkToObject: 'london'
|
||||||
} ]
|
} ]
|
||||||
|
|
@ -250,15 +254,16 @@ export class LineMapsService {
|
||||||
},
|
},
|
||||||
|
|
||||||
imagesSettings: {
|
imagesSettings: {
|
||||||
color: layoutColors.warningBg,
|
color: layoutColors.warningLight,
|
||||||
selectedColor: layoutColors.warning
|
selectedColor: layoutColors.warning
|
||||||
},
|
},
|
||||||
|
|
||||||
linesSettings: {
|
linesSettings: {
|
||||||
color: layoutColors.warningBg,
|
color: layoutColors.warningLight,
|
||||||
alpha: 0.8
|
alpha: 0.8
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
backgroundZoomsToTop: true,
|
backgroundZoomsToTop: true,
|
||||||
linesAboveImages: true,
|
linesAboveImages: true,
|
||||||
|
|
||||||
|
|
|
||||||
BIN
src/assets/img/theme/vendor/leaflet/marker-shadow.png
vendored
Normal file
BIN
src/assets/img/theme/vendor/leaflet/marker-shadow.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 797 B |
Loading…
Add table
Add a link
Reference in a new issue