The requested page is not available for the requested platform. You are viewing the content for Default platform.

How to: Show a Current Location on a Map

  • 4 min to read

This topic describes how to access the dxMap widget directly using JavaScript code and show a current position on a map in a Mobile application.

  • Add the ShowCurrentLocationController View Controller to the Mobile module project.
  • In the constructor, set the ViewController.TargetViewId property, for example, to MapsMarker_ListView.
  • Override the OnViewControlsCreated method and access the MobileMapsListEditor List Editor and its Map control.
  • Specify the control's Map.OnCustomize property with the string which is the JavaScript client-side event to get a current position using the navigator.geolocation.getCurrentPosition() method and set this position as the map's center. Note that JavaScript code should be enclosed in brackets.
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Maps.Mobile;
using DevExpress.ExpressApp.Maps.Mobile.Editors;
//...
public class ShowCurrentLocationController : ViewController<ListView> {
    public ShowCurrentLocationController() {
        TargetViewId = "MapsMarker_ListView";
    }
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        MobileMapsListEditor mobileMapsListEditor = View.Editor as MobileMapsListEditor;
        if (mobileMapsListEditor != null) {
            Map map = mobileMapsListEditor.Control as Map;
            map.OnCustomize = GetCustomizeScript();
        }
    }
    private string GetCustomizeScript() {
        return
        @"(function(mapInstance) {
            mapInstance.on('ready', function(e) {
                var googleMap = e.originalMap;    
                var showError = (function(errorText) {
                    DevExpress.ui.notify({ closeOnClick: true, message: errorText, type: 'error' }, 'error', 5000);
                });                        
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };
                        var infoWindow = new google.maps.InfoWindow({map: googleMap});
                        infoWindow.setPosition(pos);
                        infoWindow.setContent('Current location.');
                        googleMap.setCenter(pos);
                    }, 
                    function(error) {
                        var errorText = '';
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                errorText = 'User denied the request for Geolocation.'
                                break;
                            case error.POSITION_UNAVAILABLE:
                                errorText = 'Location information is unavailable.'
                                break;
                            case error.TIMEOUT:
                                errorText = 'The request to get user location timed out.'
                                break;
                            case error.UNKNOWN_ERROR:
                                errorText = 'An unknown error occurred.'
                                break;
                        }
                        showError(errorText);                            
                    });
                } else { showError('Your browser does not support geolocation'); }
            });
        })";
    }
}

The result is demonstrated in the image below.

CurrentLocationOnMap_Mobile