Extend Your MDK App With a Map Custom Control (Using Metadata Approach)

The extension control that you will be creating to extend the functionality of your app can be used as base controls by registering it using the MDK editor.

1. Download this image and save it locally. This image will be used as a display image on the page editor to represent the extension control.

2. Drag & drop map.png file on Images folders.

   

3. Right-click Extensions | select MDK: Register Extension Control.

   

4. In Template Selection step, select New and register Metadata Extension Control. Click Next.

   

5. Provide the below information:

   Field	Value
   Control Name	mdk_maps
   Module	MyMapModule
   Control	MyMapExtension
   Class	MyMapClass
   Display	bind it to map.png file

   Here is the basic definition for properties you defined above:

   Module: It is used to identify the extension control.
   The path to the extension module under <MetadataProject>/Extensions/.

   Control: The name of the file under the <MetadataProject>/Extensions/<Module>/controls that contains the extension class. If not specified, module name would be used as the value for this property.

   Class: The class name of your custom extension class. The client will check for this class at runtime and if it’s found, your extension will be instantiated. Otherwise, a stub with an error message will be shown.

   Display: This property is used for the image to be displayed on the page editor to represent the extension control.

   

6. In Schema Information step, fill schema details in Schema column and click Next.

   {
   	"type": "object",
   	"BindType": "",
   	"properties": {
   		"Prop": {
   			"type": "object",
   			"BindType": "",
   			"properties": {
   				"City": {
   					"type": "string",
   					"BindType": ""
   				},
   				"Country": {
   					"type": "string",
   					"BindType": ""
   				},
   				"HouseNumber": {
   					"type": "string",
   					"BindType": ""
   				},
   				"LastName": {
   					"type": "string",
   					"BindType": ""
   				},
   				"PostalCode": {
   					"type": "string",
   					"BindType": ""
   				},
   				"Street": {
   					"type": "string",
   					"BindType": ""
   				}
   			}
   		}
   	}
   }
   

   

   Above schema will add these predefined properties (City, Country, HouseNumber, LastName, PostalCode, Street) in the map extension control which you will bind to Customer entity properties in next step.

7. Click Finish to confirm.

   Some additional files and folders are added to the Extensions folder. You will learn more about it in following steps.

   

   You can find more details about registering extension control in this guide.

1. Navigate to Extensions | MyMapModule | controls | MyMapExtension.ts, replace the code with the following.

   import * as app from 'tns-core-modules/application';
   import { IControl } from 'mdk-core/controls/IControl';
   import { BaseObservable } from 'mdk-core/observables/BaseObservable';
   import { EventHandler } from 'mdk-core/EventHandler'
   
   export class MyMapClass extends IControl {
       private _observable: BaseObservable;
       private _mapView: any;
       private _geo: any;
       private _gMap: any;
       private _marker: any;
       private _customerInfo = {
           lastName: "",
           houseNumber: "",
           street: "",
           city: "",
           country: "",
           postalCode: "",
           latitiude: "",
           longitude: ""
       }
   
       public initialize(props: any): any {
           super.initialize(props);
   
           //Access the properties passed from Customers_Detail.page to the extension control.
           //in this tutorial, you will be accessing the customer's last name and address
           if (this.definition().data.ExtensionProperties.Prop) {
               var property = this.definition().data.ExtensionProperties.Prop;
               this._customerInfo.lastName = property.LastName;
               this._customerInfo.houseNumber = property.HouseNumber;
               this._customerInfo.street = property.Street;
               this._customerInfo.city = property.City;
               this._customerInfo.country = property.Country;
               this._customerInfo.postalCode = property.PostalCode;
           }
   
           if (app.android) {
               //You will display the Google Maps in a MapView.For more details on Google Maps API for android, visit
               //https://developers.google.com/android/reference/com/google/android/gms/maps/package-summary
   
               this._mapView = new com.google.android.gms.maps.MapView(this.androidContext());
               var localeLanguage = java.util.Locale;
   
               //GeoCoder is required to convert a location to get latitude and longitude
               this._geo = new android.location.Geocoder(this.androidContext(), localeLanguage.ENGLISH);
               this._mapView.onCreate(null);
               this._mapView.onResume();
   
               //when mapview control is used, all the lifecycle activities has to be frowaded to below methods.
               app.android.on(app.AndroidApplication.activityPausedEvent, this.onActivityPaused, this);
               app.android.on(app.AndroidApplication.activityResumedEvent, this.onActivityResumed, this);
               app.android.on(app.AndroidApplication.saveActivityStateEvent, this.onActivitySaveInstanceState, this);
               app.android.on(app.AndroidApplication.activityDestroyedEvent, this.onActivityDestroyed, this);
               var that = this;
   
               //A GoogleMap must be acquired using getMapAsync(OnMapReadyCallback).
               //The MapView automatically initializes the maps system and the view
   
               var mapReadyCallBack = new com.google.android.gms.maps.OnMapReadyCallback({
                   onMapReady: (gMap) => {
                       console.log("inside onMapReady function");
                       that._gMap = gMap;
                       var zoomValue = 6.0;
                       that._gMap.setMinZoomPreference = zoomValue;
                       var customerAddress = that._customerInfo.houseNumber + ' ' + that._customerInfo.street + ' ' + that._customerInfo.city + ' ' +
                           that._customerInfo.country + ' ' + that._customerInfo.postalCode;
                       var data = that._geo.getFromLocationName(customerAddress, 1);
                       var latLng = new com.google.android.gms.maps.model.LatLng(data.get(0).getLatitude(), data.get(0).getLongitude());
                       that._gMap.addMarker(new com.google.android.gms.maps.model.MarkerOptions().position(latLng).title(this._customerInfo.lastName +
                           "'s " + "location"));
                       that._gMap.moveCamera(new com.google.android.gms.maps.CameraUpdateFactory.newLatLng(latLng));
                   }
               });
               this._mapView.getMapAsync(mapReadyCallBack);
           }
   
           if (app.ios) {
   
               /*initiating Apple Maps
               For more details on the Apple Maps visit
               https://developer.apple.com/documentation/mapkit */
               this._mapView = MKMapView.alloc().initWithFrame(CGRectMake(0, 0, 1000, 1000));
           }
       }
   
       private onActivityPaused(args) {
           console.log("onActivityPaused()");
           if (!this._mapView || this != args.activity) return;
           this._mapView.onPause();
       }
   
       private onActivityResumed(args) {
           console.log("onActivityResumed()");
           if (!this._mapView || this != args.activity) return;
           this._mapView.onResume();
       }
   
       private onActivitySaveInstanceState(args) {
           console.log("onActivitySaveInstanceState()");
           if (!this._mapView || this != args.activity) return;
           this._mapView.onSaveInstanceState(args.bundle);
       }
   
       private onActivityDestroyed(args) {
           console.log("onActivityDestroyed()");
           if (!this._mapView || this != args.activity) return;
           this._mapView.onDestroy();
       }
   
       //In case of iOS you'll use CLGeocoder API to convert an address to get latitude and longitude.
       //NOTE - API getlatlang is called only on ios devices
   
       private getlatlang(customerAddress) {
           const that = this;
           return new Promise((resolve, reject) => {
               var latLng = new CLGeocoder();
               latLng.geocodeAddressStringCompletionHandler(customerAddress, function (placemarks, error) {
                   if (error === null && placemarks && placemarks.count > 0) {
                       var pm = placemarks[0];
                       var cordinates = {
                           latitiude: "",
                           longitude: ""
                       }
                       cordinates.latitiude = pm.location.coordinate.latitude;
                       cordinates.longitude = pm.location.coordinate.longitude;
                       resolve(cordinates);
                   } else {
                       reject();
                   }
               });
           });
       }
   
       public view() {
           this.valueResolver().resolveValue([this._customerInfo.houseNumber, this._customerInfo.street, this._customerInfo.city, this._customerInfo
               .country, this._customerInfo.postalCode, this._customerInfo.lastName
           ], this.context)
               .then((address) => {
   
                   this._customerInfo.houseNumber = address[0];
                   this._customerInfo.street = address[1];
                   this._customerInfo.city = address[2];
                   this._customerInfo.country = address[3];
                   this._customerInfo.postalCode = address[4];
                   this._customerInfo.lastName = address[5];
   
                   var customerAddress = address[0] + ' ' + address[1] + ' ' + address[2] + ' ' + address[3] + ' ' + address[4];
                   console.log("customer's address = " + customerAddress);
   
                   if (app.ios) {
                       return this.getlatlang(customerAddress)
                           .then((cordinates) => {
                               /* below code is for the apple maps */
                               var latlong = CLLocationCoordinate2DMake(cordinates.latitiude, cordinates.longitude);
                               var annotation = MKPointAnnotation.alloc().init();
                               annotation.coordinate = latlong;
                               annotation.title = this._customerInfo.lastName + "'s" + " location";
                               this._mapView.centerCoordinate = latlong;
                               this._mapView.addAnnotation(annotation);
                           });
                   }
               });
   
           if (app.android) {
               return this._mapView;
           }
           if (app.ios) {
               return this._mapView;
           }
       }
   
       public viewIsNative() {
           return true;
       }
   
       public observable() {
           if (!this._observable) {
               this._observable = new BaseObservable(this, this.definition(), this.page());
           }
           return this._observable;
       }
   
       public setContainer(container: IControl) {
           // do nothing
       }
   
       public setValue(value: any, notify: boolean, isTextValue?: boolean): Promise<any> {
           // do nothing
           return Promise.resolve();
       }
   }
   

   In your import function, if you see errors related to tns-core-modules or mdk-core, you can ignore them. There is currently no reference of such libraries in the MDK editor.

2. Save the MyMapExtension.ts file.

For iOS, you can just use the App store client. Continue with next step.

For Android, you will pass the API key to the MDK client, there is no way public store client can access it, hence you will create a branded client using MDK SDK.

1. Follow steps 1 to 3 from this tutorial.

2. Create below file structure under DemoSampleApp.mdkproject.

       DemoSampleApp.mdkproject
       ├── App_Resources_Merge
          └── Android
              ├── app.gradle
   

   

   Files specified in the .mdkproject/App_Resources_Merge folder override a part of the files in <generated-project>/app/App_Resources. You can find more details about it in help documentation.

3. Provide below information in the app.gradle file. Save the changes.

   dependencies { implementation 'com.google.android.gms:play-services-maps:17.0.0' }
   

4. Follow step 4 from this tutorial to create your branded MDK client.

Make sure you are choosing the right device platform tab above.

Congratulations, you have extended Your MDK App With a Map Custom Control and you can continue with the remaining tutorials in this mission.