4

I have the following bit of html in my angluar project 

<agm-map ngDraggable [latitude]="latitude" [longitude]="longitude" >
  <agm-marker *ngFor= "let post of locations.results[0].events" [latitude]="post.asnLatitude" [longitude]="post.asnLongitude" [label] ="post"> </agm-marker>
</agm-map>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=013d0299e34c52b6dfb87711021b661295b918ee&callback=initMap"
  type="text/javascript"></script>

This plots my longitude and latitude points on a google map. Over this I wish to have a day night line only using the html.

maybe adding something like:

<script>nite.init(map)</script>

would do the trick

where map is referencing the element somehow.

This plots my google map along with my latitude and longitude points. I wish to add overlay that has the day and night on the map I tried using nite-overlay from github here however this is not for html, but for javascript. My question is is there something I can add to the html with maybe agm-overlay to make day and night position shown on the map. Note that this html will be refreshing every 15seconds on account of changes to the latitude and longitude. So updating the day value should not be a problem. Thx

Edit: I am ok with added things to my components.ts but I would like to keep using the < agm > components for the map with lat and long.

Vladimir_314159
  • 1,457
  • 1
  • 9
  • 21
  • Unless I misunderstand, it looks like you're nearly there with the github overlay you mentioned. Is there a reason why you can't include that javascript in your project? – wiiiiilllllll Jul 09 '18 at 09:22
  • no i just would rather not have to change from using and was wondering if I could do it just in the html – Vladimir_314159 Jul 09 '18 at 12:22
  • 1
    This [answer](https://stackoverflow.com/questions/47461548/angular-2-agm-library-for-google-maps-setting-place-by-place-id) might help. – wiiiiilllllll Jul 09 '18 at 12:52
  • @wiiiiilllllll So I imported nite to to the component.ts and added `(mapReady)="mapReady($event)"` to the html where `mapReady($event: any){nite.init($event);}` but I get the error GooglemapsComponent.html:1 ERROR Error: Nite Overlay: no google.maps detected – Vladimir_314159 Jul 09 '18 at 20:50
  • Sorry, I don't know anything about Angular or agm-map so I can't help much. But maybe change `nite.init($event)` for `nite.init(this)` ? – wiiiiilllllll Jul 10 '18 at 09:12

2 Answers2

1

The nite overlay using the js suggested by you (i.e. https://github.com/rossengeorgiev/nite-overlay) can be successfully used with agm-map using (mapReady)="mapReady($event)".

Apart from the required step for using agm-map (I assume you are able to draw map on your page using agm-map) ensure that you have installed @types/googlemaps

npm install --save @types/googlemaps

And, that you have copied the nite-overlay.js file in you src folder and you have included it in your .angular-cli.json file like this.

...
"scripts": [
        "nite-overlay.js"
      ],
...

Following is the working code.

map.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import {} from '@types/googlemaps';

declare var google: any;
declare var nite: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  lat: number = 26.288644;
  lng: number = 73.021302;
  zoom = 4;

  m: Marker = {lat:this.lat, lng:this.lng};


  constructor(
    private loader: MapsAPILoader,
    private zone: NgZone
    ) { }

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: any) { 
    let m: Marker = {lat:$event.coords.lat, lng:$event.coords.lng};
    this.m = m;
    this.getAddress(m.lat, m.lng, this.setAddress.bind(this));
  }

  markerDragEnd(m: Marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  mapReady($event: any) { 
  nite.init($event);

  }

  ngOnInit() {

  }

}

// just an interface for type safety.
interface Marker {
    lat: number;
    lng: number;
    label?: string;
    draggable?: boolean;
}

map.component.html

<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false" [zoom]="zoom" (mapClick)="mapClicked($event)" (mapReady)="mapReady($event)">
      <agm-marker *ngIf="m" [latitude]="m.lat" [longitude]="m.lng" ></agm-marker>
    </agm-map>

UPDATE ON HOW TO IMPORT js in Angular 6

My above working example code is using angular 5. But CLI projects in angular 6 onwards uses angular.json instead of .angular-cli.json for build and project configuration.

Ref - How to use external JS files in Angular 6 for how you can used external js file in angular 6.

vsoni
  • 2,828
  • 9
  • 13
  • I don't understand why should he copy the js file in the src folder ??? He may just link to the file present in the node_modules folder. This method anyway is already marked by the OP as not working. – Mehdi Benmoha Jul 10 '18 at 13:41
  • @Mehdi Benmoha - If the library is available as a node module and you can install it as a node module than it should not be any problem. Whats important is you must be able to import it into you component so that you can use it in your code. If it is just a single file than you can also keep it in the src folder or any of its sub folders and than you can use it with .angular-cli.json. The main objective is you should be able to access the `var nite` and `var google.maps.Map` in your component. – vsoni Jul 10 '18 at 14:40
  • The code that I have pasted in my answer is working code on my machine. – vsoni Jul 10 '18 at 14:46
  • @vsoni for future reforence if my page was not refreashing every 15 seconds where would I put `nite.refresh()`? – Vladimir_314159 Jul 12 '18 at 14:08
  • @Vladimir_314159 - you can use `setInterval(function, delay);` inside the `mapReady($event: any)` function itself after init, for doing a repeat. Ref - https://stackoverflow.com/questions/3138756/calling-a-function-every-60-seconds for more details. – vsoni Jul 12 '18 at 14:33
  • @vsoni I put `setInterval(nite.refresh(),10000);` after `nite.init($event)` and removed my automated refreshing. And the shadows do not automatically update. I have to hit physically refresh in-order to see the movement. – Vladimir_314159 Jul 12 '18 at 15:06
  • @vsoni upon further investigation I think it fires but only once. – Vladimir_314159 Jul 12 '18 at 15:41
  • @Vladimir_314159 - Try like `setInterval(function() { nite.refresh() }, 10000); // every 10s` as suggested on the readme doc. https://github.com/rossengeorgiev/nite-overlay – vsoni Jul 12 '18 at 15:54
  • I tried that before in its own function but now its working must have done something wrong before. – Vladimir_314159 Jul 12 '18 at 15:56
0

You can use the nite package, you will have to first get the native google maps object from agm like this, in your component.ts:

constructor(private _mapsWrapper:GoogleMapsAPIWrapper){
    _mapsWrapper.getNativeMap().then((map: mapTypes.GoogleMap) => {
      // Here you can use the map object with the nite package
      nite.init(map);
    });
  }

PS: Don't forget the import statements:

import { GoogleMapsAPIWrapper } from '@agm/core';
import * as mapTypes from '@agm/core/services/google-maps-types';
Mehdi Benmoha
  • 3,694
  • 3
  • 23
  • 43