From 2dff3f8ae08bb10f9c1dc3e6ce9fdab0e5244de5 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Tue, 3 May 2016 10:51:59 +0300 Subject: [PATCH] line maps component --- .../bubbleMaps/bubbleMaps.component.ts | 2 +- .../leafletMaps/leafletMaps.component.ts | 2 +- .../pages/maps/components/lineMaps/index.ts | 1 + .../components/lineMaps/lineMaps.component.ts | 55 +++ .../maps/components/lineMaps/lineMaps.html | 4 + .../maps/components/lineMaps/lineMaps.scss | 4 + .../components/lineMaps/lineMaps.service.ts | 444 ++++++++++++++++++ src/app/pages/maps/maps.component.ts | 8 +- src/app/theme/sidebar/sidebar.service.ts | 4 + 9 files changed, 521 insertions(+), 3 deletions(-) create mode 100644 src/app/pages/maps/components/lineMaps/index.ts create mode 100644 src/app/pages/maps/components/lineMaps/lineMaps.component.ts create mode 100644 src/app/pages/maps/components/lineMaps/lineMaps.html create mode 100644 src/app/pages/maps/components/lineMaps/lineMaps.scss create mode 100644 src/app/pages/maps/components/lineMaps/lineMaps.service.ts diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts index e4130654..24d8c0ca 100644 --- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts +++ b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts @@ -1,7 +1,7 @@ import {Component, ViewEncapsulation} from 'angular2/core'; import {BaCard} from '../../../../theme'; -import {layoutColors, layoutPaths} from "../../../../theme/theme.constants"; +import {layoutPaths} from "../../../../theme/theme.constants"; import {BubbleMapsService} from "./bubbleMaps.service"; require('ammap3'); diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts b/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts index 2832a98f..4122b7fd 100644 --- a/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts +++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts @@ -3,7 +3,7 @@ import {BaCard} from '../../../../theme'; import {DOM} from "angular2/src/platform/dom/dom_adapter"; @Component({ - selector: 'google-maps', + selector: 'leaflet-maps', pipes: [], providers: [], // otherwise maps won't work diff --git a/src/app/pages/maps/components/lineMaps/index.ts b/src/app/pages/maps/components/lineMaps/index.ts new file mode 100644 index 00000000..1a7266b0 --- /dev/null +++ b/src/app/pages/maps/components/lineMaps/index.ts @@ -0,0 +1 @@ +export * from './lineMaps.component'; diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.component.ts b/src/app/pages/maps/components/lineMaps/lineMaps.component.ts new file mode 100644 index 00000000..0039f079 --- /dev/null +++ b/src/app/pages/maps/components/lineMaps/lineMaps.component.ts @@ -0,0 +1,55 @@ +import {Component, ViewEncapsulation} from 'angular2/core'; +import {BaCard} from '../../../../theme'; + +import {layoutColors, layoutPaths} from "../../../../theme/theme.constants"; +import {LineMapsService} from "./lineMaps.service"; + +require('ammap3'); +require('ammap3/ammap/maps/js/worldLow'); + +@Component({ + selector: 'line-maps', + pipes: [], + providers: [LineMapsService], + // otherwise maps won't work + encapsulation: ViewEncapsulation.None, + styles: [require('ammap3/ammap/ammap.css'), require('./lineMaps.scss')], + directives: [BaCard], + template: require('./lineMaps.html'), +}) +export class LineMaps { + + constructor(private _lineMapsService:LineMapsService) { + } + + ngAfterViewInit() { + + var map = AmCharts.makeChart('map-lines', { + type: 'map', + theme: this._lineMapsService.getTheme(), + dataProvider: this._lineMapsService.getDataProvider(), + + areasSettings: { + unlistedAreasColor: layoutColors.info + }, + + imagesSettings: { + color: layoutColors.warningBg, + selectedColor: layoutColors.warning + }, + + linesSettings: { + color: layoutColors.warningBg, + alpha: 0.8 + }, + + backgroundZoomsToTop: true, + linesAboveImages: true, + + export: { + 'enabled': true + }, + pathToImages: layoutPaths.images.amMap + }); + } +} diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.html b/src/app/pages/maps/components/lineMaps/lineMaps.html new file mode 100644 index 00000000..7898fd35 --- /dev/null +++ b/src/app/pages/maps/components/lineMaps/lineMaps.html @@ -0,0 +1,4 @@ + +
+ + diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.scss b/src/app/pages/maps/components/lineMaps/lineMaps.scss new file mode 100644 index 00000000..2bb4ae3f --- /dev/null +++ b/src/app/pages/maps/components/lineMaps/lineMaps.scss @@ -0,0 +1,4 @@ +.line-maps { + //TODO: hotfix + height: 320px; +} diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.service.ts b/src/app/pages/maps/components/lineMaps/lineMaps.service.ts new file mode 100644 index 00000000..2e0cd6fc --- /dev/null +++ b/src/app/pages/maps/components/lineMaps/lineMaps.service.ts @@ -0,0 +1,444 @@ +import {Injectable} from 'angular2/core'; +import {layoutColors} from "../../../../theme/theme.constants"; + +@Injectable() +export class LineMapsService { + + theme = { + + themeName: "blur", + + AmChart: { + color: layoutColors.defaultText, + backgroundColor: "#FFFFFF" + }, + + AmCoordinateChart: { + colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg] + }, + + AmStockChart: { + colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg] + }, + + AmSlicedChart: { + colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg], + labelTickColor: "#FFFFFF", + labelTickAlpha: 0.3 + }, + + AmRectangularChart: { + zoomOutButtonColor: '#FFFFFF', + zoomOutButtonRollOverAlpha: 0.15, + zoomOutButtonImage: "lens.png" + }, + + AxisBase: { + axisColor: "#FFFFFF", + axisAlpha: 0.3, + gridAlpha: 0.1, + gridColor: "#FFFFFF" + }, + + ChartScrollbar: { + backgroundColor: "#FFFFFF", + backgroundAlpha: 0.12, + graphFillAlpha: 0.5, + graphLineAlpha: 0, + selectedBackgroundColor: "#FFFFFF", + selectedBackgroundAlpha: 0.4, + gridAlpha: 0.15 + }, + + ChartCursor: { + cursorColor: layoutColors.primary, + color: "#FFFFFF", + cursorAlpha: 0.5 + }, + + AmLegend: { + color: "#FFFFFF" + }, + + AmGraph: { + lineAlpha: 0.9 + }, + GaugeArrow: { + color: "#FFFFFF", + alpha: 0.8, + nailAlpha: 0, + innerRadius: "40%", + nailRadius: 15, + startWidth: 15, + borderAlpha: 0.8, + nailBorderAlpha: 0 + }, + + GaugeAxis: { + tickColor: "#FFFFFF", + tickAlpha: 1, + tickLength: 15, + minorTickLength: 8, + axisThickness: 3, + axisColor: '#FFFFFF', + axisAlpha: 1, + bandAlpha: 0.8 + }, + + TrendLine: { + lineColor: layoutColors.danger, + lineAlpha: 0.8 + }, + + // ammap + AreasSettings: { + alpha: 0.8, + color: layoutColors.info, + colorSolid: layoutColors.primaryDark, + unlistedAreasAlpha: 0.4, + unlistedAreasColor: "#FFFFFF", + outlineColor: "#FFFFFF", + outlineAlpha: 0.5, + outlineThickness: 0.5, + rollOverColor: layoutColors.primary, + rollOverOutlineColor: "#FFFFFF", + selectedOutlineColor: "#FFFFFF", + selectedColor: "#f15135", + unlistedAreasOutlineColor: "#FFFFFF", + unlistedAreasOutlineAlpha: 0.5 + }, + + LinesSettings: { + color: "#FFFFFF", + alpha: 0.8 + }, + + ImagesSettings: { + alpha: 0.8, + labelColor: "#FFFFFF", + color: "#FFFFFF", + labelRollOverColor: layoutColors.primaryDark + }, + + ZoomControl: { + buttonFillAlpha: 0.8, + buttonIconColor: layoutColors.default, + buttonRollOverColor: layoutColors.danger, + buttonFillColor: layoutColors.primaryDark, + buttonBorderColor: layoutColors.primaryDark, + buttonBorderAlpha: 0, + buttonCornerRadius: 0, + gridColor: "#FFFFFF", + gridBackgroundColor: "#FFFFFF", + buttonIconAlpha: 0.6, + gridAlpha: 0.6, + buttonSize: 20 + }, + + SmallMap: { + mapColor: "#000000", + rectangleColor: layoutColors.danger, + backgroundColor: "#FFFFFF", + backgroundAlpha: 0.7, + borderThickness: 1, + borderAlpha: 0.8 + }, + + // the defaults below are set using CSS syntax, you can use any existing css property + // if you don't use Stock chart, you can delete lines below + PeriodSelector: { + color: "#FFFFFF" + }, + + PeriodButton: { + color: "#FFFFFF", + background: "transparent", + opacity: 0.7, + border: "1px solid rgba(0, 0, 0, .3)", + MozBorderRadius: "5px", + borderRadius: "5px", + margin: "1px", + outline: "none", + boxSizing: "border-box" + }, + + PeriodButtonSelected: { + color: "#FFFFFF", + backgroundColor: "#b9cdf5", + border: "1px solid rgba(0, 0, 0, .3)", + MozBorderRadius: "5px", + borderRadius: "5px", + margin: "1px", + outline: "none", + opacity: 1, + boxSizing: "border-box" + }, + + PeriodInputField: { + color: "#FFFFFF", + background: "transparent", + border: "1px solid rgba(0, 0, 0, .3)", + outline: "none" + }, + + DataSetSelector: { + color: "#FFFFFF", + selectedBackgroundColor: "#b9cdf5", + rollOverBackgroundColor: "#a8b0e4" + }, + + DataSetCompareList: { + color: "#FFFFFF", + lineHeight: "100%", + boxSizing: "initial", + webkitBoxSizing: "initial", + border: "1px solid rgba(0, 0, 0, .3)" + }, + + DataSetSelect: { + border: "1px solid rgba(0, 0, 0, .3)", + outline: "none" + } + }; + + getTheme() { + return this.theme; + } + + getDataProvider() { + + // 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'; + // svg path for plane icon + let planeSVG = 'M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z'; + + return { + map: 'worldLow', + linkToObject: 'london', + images: [ { + id: 'london', + svgPath: targetSVG, + title: 'London', + latitude: 51.5002, + longitude: -0.1262, + scale: 1.5, + zoomLevel: 2.74, + zoomLongitude: -20.1341, + zoomLatitude: 49.1712, + + lines: [ { + latitudes: [ 51.5002, 50.4422 ], + longitudes: [ -0.1262, 30.5367 ] + }, { + latitudes: [ 51.5002, 46.9480 ], + longitudes: [ -0.1262, 7.4481 ] + }, { + latitudes: [ 51.5002, 59.3328 ], + longitudes: [ -0.1262, 18.0645 ] + }, { + latitudes: [ 51.5002, 40.4167 ], + longitudes: [ -0.1262, -3.7033 ] + }, { + latitudes: [ 51.5002, 46.0514 ], + longitudes: [ -0.1262, 14.5060 ] + }, { + latitudes: [ 51.5002, 48.2116 ], + longitudes: [ -0.1262, 17.1547 ] + }, { + latitudes: [ 51.5002, 44.8048 ], + longitudes: [ -0.1262, 20.4781 ] + }, { + latitudes: [ 51.5002, 55.7558 ], + longitudes: [ -0.1262, 37.6176 ] + }, { + latitudes: [ 51.5002, 38.7072 ], + longitudes: [ -0.1262, -9.1355 ] + }, { + latitudes: [ 51.5002, 54.6896 ], + longitudes: [ -0.1262, 25.2799 ] + }, { + latitudes: [ 51.5002, 64.1353 ], + longitudes: [ -0.1262, -21.8952 ] + }, { + latitudes: [ 51.5002, 40.4300 ], + longitudes: [ -0.1262, -74.0000 ] + } ], + + images: [ { + label: 'Flights from London', + svgPath: planeSVG, + left: 100, + top: 45, + labelShiftY: 5, + labelShiftX: 5, + color: layoutColors.default, + labelColor: layoutColors.default, + labelRollOverColor: layoutColors.default, + labelFontSize: 20 + }, { + label: 'show flights from Vilnius', + left: 106, + top: 70, + labelColor: layoutColors.default, + labelRollOverColor: layoutColors.default, + labelFontSize: 11, + linkToObject: 'vilnius' + } ] + }, + + { + id: 'vilnius', + svgPath: targetSVG, + title: 'Vilnius', + latitude: 54.6896, + longitude: 25.2799, + scale: 1.5, + zoomLevel: 4.92, + zoomLongitude: 15.4492, + zoomLatitude: 50.2631, + + lines: [ { + latitudes: [ 54.6896, 50.8371 ], + longitudes: [ 25.2799, 4.3676 ] + }, { + latitudes: [ 54.6896, 59.9138 ], + longitudes: [ 25.2799, 10.7387 ] + }, { + latitudes: [ 54.6896, 40.4167 ], + longitudes: [ 25.2799, -3.7033 ] + }, { + latitudes: [ 54.6896, 50.0878 ], + longitudes: [ 25.2799, 14.4205 ] + }, { + latitudes: [ 54.6896, 48.2116 ], + longitudes: [ 25.2799, 17.1547 ] + }, { + latitudes: [ 54.6896, 44.8048 ], + longitudes: [ 25.2799, 20.4781 ] + }, { + latitudes: [ 54.6896, 55.7558 ], + longitudes: [ 25.2799, 37.6176 ] + }, { + latitudes: [ 54.6896, 37.9792 ], + longitudes: [ 25.2799, 23.7166 ] + }, { + latitudes: [ 54.6896, 54.6896 ], + longitudes: [ 25.2799, 25.2799 ] + }, { + latitudes: [ 54.6896, 51.5002 ], + longitudes: [ 25.2799, -0.1262 ] + }, { + latitudes: [ 54.6896, 53.3441 ], + longitudes: [ 25.2799, -6.2675 ] + } ], + + images: [ { + label: 'Flights from Vilnius', + svgPath: planeSVG, + left: 100, + top: 45, + labelShiftY: 5, + labelShiftX: 5, + color: layoutColors.default, + labelColor: layoutColors.default, + labelRollOverColor: layoutColors.default, + labelFontSize: 20 + }, { + label: 'show flights from London', + left: 106, + top: 70, + labelColor: layoutColors.default, + labelRollOverColor: layoutColors.default, + labelFontSize: 11, + linkToObject: 'london' + } ] + }, { + svgPath: targetSVG, + title: 'Brussels', + latitude: 50.8371, + longitude: 4.3676 + }, { + svgPath: targetSVG, + title: 'Prague', + latitude: 50.0878, + longitude: 14.4205 + }, { + svgPath: targetSVG, + title: 'Athens', + latitude: 37.9792, + longitude: 23.7166 + }, { + svgPath: targetSVG, + title: 'Reykjavik', + latitude: 64.1353, + longitude: -21.8952 + }, { + svgPath: targetSVG, + title: 'Dublin', + latitude: 53.3441, + longitude: -6.2675 + }, { + svgPath: targetSVG, + title: 'Oslo', + latitude: 59.9138, + longitude: 10.7387 + }, { + svgPath: targetSVG, + title: 'Lisbon', + latitude: 38.7072, + longitude: -9.1355 + }, { + svgPath: targetSVG, + title: 'Moscow', + latitude: 55.7558, + longitude: 37.6176 + }, { + svgPath: targetSVG, + title: 'Belgrade', + latitude: 44.8048, + longitude: 20.4781 + }, { + svgPath: targetSVG, + title: 'Bratislava', + latitude: 48.2116, + longitude: 17.1547 + }, { + svgPath: targetSVG, + title: 'Ljubljana', + latitude: 46.0514, + longitude: 14.5060 + }, { + svgPath: targetSVG, + title: 'Madrid', + latitude: 40.4167, + longitude: -3.7033 + }, { + svgPath: targetSVG, + title: 'Stockholm', + latitude: 59.3328, + longitude: 18.0645 + }, { + svgPath: targetSVG, + title: 'Bern', + latitude: 46.9480, + longitude: 7.4481 + }, { + svgPath: targetSVG, + title: 'Kiev', + latitude: 50.4422, + longitude: 30.5367 + }, { + svgPath: targetSVG, + title: 'Paris', + latitude: 48.8567, + longitude: 2.3510 + }, { + svgPath: targetSVG, + title: 'New York', + latitude: 40.43, + longitude: -74 + } + ] + }; + } +} diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts index 5f4d7986..d9845f53 100644 --- a/src/app/pages/maps/maps.component.ts +++ b/src/app/pages/maps/maps.component.ts @@ -3,7 +3,8 @@ import {RouteConfig} from 'angular2/router'; import {GoogleMaps} from './components/googleMaps'; import {LeafletMaps} from "./components/leafletMaps"; -import {BubbleMaps} from "./components/bubbleMaps/bubbleMaps.component"; +import {BubbleMaps} from "./components/bubbleMaps"; +import {LineMaps} from "./components/lineMaps"; @Component({ selector: 'maps', @@ -29,6 +30,11 @@ import {BubbleMaps} from "./components/bubbleMaps/bubbleMaps.component"; component: BubbleMaps, path: '/bubble-maps', }, + { + name: 'LineMaps', + component: LineMaps, + path: '/line-maps', + }, ]) export class Maps { diff --git a/src/app/theme/sidebar/sidebar.service.ts b/src/app/theme/sidebar/sidebar.service.ts index aa3fe251..00976d0d 100644 --- a/src/app/theme/sidebar/sidebar.service.ts +++ b/src/app/theme/sidebar/sidebar.service.ts @@ -39,6 +39,10 @@ export class SidebarService { { title: 'Bubble Maps', name: 'BubbleMaps', + }, + { + title: 'Line Maps', + name: 'LineMaps', } ] },