XAF - Web Map Module (Coming soon in v15.2)

With this release, we're shipping a new Map module for XAF Web apps - allowing you display business objects on different kinds of maps. The module integrates the client-side dxMap and dxVectorMap widgets from DevExtreme into ASP.NET XAF applications via specialized XAF server-side wrappers like List and Property Editors: WebMapsListEditor, WebVectorMapsListEditor and WebMapsPropertyEditor.

Primary Capabilities

While designing this module, we considered customer feedback received during the research we conducted earlier this year and also previous user requests from the Support Center and other sources. Let's take a quick look at the functionality implemented in the initial release:

1. Interactive map displays objects implementing the IMapsMarker interface using the Google Maps API or Bing Maps API:

2. Vector map displays objects implementing the IAreaInfo interface as areas with different colors:

3. Vector map displays objects implementing the IVectorMapsPieMarker interface as pie-chart markers:

You can experience a live demo of our Map module in the ListEditors | Maps section of the offline Feature Center demo that is installed with XAF or check its online version at demos.devexpress.com/xaf/featurecenter once v15.2 is officially released.

You can configure map types via the Model Editor invoked from Visual Studio or in code:

1. Configuring WebMapsPropertyEditor for a DetailView:

2. Configuring WebVectorMapsListEditor for a ListView:

3. Customizing the underlying dxMap widget in code of a ViewController for a ListView:

using DevExpress.Persistent.Base;

namespace DevExpress.ExpressApp.Maps.Web.Controllers {

   public class MapCenterController : ObjectViewController<ListView, Store> {

       protected override void OnViewControlsCreated() {

           base.OnViewControlsCreated();

           ((WebMapsListEditor)View.Editor).MapViewer.ClientSideEvents.Customize = GetCustomizeScript();

       }

       private string GetCustomizeScript() {

           return @"function(sender, map) {

       map.option('center', 'Brooklyn Bridge,New York,NY');

                      map.option('autoAdjust', false);

    }";

       }

   }

}

===========================

We'd love to get your feedback on this new Map module and whether you are planning to use it in upcoming XAF Web apps.

Free DevExpress Products – Get Your Copy Today