Changing the Map Toolbar

[Thomas]

Hi,
currently I am evaluating the telerik map control for WPF. 

The goal is to have a map on the background and a heatmap with a given opacity on top of it. I have implemented an TiledProvider and serveral TileMapSources. I want to switch between the sources and also disable the heatmap completely (I assume I have to switch to the EmptyTileMapSource for that).

Unfortunately the MapCommandBar just supports a single Provider. I tried to work around that issue by copying the CommandBindings and CommandDescriptions of HeatmapProvider to the first provider. However this introduces other problems (the mapstate is not obvious). I would therefore like to replace the MapCommandBar with two MapCommandBars (one for each provider). How can this be done?

Thanks in advance,
Thomas

[Petar Marchev]

Hi,

I was not able to fully understand your question. You should be able to easily add a command to the provider's commands that allows you to disable the heat map. I have attached a project to demonstrate this. I have added a "Disable heatmap" command to the command bar.

Please examine the attached project and let us know if this approach works for you. If not please do send us a more detailed explanation of your scenario and the results you are after. It would be of great help to us if you could send us a snapshot that depicts how you want your application to look at a final stage. It would also be of help if you could send us a sample project, which we can run, that demonstrates what you have currently achieved.

Greetings,
Petar Marchev
the Telerik team

[Thomas]

Hi Peter,
thank you for your answer and the example.

First of all, then I talk about a heatmap, I don't mean the shape-thingy which is provider by the map-control. In my case the heatmap is another TileProvider. I basically have two TileProviders (the Bingmap and our custom Heatmap one). Please take a look at the attached screenshot for better understanding.
I want to have the normal commands of the Bingmap-provider in the standard menu and also and additional list of commands in second menu (one menu per provider). The second menu provides command for switching between different heatmaps (mean different TileMapSources) and also an option to turn the Heatmap off. 

Meanwhile I managed to switch the Mode (means select a different TileMapProviders) in a "hacky" way and faced a second problem, which is an (possible) bug in the TileMapProvider (please also have a look at the associated bug: http://www.telerik.com/community/forums/wpf/map/bug-provider-order.aspx).  Whenever I set the heatmap-mode the order of the Providers is changed somehow.  See the following code:

    public class HeatMapProvider : TiledProvider
    {
        public HeatMapProvider()
        {
            var measurementTypeRepository = new MeasurementTypeRepository();
            var measurementTypesDict = measurementTypeRepository.GetDetectionTypes();
 
            foreach (var measurementType in measurementTypesDict) {
                MapSources.Add(measurementType.Key, new HeatMapSource(measurementType.Key));
            } 
            MapSources.Add("empty", new EmptyTileMapSource());
 
            SetupCommands(measurementTypesDict.Keys);
        }
 
        public override ISpatialReference SpatialReference
        {
            get
            {
                return new MercatorProjection();
            }
        }
 
        private void SetupCommands(IEnumerable<string> keys)
        {
            var innerResourceDictionary = new ResourceDictionary() {
                Source = new Uri("/Telerik.Windows.Controls.DataVisualization;component/Themes/Map/OfficeBlack/Styles.xaml", UriKind.Relative)
            };
            var sourceDataTemplate = innerResourceDictionary["MapSourceButton"] as DataTemplate;
 
            foreach (var key in keys)
            {
                  var commandDescription = new CommandDescription {
                    Command = (ICommand) new RoutedUICommand("Heatmap " +key, "ChangeSourceCommand", typeof (MapProviderBase)),
                    DataTemplate = sourceDataTemplate,
                    ImageUri = null,
                    CommandParameter = key
                  };
                  this.Commands.Add(commandDescription);
                  this.CommandBindingCollection.Add(new CommandBinding(commandDescription.Command, ExecuteChangeSourceCommand, CanExecuteChangeSourceCommand));
            }
        }
 
        private void CanExecuteChangeSourceCommand(object sender, CanExecuteRoutedEventArgs e)
        {
			e.CanExecute = true;
        }
 
        private void ExecuteChangeSourceCommand(object sender, ExecutedRoutedEventArgs e)
        {
            var str = e.Parameter as string;
            if (str == null)
                return;
            this.Mode = str;
        }
 
 
 
        public static readonly DependencyProperty ModeProperty =
            DependencyProperty.Register("Mode", typeof (string), typeof (HeatMapProvider), new PropertyMetadata(default(string), ModeChanged ));
 
        public string Mode
        {
            get { return (string) GetValue(ModeProperty); }
            set { SetValue(ModeProperty, value); }
        }
 
        private static void ModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs args) 
        {
            var provider = d as HeatMapProvider;
            if (provider != null) {
                CommandManager.InvalidateRequerySuggested();
                provider.SetMapSource((string)args.NewValue);
            }
        }
 
    }   
 
	public class HeatMapSource : TiledMapSource
    {
        public string ValueType { get; private set; }
 
        public HeatMapSource( string valueType )
            : base(1, 20, 256, 256)
        {
            ValueType = valueType;
            UniqueId = ValueType;
        }
 
        public override void Initialize()
        {
            RaiseIntializeCompleted();
        }
 
        protected override Uri GetTile(int tileLevel, int tilePositionX, int tilePositionY)
        {
            int zoomLevel = ConvertTileToZoomLevel(tileLevel);
            string url = string.Format("http://localhost:8080/heatmap/{0}/{1}/{2}/{3}/{4}.png", ValueType, zoomLevel, tilePositionX, tilePositionY, Guid.NewGuid());
            return new Uri(url);
        }
    }
}

[Petar Marchev]

Hi,

Thanks for the attached code and snapshot.

I think I now understand what you are trying to achieve. You want to have a second MapCommandBar so that a second menu can be available. And you want to keep the first menu to only control the Bing provider and the second menu to only control the heat map. Please do let me know if I have understood you correctly this time.

There is no way to achieve this with out-of-the-box means. However you can do this manually. You need to simply create your own drop down list. In that list you can place buttons that invoke the commands of your heat map provider.

You can also retemplate the map and make this drop down list a part of the map's template. Here is a link that can help you with this task.

Kind regards,
Petar Marchev
the Telerik team