Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Instantiating a Map View

Page of 168

The Ext.Map class (xtype: map) is a simple wrapper for a Google Map. You will typically set the following configuration properties:

Config Option Description
mapOptions Object. A passthrough for the google.maps.Mapoptions object specification.
useCurrentLocation Boolean/GeoLocation. Set to true to center the map on the device's current coordinates. Alternately, pass an Ext.util.Geolocation instance to control update intervals.

Configuring the Map

Developers typically need to configure the following google.maps.Mapoptions:

Property Description
center LatLng. The center of the map. Use the google.maps.LatLng() method to translate lat,lng coordinates to a google map LatLng object.
mapTypeId

The type of map to display. May be one of the following:

  • google.maps.MapTypeId.HYBRID
  • google.maps.MapTypeId.ROADMAP
  • google.maps.MapTypeId.SATELLITE
  • google.maps.MapTypeId.TERRAIN
Defaults to google.maps.MapTypeId.ROADMAP
zoom Number. The initial zoom level (1-20)

The following example illustrates how to instantiate a Google Map that is centered on Fig Leaf Software's World Headquarters:

Displaying a Map
Ext.Viewport.add([
 {
  xtype: 'map',
  mapOptions: {
   center: new google.maps.LatLng (38.909027,-77.037165),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 17
  }
 }
]);


Handling Google Map Instantiation Latency

There may be a brief delay between the time that you instantiate a map component using the Ext.Map and the time that the Google map instantiates into the map panel. During this period, the Ext.Map.getMap() method will return null. In order to ensure that your map directives are excuted properly, you will need to set up some polling, as illustrated below, to verify that your Ext.Map.getMap() method is returning the proper data.

Ext.define("MyApp.views.MyMap", {
 extend: 'Ext.Container',
 requires: ['Ext.Map'],
 config: {
   layout: 'fit'
   items: [
     {xtype: 'map'}
   ]
 },
 initialize: function() {
   this.callParent(arguments);
   
   // wait 100 ms
   Ext.Function.defer(this.initMap,100,this);
 },
 initMap: function() {
  var mapPanel = this.down('map');
  var gMap = mapPanel.getMap();

  if (gMap == null) {
   Ext.Function.defer(this.initMap,250,this);
  } else {
     // ready to start calling google map methods
  }
 }
})

Note: this workaround would be rendered moot once the Ext.Map maprender event is properly implemented

Displaying Map Layers

Google Maps enables you to add layers to your maps that visually represent the following datasets:

Layer Description
KmlLayer Renders KML and GeoRSS elements into a Maps API V3 tile overlay.
HeatmapLayer Renders geographic data using a Heatmap visualization
FusionTablesLayer Renders data contained in Google Fusion Tables.
TrafficLayer Renders a layer depicting traffic conditions and overlays representing traffic.
TransitLayer Displays the public transport network of your city on the map.
WeatherLayer and
CloudLayer
Allow you to add weather forecasts and cloud imagery to your map.
BicyclingLayer Renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the DirectionsRenderer when requesting directions of travel mode BICYCLING.
PanoramioLayer Adds photos from Panoramio as a layer.
DemographicsLayer Renders United States demographic information as a layer, and is available to Google Maps API for Business customers only. It is contained within the visualization library.

Dislaying the Current Traffic Conditions

The following code snippet illustrates how to add traffic map overlay on top of an Ext.Map:

Adding a Traffic Layer

Ext.define('MyApp.view.MyMap', {
 extend: 'Ext.Map',
 config: {
  mapOptions: {
   center: new google.maps.LatLng (38.909027,-77.037165),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 15
  }
 },
 initialize: function() {
   var gMap = this.getMap();
   var trafficLayer = new google.maps.TrafficLayer();
   trafficLayer.setMap(gMap);
 }
});

Displaying the Panoramio Layer

Loading the Panoramio layer requires you to modify the url of the <script> tag that loads the Google Maps API as illustrated by the following example:

Adding a Panoramio Layer
<script 
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=panoramio">
</script>

You can then add the Panoramio view to your map by creating a new instance of the google.maps.panoramio.PanoramioLayer() class:

Ext.define('MyApp.view.MyMap', {
 extend: 'Ext.Map',
 config: {
  mapOptions: {
   center: new google.maps.LatLng (38.909027,-77.037165),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 15
  }
 },
 initialize: function() {
   var gMap = this.getMap();
   
   // add traffic layer
   var trafficLayer = new google.maps.TrafficLayer();
   trafficLayer.setMap(gMap);
   
   // add panoramio layer
   var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
   panoramioLayer.setMap(gMap);
 }
});

For more information about Google Map layers, click here.

Page of 168
comments powered by Disqus