How to: Show a Current Location on a Map
- 4 minutes 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.
