Custom Google map overlays

[coffeemonster]

Hi everyone

I am new to Sencha Touch and I've run into a bit of trouble with which I am hoping you fine folk might be able to help me out.

I have created a custom map overlay for a google map following the demo on GeoJasons webpage (http://geojason.info/demos/), using GeoServer to create a custom WMS tile layer

This is the script used:

<script type="text/javascript">var map;
function Init(){
    /* Create Map */
    map = new google.maps.Map(document.getElementById('map_canvas'), {
         zoom: 12,
         center: new google.maps.LatLng(55.689146, 12.387085),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });
            
    /* Create ImageMapType */
    var imageMapTypeOptions = {
        getTileUrl: function(coord,zoom){
              return 'http://localhost:8081/geoserver/gwc/service/gmaps?layers=CUSTOM&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
    },
     tileSize: new google.maps.Size(256, 256),
     isPng: true,
     opacity: 0.25
    }


    var tiledImageMap = new google.maps.ImageMapType(imageMapTypeOptions);
    
    /* Insert ImageMap into overlayMapTypes collection of map */
    map.overlayMapTypes.insertAt(0,tiledImageMap);
}
    </script>

This code gives me a Google map with my custom "CUSTOM" WMS tile layer displayed on top.

What I would like to do, is to bring this into Sencha touch, however I am uncertain of how to add in code written directly for Google maps API v3 ?

What I am hoping to accomplish is very similar to what Alper Dincer did with http://www.extmap.com/touch/), even though I can only get his KML (marker layer) to work at present.

Hope I am making some sense otherwise please tell me and I will try to be more specific.

Kind regards
Peter -monster

[NickT]

I would suggest trying something along these lines. Create a custom panel to contain your map. Use the map xtype and furnish the mapOptions that you require. You can add the overlay logic after map render...

Ext.namespace('Ext.ux');

Ext.ux.CustomComponent = Ext.extend(Ext.Panel, {
    height: 500,
    width: 500,
    listeners: {
        el: {
            drag: { fn: function() {
            } }
        }
    },
    initComponent: function() {
        /* Create Map */
        this.items = [
            {
                id: this.id + '_map',
                xtype: 'map',
                mapOptions: {
                    zoom: 12,
                    center: new google.maps.LatLng(55.689146, 12.387085),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                },
                listeners:{
                    'maprender': this.onMapRender
                },
                useCurrentLocation: false
            }
        ];
        Ext.ux.CustomComponent.superclass.initComponent.call(this);
    },
    onMapRender: function(extmap, map) {
        /* Create ImageMapType */
        var imageMapTypeOptions = {
            getTileUrl: function(coord, zoom) {
                return 'http://localhost:8081/geoserver/gwc/service/gmaps?layers=CUSTOM&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
            },
            tileSize: new google.maps.Size(256, 256),
            isPng: true,
            opacity: 0.25
        }




        var tiledImageMap = new google.maps.ImageMapType(imageMapTypeOptions);


        /* Insert ImageMap into overlayMapTypes collection of map */
        map.overlayMapTypes.insertAt(0, tiledImageMap);
    }
});
Ext.reg('customcomponent', Ext.ux.CustomComponent);

[NickT]

by the way, onMapRender's 2 params are the ext map object followed by the actual google map...

and the drag listener on the outer panel will allow you to be able to drag around inside the map

[coffeemonster]

Thanks NickT

I will definitely give this a try tomorrow, I'll let you know if I get it working

[coffeemonster]

Hi again,

After messing around a little with NickTs code we finally got it working... even if we didn't do it the way NickT intended

The following code gives us a simple Sencha Touch Google map, with a custom WMS tiled overlay from our GeoServer (using GeoWebCache)

Ext.setup({    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {


	map = new Ext.Map({


            mapOptions : {
                center : new google.maps.LatLng(55.676033, 12.568923),  //Copenhagen, Denmark
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
            },


            listeners : {
				maprender: function(extmap, map) {
				/* Create ImageMapType */
				var imageMapTypeOptions = {
						getTileUrl: function(coord, zoom) {
						return 'http://localhost:8081/geoserver/gwc/service/gmaps?layers=LOL&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
						},
				tileSize: new google.maps.Size(256, 256),
				isPng: true,
				opacity: 0.25
				}


				var tiledImageMap = new google.maps.ImageMapType(imageMapTypeOptions);
				/* Insert ImageMap into overlayMapTypes collection of map */
				map.overlayMapTypes.insertAt(0, tiledImageMap);
				}
            }
        });


        new Ext.Panel({
            fullscreen: true,
            items: [map]
        });


    }
});

If you want to use the code simple change out our WMS url for your own.

Hope someone will find this useful

Kind regards
Peter the -monster

[Ganitai]

Hi!

how can i test your code? I ever used Ext.aplication and I dont really know how to use Ext.setup examples. In wich file should I put your code? I tested it in app.js, but it didnt worked and also in main.js, but then the Console told me that Ext.setup was loaded before.
I really want to use your Example cause I need it a simialar way for my own App.
The Ext.Setup is a general problem for me, a lot of examples using this and I just cant test them by rewrite them for Ext.Application. And sometimes its time-consuming.
Would be thankful for help!