Permalink
Browse files

created a map panel that works with extjs4 and added a static maps panel

  • Loading branch information...
1 parent 9bac737 commit 91fe1c2af139cc84cee1a71707d701f817ce42ee @VinylFox committed Sep 3, 2011
View
2 .gitignore
@@ -0,0 +1,2 @@
+.tmp_*
+.project
View
29 .project
@@ -1,12 +1,17 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
- <name>ExtJS.ux.GMapPanel</name>
- <comment></comment>
- <projects>
- </projects>
- <buildSpec>
- </buildSpec>
- <natures>
- <nature>com.aptana.projects.webnature</nature>
- </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>ExtJS.ux.GMapPanel</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ <buildCommand>
+ <name>com.aptana.ide.core.unifiedBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ </buildSpec>
+ <natures>
+ <nature>com.aptana.projects.webnature</nature>
+ </natures>
+</projectDescription>
View
8 README
@@ -6,7 +6,9 @@ This is a panel that displays a Google Map.
There are versions of this extension that work with Google Maps V2 or V3, along with versions that are compatible with ExtJS 3 or 4
-* GMapPanel - Google Maps V2 & ExtJS 3
-* GMapPanel3 - Google Maps V3 & ExtJS 3
-* GMapPanel3-Ext4 - Google Maps V3 & ExtJS 4
+* Ext.ux.GMapPanel.js - Google Maps V2 & ExtJS 3
+* Ext.ux.GMapPanel3.js - Google Maps V3 & ExtJS 3
+* Ext.ux.GMapPanelStatic.js - Google Static Maps & ExtJS 3/Sencha Touch (experimental)
+* GMapPanel3.js - Google Maps V3 & ExtJS 4
+* GMapPanelStatic.js - Google Static Maps & ExtJS 4 (experimental)
View
26 examples/window/window-basic-ext4.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>GMap Window Example</title>
+ <link rel="stylesheet" type="text/css" href="../../../extjs/resources/css/ext-all.css" />
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+ <script type="text/javascript" src="../../../extjs/ext-all-debug.js"></script>
+ <script type="text/javascript" src="../../src/GMapPanel3.js"></script>
+ <script src="window-basic-ext4.js"></script>
+
+ <style type="text/css">
+ .x-panel-body p {
+ margin:10px;
+ font-size:12px;
+ }
+ </style>
+</head>
+<body>
+
+<h1>GMap Window</h1>
+<p>This example shows how to create an extension and utilize an external library.</p>
+<input type="button" id="show-btn" value="Gimme a Map" /><br /><br />
+<p>Note that the js is not minified so it is readable. See <a href="../../src/GMapPanel3.js">GMapPanel3.js</a> and <a href="window-basic.js">window-basic.js</a> for the full source code.</p>
+
+</body>
+</html>
View
51 examples/window/window-basic-ext4.js
@@ -0,0 +1,51 @@
+Ext.onReady(function(){
+ var mapwin;
+
+ Ext.get('show-btn').on('click', function() {
+ // create the window on the first click and reuse on subsequent clicks
+ if(!mapwin){
+
+ mapwin = Ext.create('Ext.Window', {
+ layout: 'fit',
+ title: 'GMap Window',
+ closeAction: 'hide',
+ width:450,
+ height:450,
+ border: false,
+ x: 40,
+ y: 60,
+ items: {
+ xtype: 'gmappanel',
+ id: 'mymap',
+ zoomLevel: 14,
+ gmapType: 'map',
+ mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
+ mapControls: ['GSmallMapControl','GMapTypeControl'],
+ setCenter: {
+ lat: 39.26940,
+ lng: -76.64323
+ },
+ maplisteners: {
+ click: function(mevt){
+ Ext.Msg.alert('Lat/Lng of Click', mevt.latLng.lat() + ' / ' + mevt.latLng.lng());
+ var input = Ext.get('ac').dom,
+ sw = new google.maps.LatLng(39.26940,-76.64323),
+ ne = new google.maps.LatLng(39.38904,-76.54848),
+ bounds = new google.maps.LatLngBounds(sw,ne);
+ var options = {
+ location: mevt.latLng,
+ radius: '1000',
+ types: ['geocode']
+ };
+ }
+ }
+ }
+ });
+
+ }
+
+ mapwin.show();
+
+ });
+
+ });
View
26 examples/window/window-static.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>GMap Window Example</title>
+ <link rel="stylesheet" type="text/css" href="../../../extjs/resources/css/ext-all.css" />
+
+ <script type="text/javascript" src="../../../extjs/bootstrap.js"></script>
+
+ <script src="window-static.js"></script>
+
+ <style type="text/css">
+ .x-panel-body p {
+ margin:10px;
+ font-size:12px;
+ }
+ </style>
+</head>
+<body>
+
+<h1>GMap Window</h1>
+<p>This example shows how to create an extension and utilize an external library.</p>
+<input type="button" id="show-btn" value="Gimme a Map" /><br /><br />
+<p>Note that the js is not minified so it is readable. See <a href="../../src/Ext.ux.GMapPanel.js">Ext.ux.GMapPanel.js</a> and <a href="window-basic.js">window-basic.js</a> for the full source code.</p>
+
+</body>
+</html>
View
50 examples/window/window-static.js
@@ -0,0 +1,50 @@
+Ext.onReady(function(){
+ var mapwin;
+
+ Ext.get('show-btn').on('click', function() {
+ // create the window on the first click and reuse on subsequent clicks
+ if(!mapwin){
+
+ mapwin = Ext.create('Ext.Window', {
+ layout: 'fit',
+ title: 'GMap Window',
+ closeAction: 'hide',
+ width:450,
+ height:450,
+ border: false,
+ x: 40,
+ y: 60,
+ items: {
+ xtype: 'gmappanelstatic',
+ zoomLevel: 14,
+ gmapType: 'roadmap',
+ mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
+ mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
+ setCenter: {
+ geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
+ marker: {title: 'Fenway Park'}
+ },
+ markers: [{
+ lat: 42.339641,
+ lng: -71.094224,
+ marker: {title: 'Boston Museum of Fine Arts'},
+ listeners: {
+ click: function(e){
+ Ext.Msg.alert('Its fine', 'and its art.');
+ }
+ }
+ },{
+ lat: 42.339419,
+ lng: -71.09077,
+ marker: {title: 'Northeastern University'}
+ }]
+ }
+ });
+
+ }
+
+ mapwin.show();
+
+ });
+
+ });
View
2 src/Ext.ux.GMapPanel3.js
@@ -673,7 +673,7 @@ buttons: [
if (accuracy < reqAccuracy) {
this.geoErrorMsg(this.geoErrorTitle, String.format(this.geoErrorMsgAccuracy, response[0].geometry.location_type, this.getLocationTypeInfo(response[0].geometry.location_type,'msg')));
}else{
- point = new google.maps.LatLng(place.xa,place.za);
+ point = new google.maps.LatLng(place.lat(),place.lng());
if (center){
this.getMap().setCenter(point, this.zoomLevel);
this.lastCenter = point;
View
116 src/Ext.ux.GMapPanelStatic.js
@@ -0,0 +1,116 @@
+/**
+ * @class Ext.ux.GMapPanel
+ * @extends Ext.Panel
+ * @author Shea Frederick
+ */
+Ext.ux.GMapPanelStatic = Ext.extend(Ext.Panel, {
+ mapUrl: 'http://maps.googleapis.com/maps/api/staticmap?center={2}&zoom={3}&size={0}x{1}&maptype={4}&markers={5}&sensor={6}',
+ sensor: false,
+ markerStr: 'size:mid|color:red|',
+
+ initComponent : function(){
+
+ var defConfig = {
+ plain: true,
+ zoomLevel: 3,
+ yaw: 180,
+ pitch: 0,
+ zoom: 0,
+ gmapType: 'roadmap',
+ border: false
+ };
+
+ this.geo = this.geo || new Ext.util.GeoLocation();
+
+ Ext.applyIf(this,defConfig);
+
+ Ext.ux.GMapPanelStatic.superclass.initComponent.call(this);
+
+ },
+
+ afterRender : function(){
+
+ this.addMarkers(this.markers);
+
+ Ext.ux.GMapPanelStatic.superclass.afterRender.call(this);
+
+ },
+ afterComponentLayout : function(w, h){
+
+ if (w && h) {
+ if (w > 640 || h > 640){
+ Ext.Msg.alert('error','The map can be no larger than 640px in either direction');
+ }
+ this.updateMap();
+ }
+
+ Ext.ux.GMapPanelStatic.superclass.afterComponentLayout.call(this);
+
+ },
+ updateMap: function(){
+
+ var url = this.getMapUrl();
+ if (this.rendered) {
+ this.el.update('<img src="' + url + '">');
+ }else{
+ this.html = '<img src="'+url+'">';
+ }
+
+ },
+ getMapUrl: function(){
+ var wh = this.el.getSize();
+ console.log('getMapUrl',wh.width,wh.height);
+ var url = Ext.String.format(this.mapUrl,wh.width,wh.height,this.getCenterString(),this.zoomLevel,this.mapType,this.getMarkerString(),this.sensor);
+ if (url.split().length > 2048){
+ Ext.Msg.alert('Error','The URL to request a map image is too long');
+ }else{
+ return url;
+ }
+ },
+ getCenterString: function(){
+ return (this.center.geoCodeAddr)?this.center.geoCodeAddr:this.center.lat+','+this.center.lng;
+ },
+ getMarkerString: function(){
+ return this.markerStr;
+ },
+ getMap : function(){
+
+ return this;
+
+ },
+ setCenter: function(ctr){
+ this.center.lat = ctr.lat();
+ this.center.lng = ctr.lng();
+ this.updateMap();
+ },
+ addMarkers : function(markers) {
+
+ if (Ext.isArray(markers)){
+ for (var i = 0; i < markers.length; i++) {
+ if (markers[i]) {
+ if (typeof markers[i].geoCodeAddr == 'string') {
+ this.markerStr += markers[i].geoCodeAddr+'|';
+ } else {
+ var mkr_point = {lat:markers[i].lat, lng:markers[i].lng};
+ this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
+ }
+ }
+ }
+ this.updateMap();
+ }
+
+ },
+ addMarker : function(point, marker, clear, center, listeners){
+
+ this.markerStr += point.lat+','+point.lng+'|';
+
+ },
+ geoCodeLookup : function(addr) {
+
+
+
+ }
+
+});
+
+Ext.reg('mappanelstatic',Ext.ux.GMapPanelStatic);
View
737 src/GMapPanel3.js
@@ -0,0 +1,737 @@
+Ext.ns('Ext.ux');
+/**
+ * @class Ext.ux.GMapPanel
+ * @extends Ext.Panel
+ * @author Shea Frederick
+ */
+Ext.define('Ext.ux.GMapPanel', {
+
+ extend: 'Ext.panel.Panel',
+
+ alias: 'widget.gmappanel',
+
+ requires: ['Ext.window.MessageBox'],
+ /**
+ * @cfg {Boolean} border
+ * Defaults to <tt>false</tt>. See {@link Ext.Panel}.<code>{@link Ext.Panel#border border}</code>.
+ */
+ border: false,
+
+ /**
+ * @cfg {Array} respErrors
+ * An array of msg/code pairs.
+ */
+ respErrors: [{
+ code: 'UNKNOWN_ERROR',
+ msg: 'A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.'
+ },{
+ code: 'ERROR',
+ msg: 'There was a problem contacting the Google servers.'
+ },{
+ code: 'ZERO_RESULTS',
+ msg: 'The request did not encounter any errors but returns zero results.'
+ },{
+ code: 'INVALID_REQUEST',
+ msg: 'This request was invalid.'
+ },{
+ code: 'REQUEST_DENIED',
+ msg: 'The webpage is not allowed to use the geocoder for some reason.'
+ },{
+ code: 'OVER_QUERY_LIMIT',
+ msg: 'The webpage has gone over the requests limit in too short a period of time.'
+ }],
+ /**
+ * @cfg {Array} locationTypes
+ * An array of msg/code/level pairs.
+ */
+ locationTypes: [{
+ level: 4,
+ code: 'ROOFTOP',
+ msg: 'The returned result is a precise geocode for which we have location information accurate down to street address precision.'
+ },{
+ level: 3,
+ code: 'RANGE_INTERPOLATED',
+ msg: 'The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavailable for a street address.'
+ },{
+ level: 2,
+ code: 'GEOMETRIC_CENTER',
+ msg: 'The returned result is the geometric center of a result such as a polyline (for example, a street) or polygon (region).'
+ },{
+ level: 1,
+ code: 'APPROXIMATE',
+ msg: 'The returned result is approximate.'
+ }],
+ /**
+ * @cfg {String} respErrorTitle
+ * Defaults to <tt>'Error'</tt>.
+ */
+ respErrorTitle : 'Error',
+ /**
+ * @cfg {String} geoErrorMsgUnable
+ * Defaults to <tt>'Unable to Locate the Address you provided'</tt>.
+ */
+ geoErrorMsgUnable : 'Unable to Locate the Address you provided',
+ /**
+ * @cfg {String} geoErrorTitle
+ * Defaults to <tt>'Address Location Error'</tt>.
+ */
+ geoErrorTitle : 'Address Location Error',
+ /**
+ * @cfg {String} geoErrorMsgAccuracy
+ * Defaults to <tt>'The address provided has a low accuracy.<br><br>{0} Accuracy.'</tt>.
+ * <div class="mdetail-params"><ul>
+ * <li><b><code>ROOFTOP</code></b> : <div class="sub-desc"><p>
+ * The returned result is a precise geocode for which we have location information accurate down to street address precision.
+ * </p></div></li>
+ * <li><b><code>RANGE_INTERPOLATED</code></b> : <div class="sub-desc"><p>
+ * The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavailable for a street address.
+ * </p></div></li>
+ * <li><b><code>GEOMETRIC_CENTER</code></b> : <div class="sub-desc"><p>
+ * The returned result is the geometric center of a result such as a polyline (for example, a street) or polygon (region).
+ * </p></div></li>
+ * <li><b><code>APPROXIMATE</code></b> : <div class="sub-desc"><p>
+ * The returned result is approximate.
+ * </p></div></li>
+ * </ul></div>
+ */
+ geoErrorMsgAccuracy : 'The address provided has a low accuracy.<br><br>"{0}" Accuracy.<br><br>{1}',
+ /**
+ * @cfg {String} gmapType
+ * The type of map to display, generic options available are: 'map', 'panorama'.
+ * Defaults to <tt>'map'</tt>.
+ * More specific maps can be used by specifying the google map type:
+ * <div class="mdetail-params"><ul>
+ * <li><b><code>G_NORMAL_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays the default road map view
+ * </p></div></li>
+ * <li><b><code>G_SATELLITE_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays Google Earth satellite images
+ * </p></div></li>
+ * <li><b><code>G_HYBRID_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays a mixture of normal and satellite views
+ * </p></div></li>
+ * <li><b><code>G_DEFAULT_MAP_TYPES</code></b> : <div class="sub-desc"><p>
+ * Contains an array of the above three types, useful for iterative processing.
+ * </p></div></li>
+ * <li><b><code>G_PHYSICAL_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays a physical map based on terrain information.
+ * </p></div></li>
+ * <li><b><code>G_MOON_ELEVATION_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays a shaded terrain map of the surface of the Moon, color-coded by altitude.
+ * </p></div></li>
+ * <li><b><code>G_MOON_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays photographic imagery taken from orbit around the moon.
+ * </p></div></li>
+ * <li><b><code>G_MARS_ELEVATION_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays a shaded terrain map of the surface of Mars, color-coded by altitude.
+ * </p></div></li>
+ * <li><b><code>G_MARS_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays photographs taken from orbit around Mars.
+ * </p></div></li>
+ * <li><b><code>G_MARS_INFRARED_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays a shaded infrared map of the surface of Mars, where warmer areas appear brighter and colder areas appear darker.
+ * </p></div></li>
+ * <li><b><code>G_SKY_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
+ * Displays a mosaic of the sky, as seen from Earth, covering the full celestial sphere.
+ * </p></div></li>
+ * </ul></div>
+ * Sample usage:
+ * <pre><code>
+ * gmapType: G_MOON_VISIBLE_MAP
+ * </code></pre>
+ */
+ gmapType : 'map',
+ /**
+ * @cfg {Object} setCenter
+ * The initial center location of the map. The map needs to be centered before it can be used.
+ * A marker is not required to be specified.
+ * More markers can be added to the map using the <code>{@link #markers}</code> array.
+ * For example:
+ * <pre><code>
+setCenter: {
+ geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
+ marker: {title: 'Fenway Park'}
+},
+
+// or just specify lat/long
+setCenter: {
+ lat: 42.345573,
+ lng: -71.098326
+}
+ * </code></pre>
+ */
+ /**
+ * @cfg {Number} zoomLevel
+ * The zoom level to initialize the map at, generally between 1 (whole planet) and 40 (street).
+ * Also used as the zoom level for panoramas, zero specifies no zoom at all.
+ * Defaults to <tt>3</tt>.
+ */
+ zoomLevel: 3,
+ /**
+ * @cfg {Number} yaw
+ * The Yaw, or rotational direction of the users perspective in degrees. Only applies to panoramas.
+ * Defaults to <tt>180</tt>.
+ */
+ yaw: 180,
+ /**
+ * @cfg {Number} pitch
+ * The pitch, or vertical direction of the users perspective in degrees.
+ * Defaults to <tt>0</tt> (straight ahead). Valid values are between +90 (straight up) and -90 (straight down).
+ */
+ pitch: 0,
+ /**
+ * @cfg {Boolean} displayGeoErrors
+ * True to display geocoding errors to the end user via a message box.
+ * Defaults to <tt>false</tt>.
+ */
+ displayGeoErrors: false,
+ /**
+ * @cfg {Boolean} minGeoAccuracy
+ * The level to display an accuracy error below. Defaults to <tt>ROOFTOP</tt>. For additional information
+ * see <a href="http://code.google.com/apis/maps/documentation/reference.html#GGeoAddressAccuracy">here</a>.
+ */
+ minGeoAccuracy: 'ROOFTOP',
+ /**
+ * @cfg {Array} mapConfOpts
+ * Array of strings representing configuration methods to call, a full list can be found
+ * <a href="http://code.google.com/apis/maps/documentation/reference.html#GMap2">here</a>.
+ * For example:
+ * <pre><code>
+ * mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
+ * </code></pre>
+ */
+ /**
+ * @cfg {Array} mapControls
+ * Array of strings representing map controls to initialize, a full list can be found
+ * <a href="http://code.google.com/apis/maps/documentation/reference.html#GControlImpl">here</a>.
+ * For example:
+ * <pre><code>
+ * mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl']
+ * </code></pre>
+ */
+ /**
+ * @cfg {Array} markers
+ * Markers may be added to the map. Instead of specifying <code>lat</code>/<code>lng</code>,
+ * geocoding can be specified via a <code>geoCodeAddr</code> string.
+ * For example:
+ * <pre><code>
+markers: [{
+ //lat: 42.339641,
+ //lng: -71.094224,
+ // instead of lat/lng:
+ geoCodeAddr: '465 Huntington Avenue, Boston, MA, 02215-5597, USA',
+ marker: {title: 'Boston Museum of Fine Arts'},
+ listeners: {
+ click: function(e){
+ Ext.Msg.alert('Its fine', 'and its art.');
+ }
+ }
+},{
+ lat: 42.339419,
+ lng: -71.09077,
+ marker: {title: 'Northeastern University'}
+}]
+ * </code></pre>
+ */
+ // private
+ mapDefined: false,
+ // private
+ mapDefinedGMap: false,
+ initComponent : function(){
+
+ this.addEvents(
+ /**
+ * @event mapready
+ * Fires when the map is ready for interaction
+ * @param {GMapPanel} this
+ * @param {GMap} map
+ */
+ 'mapready',
+ /**
+ * @event apiready
+ * Fires when the Google Maps API is loaded
+ */
+ 'apiready'
+ );
+
+ Ext.applyIf(this,{
+ markers: [],
+ cache: {
+ marker: [],
+ polyline: [],
+ infowindow: []
+ }
+ });
+
+ Ext.ux.GMapPanel.superclass.initComponent.call(this);
+
+ if (window.google && window.google.maps){
+ this.on('afterrender', this.apiReady, this);
+ }else{
+ window.gmapapiready = Ext.Function.bind(this.apiReady,this);
+ this.buildScriptTag('http://maps.google.com/maps/api/js?sensor=false&callback=gmapapiready');
+ }
+
+ },
+ apiReady : function(){
+
+ if (this.rendered){
+
+ Ext.defer(function(){
+ if (this.gmapType === 'map'){
+ this.gmap = new google.maps.Map(this.getEl().dom, {zoom:this.zoomLevel,mapTypeId: google.maps.MapTypeId.ROADMAP});
+ this.mapDefined = true;
+ this.mapDefinedGMap = true;
+ }
+
+ if (this.gmapType === 'panorama'){
+ this.gmap = new GStreetviewPanorama(this.getEl().dom);
+ this.mapDefined = true;
+ }
+
+ if (!this.mapDefined && this.gmapType){
+ this.gmap = new google.maps.Map(this.getEl().dom, {zoom:this.zoomLevel,mapTypeId: google.maps.MapTypeId.ROADMAP});
+ this.gmap.setMapTypeId(this.gmapType);
+ this.mapDefined = true;
+ this.mapDefinedGMap = true;
+ }
+
+ google.maps.event.addListenerOnce(this.getMap(), 'tilesloaded', Ext.Function.bind(this.onMapReady, this));
+ google.maps.event.addListener(this.getMap(), 'dragend', Ext.Function.bind(this.dragEnd, this));
+
+
+ if (typeof this.setCenter === 'object') {
+ if (typeof this.setCenter.geoCodeAddr === 'string'){
+ this.geoCodeLookup(this.setCenter.geoCodeAddr, this.setCenter.marker, false, true, this.setCenter.listeners);
+ }else{
+ if (this.gmapType === 'map'){
+ var point = new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng);
+ this.getMap().setCenter(point, this.zoomLevel);
+ this.lastCenter = point;
+ }
+ if (typeof this.setCenter.marker === 'object' && typeof point === 'object') {
+ this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear);
+ }
+ }
+ if (this.gmapType === 'panorama'){
+ this.getMap().setLocationAndPOV(new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoomLevel});
+ }
+ }
+ }, 200,this); // Ext.defer
+
+ }else{
+ this.on('afterrender', this.apiReady, this);
+ }
+ },
+ // private
+ afterRender : function(){
+
+ var wh = this.ownerCt.getSize();
+ Ext.applyIf(this, wh);
+
+ Ext.ux.GMapPanel.superclass.afterRender.call(this);
+
+ },
+ // private
+ buildScriptTag: function(filename, callback) {
+ var script = document.createElement('script'),
+ head = document.getElementsByTagName("head")[0];
+ script.type = "text/javascript";
+ script.src = filename;
+
+ return head.appendChild(script);
+ },
+ // private
+ onMapReady : function(){
+
+ this.addMapControls();
+ this.addOptions();
+
+ this.addMarkers(this.markers);
+ this.addMapListeners();
+
+ this.fireEvent('mapready', this, this.getMap());
+ return this;
+ },
+ // private
+ addMapListeners : function () {
+ if (this.maplisteners){
+ Ext.iterate(this.maplisteners, function(key,val){
+ google.maps.event.addListener(this.getMap(), key, Ext.Function.bind(val,this));
+ },this);
+ }
+ },
+ // private
+ onResize : function(w, h){
+
+ Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
+
+ // check for the existance of the google map in case the onResize fires too early
+ if (typeof this.getMap() == 'object') {
+ google.maps.event.trigger(this.getMap(), 'resize');
+ if (this.lastCenter){
+ this.getMap().setCenter(this.lastCenter, this.zoomLevel);
+ }
+ }
+
+ },
+ // private
+ setSize : function(width, height, animate){
+
+ Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
+
+ // check for the existance of the google map in case setSize is called too early
+ if (Ext.isObject(this.getMap())) {
+ google.maps.event.trigger(this.getMap(), 'resize');
+ if (this.lastCenter){
+ this.getMap().setCenter(this.lastCenter, this.zoomLevel);
+ }
+ }
+
+ },
+ // private
+ dragEnd: function(){
+ this.lastCenter = this.getMap().getCenter();
+ },
+ /**
+ * Returns the current google map which can be used to call Google Maps API specific handlers.
+ * @return {GMap} this
+ */
+ getMap : function(){
+
+ return this.gmap;
+
+ },
+ /**
+ * Returns the maps center as a GLatLng object
+ * @return {GLatLng} this
+ */
+ getCenter : function(){
+
+ return this.getMap().getCenter();
+
+ },
+ /**
+ * Returns the maps center as a simple object
+ * @return {Object} this has lat and lng properties only
+ */
+ getCenterLatLng : function(){
+
+ var ll = this.getCenter();
+ return {lat: ll.lat(), lng: ll.lng()};
+
+ },
+ /**
+ * Creates markers from the array that is passed in. Each marker must consist of at least
+ * <code>lat</code> and <code>lng</code> properties or a <code>geoCodeAddr</code>.
+ * @param {Array} markers an array of marker objects
+ */
+ addMarkers : function(markers) {
+ if (Ext.isArray(markers)){
+ for (var i = 0; i < markers.length; i++) {
+ if (markers[i]) {
+ if (typeof markers[i].geoCodeAddr == 'string') {
+ this.geoCodeLookup(markers[i].geoCodeAddr, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
+ } else {
+ var mkr_point = new google.maps.LatLng(markers[i].lat, markers[i].lng);
+ this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
+ }
+ }
+ }
+ }
+
+ },
+ /**
+ * Creates a single marker.
+ * @param {Object} point a GLatLng point
+ * @param {Object} marker a marker object consisting of at least lat and lng
+ * @param {Boolean} clear clear other markers before creating this marker
+ * @param {Boolean} center true to center the map on this marker
+ * @param {Object} listeners a listeners config
+ */
+ addMarker : function(point, marker, clear, center, listeners){
+
+ Ext.applyIf(marker,{});
+
+ if (clear === true){
+ this.clearMarkers();
+ }
+ if (center === true) {
+ this.getMap().setCenter(point, this.zoomLevel)
+ this.lastCenter = point;
+ }
+
+ var mark = new google.maps.Marker(Ext.apply(marker, {
+ position: point
+ }));
+
+ if (marker.infoWindow){
+ this.createInfoWindow(marker.infoWindow, point, mark);
+ }
+
+ this.cache.marker.push(mark);
+ mark.setMap(this.getMap());
+
+ if (typeof listeners === 'object'){
+ for (evt in listeners) {
+ google.maps.event.addListener(mark, evt, listeners[evt]);
+ }
+ }
+
+ return mark;
+
+ },
+ /**
+ * Creates a single polyline.
+ * @param {Array} points an array of polyline points
+ * @param {Object} linestyle an object defining the line style to use
+ */
+ addPolyline : function(points, linestyle){
+
+ var plinepnts = new google.maps.MVCArray, pline, linestyle = linestyle ? linestyle : {
+ strokeColor: '#FF0000',
+ strokeOpacity: 1.0,
+ strokeWeight: 2
+ };
+
+ Ext.each(points, function(point){
+ plinepnts.push(new google.maps.LatLng(point.lat, point.lng));
+ }, this);
+
+ var pline = new google.maps.Polyline(Ext.apply({
+ path: plinepnts
+ },linestyle));
+
+ this.cache.polyline.push(pline);
+
+ pline.setMap(this.getMap());
+
+ },
+ /**
+ * Creates an Info Window.
+ * @param {Object} inwin an Info Window configuration
+ * @param {GLatLng} point the point to show the Info Window at
+ * @param {GMarker} marker a marker to attach the Info Window to
+ */
+ createInfoWindow : function(inwin, point, marker){
+
+ var me = this, infoWindow = new google.maps.InfoWindow({
+ content: inwin.content,
+ position: point
+ });
+
+ if (marker) {
+ google.maps.event.addListener(marker, 'click', function(){
+ me.hideAllInfoWindows();
+ infoWindow.open(me.getMap());
+ });
+ }
+
+ this.cache.infowindow.push(infoWindow);
+
+ return infoWindow;
+
+ },
+ // private
+ hideAllInfoWindows : function(){
+ for (var i = 0; i < this.cache.infowindow.length; i++) {
+ this.cache.infowindow[i].close();
+ }
+ },
+ // private
+ clearMarkers : function(){
+
+ this.hideAllInfoWindows();
+ this.hideMarkers();
+
+ },
+ // private
+ hideMarkers : function(){
+ Ext.each(this.cache.marker, function(mrk){
+ mrk.setMap(null);
+ });
+ },
+ // private
+ showMarkers : function(){
+ Ext.each(this.cache.marker, function(mrk){
+ mrk.setMap(this.getMap());
+ },this);
+ },
+ // private
+ addMapControls : function(){
+
+ if (this.gmapType === 'map') {
+ if (Ext.isArray(this.mapControls)) {
+ for(i=0;i<this.mapControls.length;i++){
+ //this.addMapControl(this.mapControls[i]);
+ }
+ }else if(typeof this.mapControls === 'string'){
+ //this.addMapControl(this.mapControls);
+ }else if(typeof this.mapControls === 'object'){
+ //this.getMap().add_control(this.mapControls);
+ }
+ }
+
+ },
+ /**
+ * Adds a GMap control to the map.
+ * @param {String} mc a string representation of the control to be instantiated.
+ */
+ addMapControl : function(mc){
+
+ var mcf = window[mc];
+ if (typeof mcf === 'function') {
+ //this.getMap().addControl(new mcf());
+ }
+
+ },
+ // private
+ addOptions : function(){
+
+ if (Ext.isArray(this.mapConfOpts)) {
+ var mc;
+ for(i=0;i<this.mapConfOpts.length;i++){
+ //this.addOption(this.mapConfOpts[i]);
+ }
+ }else if(typeof this.mapConfOpts === 'string'){
+ //this.addOption(this.mapConfOpts);
+ }
+
+ },
+ /**
+ * Adds a GMap option to the map.
+ * @param {String} mo a string representation of the option to be instantiated.
+ */
+ addOption : function(mo){
+
+ var mof = this.getMap()[mo];
+ if (typeof mof === 'function') {
+ this.getMap()[mo]();
+ }
+
+ },
+ /**
+ * Looks up and address and optionally add a marker, center the map to this location, or
+ * clear other markers. Sample usage:
+ * <pre><code>
+buttons: [
+ {
+ text: 'Fenway Park',
+ handler: function(){
+ var addr = '4 Yawkey Way, Boston, MA, 02215-3409, USA';
+ Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
+ }
+ },{
+ text: 'Zoom Fenway Park',
+ handler: function(){
+ Ext.getCmp('my_map').zoomLevel = 19;
+ var addr = '4 Yawkey Way, Boston, MA, 02215-3409, USA';
+ Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
+ }
+ },{
+ text: 'Low Accuracy',
+ handler: function(){
+ Ext.getCmp('my_map').geoCodeLookup('Paris, France', undefined, false, true, undefined);
+ }
+ },{
+
+ text: 'Bogus Address',
+ handler: function(){
+ var addr = 'Some Fake, Address, For, Errors';
+ Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
+ }
+ }
+]
+ * </code></pre>
+ * @param {String} addr the address to lookup.
+ * @param {Object} marker the marker to add (optional).
+ * @param {Boolean} clear clear other markers before creating this marker
+ * @param {Boolean} center true to set this point as the center of the map.
+ * @param {Object} listeners a listeners config
+ */
+ geoCodeLookup : function(addr, marker, clear, center, listeners) {
+
+ if (!this.geocoder) {
+ this.geocoder = new google.maps.Geocoder();
+ }
+ this.geocoder.geocode({
+ address: addr
+ }, Ext.Function.bind(this.addAddressToMap, this, [addr, marker, clear, center, listeners], true));
+
+ },
+ // private
+ centerOnClientLocation : function(){
+ this.getClientLocation(function(loc){
+ var point = new google.maps.LatLng(loc.latitude,loc.longitude);
+ this.getMap().setCenter(point, this.zoomLevel);
+ this.lastCenter = point;
+ });
+ },
+ // private
+ getClientLocation : function(fn, errorFn){
+ if (!errorFn) {
+ errorFn = Ext.emptyFn;
+ }
+ if (!this.clientGeo) {
+ this.clientGeo = google.gears.factory.create('beta.geolocation');
+ }
+ geo.getCurrentPosition(Ext.Function.bind(fn, this), errorFn);
+ },
+ // private
+ addAddressToMap : function(response, status, addr, marker, clear, center, listeners){
+ if (!response || status !== 'OK') {
+ this.respErrorMsg(status);
+ }else{
+ var place = response[0].geometry.location,
+ accuracy = this.getLocationTypeInfo(response[0].geometry.location_type,'level'),
+ reqAccuracy = this.getLocationTypeInfo(this.minGeoAccuracy,'level');
+ if (accuracy === 0) {
+ this.geoErrorMsg(this.geoErrorTitle, this.geoErrorMsgUnable);
+ }else{
+ if (accuracy < reqAccuracy) {
+ this.geoErrorMsg(this.geoErrorTitle, String.format(this.geoErrorMsgAccuracy, response[0].geometry.location_type, this.getLocationTypeInfo(response[0].geometry.location_type,'msg')));
+ }else{
+ point = new google.maps.LatLng(place.lat(),place.lng());
+ if (center){
+ this.getMap().setCenter(point, this.zoomLevel);
+ this.lastCenter = point;
+ }
+ if (typeof marker === 'object') {
+ if (!marker.title){
+ marker.title = response.formatted_address;
+ }
+ var mkr = this.addMarker(point, marker, clear, false, listeners);
+ if (marker.callback){
+ marker.callback.call(this, mkr, point);
+ }
+ }
+ }
+ }
+ }
+
+ },
+ // private
+ geoErrorMsg : function(title,msg){
+ if (this.displayGeoErrors) {
+ Ext.MessageBox.alert(title,msg);
+ }
+ },
+ // private
+ respErrorMsg : function(code){
+ Ext.each(this.respErrors, function(obj){
+ if (code == obj.code){
+ Ext.MessageBox.alert(this.respErrorTitle, obj.msg);
+ }
+ }, this);
+ },
+ // private
+ getLocationTypeInfo: function(location_type,property){
+ var val = 0;
+ Ext.each(this.locationTypes, function(itm){
+ if (itm.code === location_type){
+ val = itm[property];
+ }
+ });
+ return val;
+ }
+});
View
116 src/GMapPanelStatic.js
@@ -0,0 +1,116 @@
+Ext.ns('Ext.ux');
+/**
+ * @class Ext.ux.GMapPanel
+ * @extends Ext.Panel
+ * @author Shea Frederick
+ */
+Ext.define('Ext.ux.GMapPanelStatic', {
+
+ extend: 'Ext.panel.Panel',
+
+ alias: 'widget.gmappanelstatic',
+
+ requires: ['Ext.window.MessageBox'],
+
+ mapUrl: 'http://maps.googleapis.com/maps/api/staticmap?center={2}&zoom={3}&size={0}x{1}&maptype={4}&markers={5}&sensor={6}',
+ sensor: false,
+ markerStr: 'size:mid|color:red|',
+
+ initComponent : function(){
+
+ var defConfig = {
+ plain: true,
+ zoomLevel: 3,
+ yaw: 180,
+ pitch: 0,
+ zoom: 0,
+ gmapType: 'roadmap',
+ border: false
+ };
+
+ Ext.applyIf(this,defConfig);
+
+ this.callParent();
+
+ },
+
+ afterRender : function(){
+
+ this.addMarkers(this.markers);
+
+ this.callParent();
+
+ },
+ afterComponentLayout : function(w, h){
+
+ if (w && h) {
+ if (w > 640 || h > 640){
+ Ext.Msg.alert('error','The map can be no larger than 640px in either direction');
+ }
+ this.updateMap();
+ }
+
+ this.callParent(arguments);
+
+ },
+ updateMap: function(){
+
+ var url = this.getMapUrl();
+ if (this.rendered) {
+ this.el.update('<img src="' + url + '">');
+ }else{
+ this.html = '<img src="'+url+'">';
+ }
+
+ },
+ getMapUrl: function(){
+ var wh = this.el.getSize();
+ console.log('getMapUrl',wh.width,wh.height);
+ var url = Ext.String.format(this.mapUrl,wh.width,wh.height,this.getCenterString(),this.zoomLevel,this.mapType,this.getMarkerString(),this.sensor);
+ if (url.split().length > 2048){
+ Ext.Msg.alert('Error','The URL to request a map image is too long');
+ }else{
+ return url;
+ }
+ },
+ getCenterString: function(){
+ return (this.setCenter.geoCodeAddr)?this.setCenter.geoCodeAddr:this.setCenter.lat+','+this.setCenter.lng;
+ },
+ getMarkerString: function(){
+ return this.markerStr;
+ },
+ getMap : function(){
+
+ return this;
+
+ },
+ addMarkers : function(markers) {
+
+ if (Ext.isArray(markers)){
+ for (var i = 0; i < markers.length; i++) {
+ if (markers[i]) {
+ if (typeof markers[i].geoCodeAddr == 'string') {
+ this.markerStr += markers[i].geoCodeAddr+'|';
+ } else {
+ var mkr_point = {lat:markers[i].lat, lng:markers[i].lng};
+ this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
+ }
+ }
+ }
+ this.updateMap();
+ }
+
+ },
+ addMarker : function(point, marker, clear, center, listeners){
+
+ this.markerStr += point.lat+','+point.lng+'|';
+
+ },
+ geoCodeLookup : function(addr) {
+
+
+
+ }
+
+});
+

0 comments on commit 91fe1c2

Please sign in to comment.