1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    Answers
    1
    coffeemonster is on a distinguished road

      0  

    Default Answered: Custom Google map overlays

    Answered: Custom Google map overlays


    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:

    Code:
    <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

  2. 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)

    Code:
    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

  3. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Vote Rating
    2
    Answers
    27
    NickT is on a distinguished road

      0  

    Default


    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...

    Code:
    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);

  4. #3
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Vote Rating
    2
    Answers
    27
    NickT is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    Answers
    1
    coffeemonster is on a distinguished road

      0  

    Default


    Thanks NickT

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

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    Answers
    1
    coffeemonster is on a distinguished road

      0  

    Default


    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)

    Code:
    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

  7. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    9
    Vote Rating
    0
    Ganitai is on a distinguished road

      0  

    Default


    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!

Thread Participants: 2