You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have done a quick and dirty test page that uses a GoogleMapsOverlay along with an IconLayer which works quite well with this code:
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY&v=beta&map_ids=MAP_ID"></script>
<script>
const defaultCenter = {lat: 47, lng: 2};
const defaultZoom = 5;
function loadAndRenderGoogle(container) {
const map = new google.maps.Map(container, {
center: defaultCenter,
zoom: defaultZoom,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false,
tilt: 0
});
const ICON_MAPPING = {
star: {x: 0, y: 0, width: 240, height: 240, mask: false}
};
const data = [ {} ]; // must have data, as an array. Because we just want one marker, there is only one item. This item is empty because we never access its properties in the 'd =>' functions
const iconLayer = new deck.IconLayer({
id: 'icon-star-layer',
data,
pickable: false,
iconAtlas: 'star.png',
iconMapping: ICON_MAPPING,
getIcon: d => 'star',
sizeScale: 10,
getPosition: d => {
return [defaultCenter.lng, defaultCenter.lat, 10];
},
getSize: d => 10,
});
const overlay = new deck.GoogleMapsOverlay({
layers: [iconLayer]
});
overlay.setMap(map);
}
</script>
This gives me the following nice output:
Now, the code above was a proof of concept to experiment with google maps and deck.gl but the final target is an angular component written with typescript.
I have thus reproduced the above code inside my component ts file:
import {ChangeDetectionStrategy, Component, OnInit, Renderer2, Inject} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {} from '@angular/google-maps';
import {GoogleMapsOverlay} from '@deck.gl/google-maps';
import {GeoJsonLayer, IconLayer} from '@deck.gl/layers';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-my-selector',
templateUrl: './my-selector.component.html'
})
export class MyComponent implements OnInit {
constructor(
private _renderer2: Renderer2,
@Inject(DOCUMENT) private _document: Document
) { }
private overlay: GoogleMapsOverlay = undefined;
private map: google.maps.Map = undefined;
private defaultCenter = {lat: 47, lng: 2};
private defaultZoom: number = 5;
public ngOnInit(): void {
let script = this._renderer2.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY&v=beta&map_ids=MAP_ID";
this._renderer2.appendChild(this._document.body, script);
// Must create map after the script has been loaded
script.onload = () => {
this.map = new google.maps.Map(document.getElementById("map"), {
center: this.defaultCenter,
zoom: this.defaultZoom,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false,
tilt: 0
});
const ICON_MAPPING = {
star: {x: 0, y: 0, width: 240, height: 240, mask: false}
};
const data = [ {} ]; // must have data, as an array. Because we just want one marker, there is only one item. This item is empty because we never access its properties in the 'd =>' functions
const iconLayer = new IconLayer({
id: 'icon-star-layer',
data,
pickable: false,
iconAtlas: 'star.png',
iconMapping: ICON_MAPPING,
getIcon: d => 'star',
sizeScale: 10,
getPosition: d => {
return [this.defaultCenter.lng, this.defaultCenter.lat, 10];
},
getSize: d => 10,
});
this.overlay = new GoogleMapsOverlay({
layers: [iconLayer]
});
this.overlay.setMap(this.map);
}
}
}
I believe this is very similar to the "pure JS" code above, but sadly it does not work, the icon is not shown, only a black square is:
This has been tested with Firefox, and the developer console does not show any error.
Clearly, I have made a mistake somewhere, but I can't figure out where.
Any suggestion is most welcome.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello,
I have done a quick and dirty test page that uses a
GoogleMapsOverlay
along with anIconLayer
which works quite well with this code:This gives me the following nice output:
![image](https://user-images.githubusercontent.com/1314739/156571518-8869bb6a-a7eb-44c4-8b11-ab27843ce5e8.png)
Now, the code above was a proof of concept to experiment with google maps and deck.gl but the final target is an angular component written with typescript.
I have thus reproduced the above code inside my component
ts
file:I believe this is very similar to the "pure JS" code above, but sadly it does not work, the icon is not shown, only a black square is:
This has been tested with Firefox, and the developer console does not show any error.
Clearly, I have made a mistake somewhere, but I can't figure out where.
Any suggestion is most welcome.
Beta Was this translation helpful? Give feedback.
All reactions