Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
hdastageeri
hft_awado_app
Commits
04113cc2
Commit
04113cc2
authored
Nov 26, 2019
by
Ratnadeep Rajendra Kharade
Browse files
Added feature to show 3d maps and terrain view
parent
b1c3da10
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/app/home/home.page.html
View file @
04113cc2
...
...
@@ -3,13 +3,19 @@
<ion-buttons
slot=
"start"
>
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
<ion-title
slot=
"start"
>
Home
</ion-title>
<ion-item
class=
"checkbox-wrapper"
>
<!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
<ion-label
class=
"text"
(click)=
"enable3DMaps()"
>
3D
</ion-label>
</ion-item>
</ion-toolbar>
</ion-header>
<ion-content>
<div
#map
style=
"width: 100%; height: 100%"
id=
"mapContainer"
></div>
<div
#mapElement2d
style=
"width: 100%; height: 100%"
id=
"mapContainer"
*ngIf=
"!is3DChecked"
></div>
<div
#mapElement3d
style=
"width: 100%; height: 100%"
id=
"mapContainer"
*ngIf=
"is3DChecked"
></div>
<!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
</ion-content>
<ion-footer>
...
...
src/app/home/home.page.scss
View file @
04113cc2
...
...
@@ -84,3 +84,15 @@ ion-footer{
padding-top
:
10px
;
}
}
.checkbox-wrapper
{
text-align
:
right
;
float
:
right
;
ion-label
{
margin-left
:
5px
;
}
}
.mapContainer
{
background-color
:
white
;
}
src/app/home/home.page.ts
View file @
04113cc2
...
...
@@ -9,16 +9,26 @@ declare var H: any;
export
class
HomePage
{
private
platform
:
any
;
private
map
:
any
;
private
currentLocation
=
{
lat
:
0
,
lng
:
0
};
private
currentLocation
=
{
lat
:
0
,
lng
:
0
};
public
tempArr
=
[
1
,
2
];
public
locationArr
=
[{
lat
:
48.778409
,
lng
:
9.179252
},
{
lat
:
48.780926
,
lng
:
9.173456
},
{
lat
:
48.775174
,
lng
:
9.175459
},
{
lat
:
48.793704
,
lng
:
9.191112
}]
public
is3DChecked
=
false
;
public
tempArr
=
[
1
,
2
];
public
locationArr
=
[{
lat
:
48.778409
,
lng
:
9.179252
},
{
lat
:
48.780926
,
lng
:
9.173456
},
{
lat
:
48.775174
,
lng
:
9.175459
},
{
lat
:
48.793704
,
lng
:
9.191112
}]
@
ViewChild
(
"
mapElement2d
"
,
{
static
:
false
})
public
mapElement2d
:
ElementRef
;
@
ViewChild
(
"
mapElement3d
"
,
{
static
:
false
})
public
mapElement3d
:
ElementRef
;
//@ViewChild("mapElement", { static: false })
//public mapElement: ElementRef;
@
ViewChild
(
"
map
"
,
{
static
:
false
})
public
mapElement
:
ElementRef
;
public
constructor
(
private
geolocation
:
Geolocation
)
{
this
.
platform
=
new
H
.
service
.
Platform
({
'
apikey
'
:
'
tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k
'
...
...
@@ -29,30 +39,62 @@ export class HomePage {
public
ngAfterViewInit
()
{
setTimeout
(()
=>
{
this
.
loadmap
();
this
.
loadmap
(
"
2D
"
);
},
1000
);
window
.
addEventListener
(
'
resize
'
,
()
=>
this
.
map
.
getViewPort
().
resize
());
}
loadmap
()
{
loadmap
(
style
)
{
// Obtain the default map types from the platform object
var
mapStyle
=
"
raster
"
;
var
mapElement
=
"
mapElement2d
"
;
if
(
style
===
"
3D
"
)
{
mapStyle
=
"
vector
"
;
mapElement
=
"
mapElement3d
"
;
}
var
defaultLayers
=
this
.
platform
.
createDefaultLayers
();
this
.
map
=
new
H
.
Map
(
this
.
mapElement
.
nativeElement
,
defaultLayers
.
vector
.
normal
.
map
,
this
[
mapElement
]
.
nativeElement
,
defaultLayers
[
mapStyle
]
.
normal
.
map
,
{
zoom
:
16
,
center
:
{
lat
:
40.757601
,
lng
:
-
73.985328
},
zoom
:
17
,
pixelRatio
:
window
.
devicePixelRatio
||
1
}
);
var
behavior
=
new
H
.
mapevents
.
Behavior
(
new
H
.
mapevents
.
MapEvents
(
this
.
map
));
var
ui
=
H
.
ui
.
UI
.
createDefault
(
this
.
map
,
defaultLayers
);
ui
.
removeControl
(
"
mapsettings
"
);
// create custom one
var
ms
=
new
H
.
ui
.
MapSettingsControl
({
baseLayers
:
[{
label
:
"
3D
"
,
layer
:
defaultLayers
.
vector
.
normal
.
map
},{
label
:
"
normal
"
,
layer
:
defaultLayers
.
raster
.
normal
.
map
},
{
label
:
"
satellite
"
,
layer
:
defaultLayers
.
raster
.
satellite
.
map
},
{
label
:
"
terrain
"
,
layer
:
defaultLayers
.
raster
.
terrain
.
map
}
],
layers
:
[{
label
:
"
layer.traffic
"
,
layer
:
defaultLayers
.
vector
.
normal
.
traffic
},
{
label
:
"
layer.incidents
"
,
layer
:
defaultLayers
.
vector
.
normal
.
trafficincidents
}
]
});
ui
.
addControl
(
"
customized
"
,
ms
);
var
mapSettings
=
ui
.
getControl
(
'
customized
'
);
var
zoom
=
ui
.
getControl
(
'
zoom
'
);
mapSettings
.
setAlignment
(
'
top-right
'
);
zoom
.
setAlignment
(
'
top-left
'
);
this
.
getLocation
(
this
.
map
);
var
img
=
[
'
../../../assets/images/ic_high.png
'
,
'
../../../assets/images/ic_medium.png
'
,
'
../../../assets/images/ic_low.png
'
];
for
(
let
i
=
0
;
i
<
this
.
locationArr
.
length
;
i
++
){
this
.
addMarker
(
this
.
locationArr
[
i
].
lat
,
this
.
locationArr
[
i
].
lng
,
img
[
i
%
3
]);
var
img
=
[
'
../../../assets/images/ic_high.png
'
,
'
../../../assets/images/ic_medium.png
'
,
'
../../../assets/images/ic_low.png
'
];
for
(
let
i
=
0
;
i
<
this
.
locationArr
.
length
;
i
++
)
{
this
.
addMarker
(
this
.
locationArr
[
i
].
lat
,
this
.
locationArr
[
i
].
lng
,
img
[
i
%
3
]);
}
}
...
...
@@ -76,7 +118,7 @@ export class HomePage {
}
moveMapToGiven
(
map
,
lat
,
lng
)
{
var
icon
=
new
H
.
map
.
Icon
(
'
../../../assets/images/icon_map_currentLocation.png
'
);
// Create a marker using the previously instantiated icon:
var
marker
=
new
H
.
map
.
Marker
({
lat
:
lat
,
lng
:
lng
},
{
icon
:
icon
});
...
...
@@ -86,13 +128,13 @@ export class HomePage {
map
.
setCenter
({
lat
:
lat
,
lng
:
lng
});
}
expandBikeList
(){
for
(
let
i
=
0
;
i
<
20
;
i
++
)
{
this
.
tempArr
.
push
(
i
+
3
);
expandBikeList
()
{
for
(
let
i
=
0
;
i
<
20
;
i
++
)
{
this
.
tempArr
.
push
(
i
+
3
);
}
}
addMarker
(
lat
,
lng
,
img
){
addMarker
(
lat
,
lng
,
img
)
{
var
icon
=
new
H
.
map
.
Icon
(
img
);
// Create a marker using the previously instantiated icon:
var
marker
=
new
H
.
map
.
Marker
({
lat
:
lat
,
lng
:
lng
},
{
icon
:
icon
});
...
...
@@ -100,4 +142,20 @@ export class HomePage {
// Add the marker to the map:
this
.
map
.
addObject
(
marker
);
}
toggle3DMaps
()
{
console
.
log
(
this
.
is3DChecked
);
if
(
!
this
.
is3DChecked
)
{
setTimeout
(()
=>
{
this
.
loadmap
(
"
3D
"
);
},
1000
);
}
}
enable3DMaps
()
{
this
.
is3DChecked
=
true
;
setTimeout
(()
=>
{
this
.
loadmap
(
"
3D
"
);
},
100
);
}
}
src/index.html
View file @
04113cc2
...
...
@@ -17,6 +17,8 @@
<!-- add to homescreen for ios -->
<meta
name=
"apple-mobile-web-app-capable"
content=
"yes"
/>
<meta
name=
"apple-mobile-web-app-status-bar-style"
content=
"black"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"https://js.api.here.com/v3/3.1/mapsjs-ui.css"
/>
</head>
<body>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment