Commit 04113cc2 authored by Ratnadeep Rajendra Kharade's avatar Ratnadeep Rajendra Kharade
Browse files

Added feature to show 3d maps and terrain view

parent b1c3da10
Showing with 102 additions and 24 deletions
+102 -24
......@@ -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>
......
......@@ -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;
}
......@@ -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);
}
}
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment