Angular-google-maps: Adding Image map types

Hi Carl,

I am trying to do a similar thing, load some custom WMS overlays served from an external MapServer cluster, but I am stuck because I don't know how to get a reference to the actual googleMap instance in order to add my overlays into the overlayMapTypes collection).

I think there needs to be a way to access the original google.map map instance, by exposing it through the GoogleMapsAPIWrapper ?

This is my approach (so far)...in the constructor of MyComponent.ts

`var overlayMap = null;

    // Getting a handle on the GoogleMaps api namespace
    if ((<any>window).google || (<any>window).google.maps) {
        const gm = (<any>window).google.maps;

        if (layers.length > 0) {
            var overlayMapOptions = {
                getTileUrl(coord, zoom) {
                    var url = this.loadBalanceWms() + "/mapserver.exe?Map=../mapfile/xxx.map";
                    url += "&mode=tile";
                    url += "&tile=" + coord.x + "+" + coord.y + "+" + zoom;
                    url += "&tilemode=gmap";
                    url += "&layers=" + layers; //WMS layers
                    url += "&WIDTH=256";
                    url += "&HEIGHT=256";
                    return url;

                },
                tileSize: new gm.Size(256, 256),
                isPng: true,
                name: "WMSOverlay"
            };
            overlayMap = new gm.ImageMapType(overlayMapOptions);

            // Breaks here
            this._mapsWrapper.getMap()
                .then(a => {
                        (<any>a).overlayMapTypes.push(overlayMap);
                    },
                    f => {
                        window.console.log(f);
                    });

        }

    };`

@anaratz Is that working what you've done?? To create a Tiled custom map

No it does not work...
...because the overlayMapTypes collection does not exist on the interface mapTypes.GoogleMap, nor can I find a way to access the underlying google.maps.Map instance

@anaratz so there is no solution for this yet?

No. Not yet

@anaratz I have it working, but i was just asking a question at the start of this issue about how to structure my code, then i will do a PR, should i just do a PR and see how it goes?

@carl09 can you show us how you have fixed it?

@carl09 yes please Carl.

Hi @smgjreinieren, @anaratz i have updated my PR and created a demo

http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

PR: https://github.com/SebastianM/angular2-google-maps/pull/345

any feedback would be great

@carl09 do you also made that in typescript?

@smgjreinieren Yep it is all done in type script

@carl09 Ohhhh now I see sorry! Goodjob! Thanks

I am having trouble with the "clang:check" task, i am just going to try updating node from v4 to v6 and see if it fixes it, it makes ya really unsure when pushing changes

@carl09 But there is no custom map type?

@smgjreinieren i was using "Open Street Maps" in the plunker to display the changes, does it not work for you, or is it not what you meant?

Like this example: https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

I just seen your other question, so i under stand what you mean now

@carl09 I want to set an own image as Map type, is "Open Street Maps" an Image which create a custom map type

@smgjreinieren do you have a geo coded image? or is just a standard image file?

you can use a tool like http://www.qgis.org/en/site/ which and geo code images, and also create tiles so that you can use them for google maps

@carl09 Hmm it seems I can not use it! Can you maybe convert the image for me?

And why does your basic setup nor recognize the MapTypeId from 'angular2-google-maps/core'? Probably because it has no core I see, but how do I import it than from your setup: https://github.com/carl09/angular2-google-maps-example

Hi @smgjreinieren I updated my sample code in that repo if you want to up date it.
what editor are you using to edit? i am using VS Code and it seams to know the referances if that helps

@carl09 Thanks mate! But still cant get the qgis working for mac! Could I maybe send you the image, it is only a small part of the world map is that also possible?

Like this: http://postimg.org/image/6okpwebsb/

@carl09 is it possible to use image from local folder? instead of online

Hi

Yes you can, either you can host them in your node instance, just like you are hosting your css and js files, but i guess you could also use file:// and point it locally, but not sure how well this would work

Is it possible to disableDefaultUI in the constructor? Because it is not recognising it like this:

constructor(){ this.imageMapOptions = { getTileUrl: (coord: ImageMapTypeCoord, zoom: number) => { returnhttp://www.sylvanreinieren.com/tiles/${zoom}/${coord.x}/${coord.y}.png }, tileSize: { height: 256, width: 256 }, maxZoom: 16, minZoom: 12, radius: 1738000, name: 'linZ', disableDefaultUI: true, alt: 'LINZ Topo Maps' }; }

Any progress on this feature? I just started looking at angular2-google-maps a couple of days ago and it looks like it will solve what I want to add in my application, but I really need to replace the Google Maps maps with some more detailed maps from the Norwegian "Kartverket".

@carl09 sorry for the late answer...so much todo currently. To be consistent with the other elements, we should use separate attributes you can bind to, so no single [options]. Are you OK with that?

+1 bump, would love to use this feature

Has this custom WMS layer feature ported into the new AGM?

So there's no way fetch an image from a URL and display that on the map?

@sneckelmann we've tryed out much but in the end were now using base encoded svgs for the markers .. not the best solution but it works

is this feature is updated in agm-maps?

@SebastianM
Just like this plunkr
http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

is map overlays are implemented in AGM?

@carl09 when I replaced openstreetmap with openweathermap API, the tile was replacing the map tile. Can we morph those tiles?

I wanted to implement such kind of thing with AGM

https://jsfiddle.net/601oqwq2/221/

@SebastianM the feature is pending for a long time, can we get some idea about referencing the internal google map instance, so that we can do at least some workaround till the feature gets an update from your side?

I found something on #1423, let me also think something ;P

@SebastianM
A workaround solution for the above scenario

https://github.com/er-shrey/AGM-Openweather-Integration

@carl09 have a look over it

I think the feature request should be closed as there is a simple workaround for it.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.