How to display RadGridView in a dynamic layer of a WeatherStation's RadMap

8 posts, 1 answers
  1. Elena
    Elena avatar
    7 posts
    Member since:
    Apr 2011

    Posted 07 Jun 2011 Link to this post

     

    Добрый день!

    (приношу извинения за автоматический перевод ниже)

     

    Я разрабатываю приложение, которое должно отображать датчики на карте.

    Показания датчиков непрерывно записываются в базу MS SQL Server 2008 К2

    При нажатии на пиктограмму (или кружок) датчика изображенную на карте нужно показать RadGridView c Real-Time данными от датчика.

    Аналогичное поведение нужно обеспечить, если увеличивать масштаб карты при центрировании датчика.

    Мне хотелось бы использовать Dynamic Layer и ViewModel, такие же, как в примере Weather Stations.

    Но я не могу понять, две вещи:

    1)    Нажатие на пиктограмму датчика на карте должно вызвать событие, которое связано с командой ViewModel, поэтому на карте датчики нужно создавать как кнопки RadButtons?

    Так сделано в Weather Stations:

    <telerik:RadButton Style="{StaticResource WidgetButtonStyle}">
      
    Command="{Binding DataContext.ViewDetailsCommand, ElementName=RadMap1}" CommandParameter="{Binding}" Tag="{Binding DataContext, ElementName=RadMap1}" >
      
                                                   <i:Interaction.Triggers>
      
                                                               <i:EventTrigger EventName="MouseEnter">
      
    <ei:PlaySoundAction Source="/Sounds/Swish.mp3"/>
      
                                                               </i:EventTrigger> 
      
                                                               

    2)   

    При нажатии на такую кнопку я получу данные из WCF в DynamicSource в методе

    public void ItemsRequest(object sender, ItemsRequestEventArgs e)

    и заполню коллекцию для отображения ее в RadGridView.

    Только как я могу во ViewModel при обработке 1) создать в DynamicLayer и отобразить RadGridView?

     

    Если можно более подробно объяснить, как отображается RadGridView в примере Weather Stations, в обработчике:

            private void OnViewDetailsCommandExecuted(object obj)

            {

                this.CurrentWeatherInfo = obj as WeatherInfo;

                this.SetZoomToDetailsLevel();

      }

    в примере в RadGridView  нет связанного c ViewModel свойства Visibility!

    Спасибо Вам за помощь в создании программы


     

    Good afternoon!

     

    I create the application which should display indications of sensors on a RadMap.

    I have tried to create the application, as in your example WeatherMonitor (WeatherStation).

     It is necessary in DynamicLayer to show on a map sensors in the form of multi-coloured circles, in dependence

    from their state. By pressing (or map zooming) on a sensor circle it should be displayed RadGridView

    with sensor indications.

    For me two questions:

    1. Circles (figure) of sensors should be buttons on a map to binding to them processing of event of pressing a circle

    2. How in DynamicLayer to display RadGridView by pressing a circle? It should be a separate window or not?

    Because of a design abundance in sample WeatherMonitor it is very difficult to understand logic of operation of the application!

    Can be eat more detailed explanation of algorithm of operation WeatherMonitor than here

     

    WeatherMonitor's blog

     

     

    Thanks for any help

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 09 Jun 2011 Link to this post

    Hi Elena,

    The Weather Station is quite complex application so I wouldn't recommend it as a starting point for your work with RadMap. It seems to me that it would be better to start from the simple examples in our demo application which demonstrates the most important features of the map control. Then you will be able to select those that you need to implement in your application.

    1. InformationLayer is ItemsControl that supports the usage of different item templates. Like most other items controls it allows you to use ItemsTemplateSelector to select the corresponding template based on the data or the map zoom level. I would recommend you to take a look into the following sample in our demo application:

    http://demos.telerik.com/silverlight/#Map/DataBinding

    2. You can find example which demonstrates major features of the DynamicLayer here:

    http://demos.telerik.com/silverlight/#Map/DynamicLayer

    Weather Stations - это достаточно сложное приложение. Так что я бы не рекомендовал Вам начинать работу с RadMap  с этого приложения. Оно активно использует различные возможности RadMap. Мне кажется, что было бы лучше начать с более простых примеров в нашем демонстрационном приложении, которое показываетосновные возможности RadMap. После их обзора Вы сможете выбрать те из них, которые необходимы для реализации Вашего приложения.

    1. InformationLayer является ItemsControl и позволяет использовать различные шаблоны представления данных. Подобно многим другим ItemsControl он разрешает Вам исполльзовать ItemTemplateSelector для выбора шаблона в зависимости от данных и уровня детализации (ZoomLevel) RadMap. Я бы рекомендовал Вам посмотреть следующий пример:

    http://demos.telerik.com/silverlight/#Map/DataBinding

    2. Вы можете найти пример, который демонстрирует основные возможности DynamicLayer здесь:

    http://demos.telerik.com/silverlight/#Map/DynamicLayer

    Best wishes,
    Andrey Murzov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Elena
    Elena avatar
    7 posts
    Member since:
    Apr 2011

    Posted 09 Jun 2011 Link to this post

    Thanks for your answer, Andrey!

     

    I will probably try to use InformationLayer but if it is possible

    Correct me if I am mistaken in WetaherStation:

     

    From consideration Styles.xaml and Main.xaml to me it is clear that

    WeatherStation it is created with application of MVVM pattern and in ViewModel do not form Controls

    ViewModel only operates with the data from DynamicSource in collection WetaherInfo

    ViewModel defines commands who work with logic of data model, and are binded to Controls from View

    All visual behaviour WetaherStation is realised in Xaml code with usage ControlTemplates and VisualStateManager

    As a matter of fact, at choice Location on a map it is displayed

     

    <local:WeatherInfoItemTemplateSelector x:Name = "WeatherInfoItemTemplateSelector"

                                                   BasicItemTemplate = "{StaticResource BasicWeatherInfoItemTemplate}"

                                                   DetailedItemTemplate = "{StaticResource DetailedWeatherInfoItemTemplate}"/>

     

    <DataTemplate x:Key = "BasicWeatherInfoItemTemplate">

     

    <! - here in Styles.xaml it is defined ControlTemplate with name WidgetButtonStyle->

                                                   <telerik:RadButton Style = "{StaticResource WidgetButtonStyle}"                                                       

                                                   telerik:MapLayer. Location = "{Binding LocationInfo. Center}"

    <! - here there is a binding to the output agent of the command from ViewModel  

             private void OnViewDetailsCommandExecuted (object obj)

     ->

                                                   Command = "{Binding DataContext. ViewDetailsCommand, ElementName=RadMap1}"                                                                                          CommandParameter = "{Binding}"

                                                   Tag = "{Binding DataContext, ElementName=RadMap1}">

     

    <! - in Styles.xaml->

    <Style x:Key = "WidgetButtonStyle" TargetType = "telerik:RadButton">

    Defines a number of states and logical units of this already new control

    <VisualStateGroup x:Name = "CommonStates">

                    <VisualState x:Name = "MouseOver"> <! - displays a brief information->

     

    Accordingly

    <! - in Styles.xaml->

    <Style x:Key = "DetailedPanelStyle" TargetType = "ContentControl">

                                   <Setter Property = "VerticalAlignment" Value = "Center"/>

                                   <Setter Property = "HorizontalAlignment" Value = "Center"/>

     

                                   <Setter Property = "Template">

                                                   <Setter. Value>

                                                                   <ControlTemplate TargetType = "ContentControl">

    <!-- Defines new Control displaying the detailed information

     

    It is important to me to understand logical switching between states and interaction thus with ViewModel.

    By pressing on telerik:RadButton Style x:Key = "WidgetButtonStyle" we pass in state XState

    and thus through a binding to the trigger output agent OnXState from ViewModel is called

    -->

     

    I need to realise following behaviour in the program

    1. To load map BingProvider

    2. To display on a map sensors in the form of Circles  or ToolTip received of model EF4.0 through WCF or WCF RIA

    3. The sensor has some measures

    4. By pressing a sensor tag it is necessary to show RadGridView with current indications of sensors near the sensor on a map

    5. It is necessary to display indications of several sensors in several RadGridView on a map

    6. It is necessary to provide possibility to close the sensor indication

     

    It agree with you, Andrey that example WeatherStation very difficult, but before me the simple task is put too not...

     

     

    Please, once again I ask you to explain me the logic of transition between states at mapping

     

     

    Thanks

  5. Teodor
    Admin
    Teodor avatar
    501 posts

    Posted 14 Jun 2011 Link to this post

    Hello Elena,

    Let me try to clarify some of the points you have:

    1. To load map BingProvider
      This article reveals how to do the above. Note that you need to have a Bing Maps Key.

    2. To display on a map sensors in the form of Circles or ToolTip received of model EF4.0 through WCF or WCF RIA.
      In order to display items on a RadMap, you need to have InformationLayer or DynamicLayer. The WeatherStation demo uses DynamicLayer. Since it derives from Telerik's ItemsControl, we have used ItemTemplateSelector to apply different DataTemplates to the items shown on the map (depending on the zoom level we show detailed or basic information). Feel free to use this approach should you need to display different information according to some factor.

    3. By pressing a sensor tag it is necessary to show RadGridView with current indications of sensors near the sensor on a map
      You can use a Popup or RadWindow for this.

    4. It is necessary to display indications of several sensors in several RadGridView on a map
      Once these several RadGridViews are items of a Dynamic/Information Layer, this should come out of the box.
    Hope this helps. Let us know in case you have further queries.

    Greetings,
    Teodor
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Elena
    Elena avatar
    7 posts
    Member since:
    Apr 2011

    Posted 24 Jun 2011 Link to this post

    Thanks Teodor for your help 

    If will allow still to steam of the common questions 

    I think that for a wide range of the applications displaying labels on a map it is required.
    By pressing a label or mouse cursor on label and displayed the detailed information.
    The increase in scale of a map is thus possible or not.

    It would be healthy to receive not a difficult example of such operation with a map. 
    I think that at such mode of work with a map it is necessary, as you and have made in example WeatherMonitor,
    to create TemplateSelector displaying the stylised button at smaller increase in a map and ItemControl with DataTemplate at large scale increase.

    In your example DelegateCommand ViewDetailCommand command is attached with the button with event stub ViewDetailCommandExecuted.
    It calls SetZoomToDetailsLevel (
    detailedViewZoomLevel) as a result a map is scaled and the detailed information on the template is displayed. Correctly I argue or not? Probably you truly to me have advised to use in my project InformationLayer. If to use DynamicLayer in such project it is necessary after map loading in method DynamicSource. ItemsRequest to load the information on sensors and when the concrete sensor is selected it is necessary to load in the same method its indications in DetailInfos DataTemplate. My theoretical knowledge of technology WPF it is not enough to understand difficult DataTemplate example WeatherMonitor.
    Therefore I ask to forgive for naive questions
    Where in example WeatherMonitor there is a logic of return from Detail to BasicTemplate?

    If to remove all animation and response to rendering of the mouse for mapping of a brief information on weather what bindings to ViewModel need to be left? 

    If to simplify my task so:
    1. After loading of a map I in DynamicLayer. DynamicSource. ItemsRequest I load a collection of sensors in property ViewModelspublic ObservableCollection <Sensor> {...}
    2. I specify as unit DynamicLayer MapTemplateSelector   SensorDataTemplate   MeasurementsDataTemplate
    3. SensorDataTemplate RadButton or ToolTip - a label on small scale of a map
    4. MeasurementsDataTemplate RadGrid or mine ItemControl DataTemplate
    5. I assign an eccles-jordan circuit for SensorDataTemplate with the output agent in ViewModel.
    As a result the map to increase and will display in DynamicLayer MeasurementsDataTemplate
    6. After me it is necessary to load in method DynamicSource. ItemsRequest from a server of the indication of the sensor 

    Questions:

    What it is necessary to realise in DynamicSource and ViewModel for that the minimum functionality?
    What methods ViewModel and properties need to be created and to what properties of XAML templates and map need to be binded them? 

    Thanks
    (I apologise for the automatic translator)

    Спасибо Теодор за Вашу помощь

    Если позволите еще пару общих вопросов

    Я думаю, что для широкого круга приложений, отображающих метки на карте требуется

    при нажатии на метку или подведение курсора отображать детальную информацию относящуюся к метке.

    При этом возможно увеличение масштаба карты или нет.

    Было бы здорово получить не сложный пример такой работы с картой.

    Я думаю, что при таком способе работы с картой нужно, как Вы и сделали в примере WeatherMonitor,

    создавать TemplateSelector отображающий стилизованную кнопку при меньшем увеличении карты и ItemControl с DataTemplate при большем увеличении масштаба.

    В Вашем примере к кнопке присоединена команда DelegateCommand ViewDetailCommand с обработчиком события ViewDetailCommandExecuted. Он вызывает SetZoomToDetailsLevel(

    detailedViewZoomLevel) в результате карта масштабируется и отображается детальная информация по шаблону. Правильно я рассуждаю или нет?

     

    Возможно Вы верно мне посоветовали использовать в моем проекте InformationLayer. Если использовать DynamicLayer в таком проекте, то нужно после загрузки карты в методе DynamicSource.ItemsRequest загружать информацию о самих датчиках, а когда конкретный датчик выбран нужно в этом же методе загружать его показания в DetailInfos DataTemplate.

    Моих теоретических знаний технологии WPF недостаточно чтобы понять сложные DataTemplate примера WeatherMonitor.

    поэтому прошу простить за наивные вопросы

    Где в примере WeatherMonitor есть логика возврата от Detail к BasicTemplate?

    Если убрать всю анимацию и реакцию на подведение мыши для отображения краткой информации о погоде, то какие привязки к ViewModel нужно оставить?

    Если упростить мою задачу так:

    1. После загрузки карты я в DynamicLayer.DynamicSource.ItemsRequest загружаю коллекцию датчиков в свойство ViewModels

    public ObservableCollection<Sensor> { ... }

    2. Указываю в качестве элемента DynamicLayer

    MapTemplateSelector

    SensorDataTemplate

    MeasurementsDataTemplate

    3. SensorDataTemplate RadButton или ToolTip - метка на мелком масштабе карты

    4. MeasurementsDataTemplate RadGrid или мой ItemControl DataTemplate

    5. Назначаю тригер для SensorDataTemplate с обработчиком в ViewModel. В результате карта увеличиться и отобразит в DynamicLayer MeasurementsDataTemplate

    6. После мне нужно загрузить в методе DynamicSource.ItemsRequest с сервера показания датчика

    Вопросы:

    Что еще нужно реализовать в DynamicSource и ViewModel для эотй минимальной функциональности?

    Какие методы ViewModel и свойства нужно создать и к каким свойствам шаблонов XAML и карты их нужно привязать?

    Спасибо

  7. Teodor
    Admin
    Teodor avatar
    501 posts

    Posted 30 Jun 2011 Link to this post

    Hi Elena,

    Thank you for your reply.

    From what I manage to catch reading the automatic translation, your main concern is how you switch different DataTemplates/Styles of data displayed on the map. Here is how this works in the WeatherMonitor application:

    1. The RadMap there uses DynamicLayer
    2. The DynamicLayer derives from Telerik.Windows.Controls.ItemsControl control which has a ItemTemplateSelector property. It can be used to give different DataTemplates to different items. Here is the usage in the WeatherMonitor application:

    <local:WeatherInfoItemTemplateSelector x:Name="WeatherInfoItemTemplateSelector"
        BasicItemTemplate="{StaticResource BasicWeatherInfoItemTemplate}"
        DetailedItemTemplate="{StaticResource DetailedWeatherInfoItemTemplate}" />
     
    <telerik:DynamicLayer x:Name="dynamicLayer" DynamicSource="{Binding MapSource}"
        ItemTemplateSelector="{StaticResource WeatherInfoItemTemplateSelector}" >
            <telerik:ZoomGrid LatitudesCount="4" LongitudesCount="4" MinZoom="4" />
            <telerik:ZoomGrid LatitudesCount="256" LongitudesCount="256" MinZoom="10" />
    </telerik:DynamicLayer>

    As you see we use 2 DataTemplates and we assign them in the WeatherInfoItemTemplateSelector class:

    public class WeatherInfoItemTemplateSelector : DataTemplateSelector
        {
            public DataTemplate BasicItemTemplate { get; set; }
            public DataTemplate DetailedItemTemplate { get; set; }
     
            public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
                switch ((container.GetVisualParent<DynamicLayer>().MapControl).ZoomLevel)
                {
                    case 10:
                    case 11:
                        return this.DetailedItemTemplate;
                    default:
                        return this.BasicItemTemplate;
                }
            }
        }


    Another way to have various items on different zoom levels is to use Styles. See how you can do that in this example. 

    Hope this leads you to the right direction. Let us know in case you need more support in the future.

    Regards,
    Teodor
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Elena
    Elena avatar
    7 posts
    Member since:
    Apr 2011

    Posted 30 Jun 2011 Link to this post

    Thanks for your advices Teodor!

     

    You have helped me to write an application template of RadMap

    I apply it

    Correct that will consider it necessary

     


    By this example for me 3 questions:

    1 How to anchor a detailing window position to station control position on map

    2 How to show loading indicator of the data in loaded in StationDataService

    3 If it is a lot of measurements, and it is necessary to show only last actual 20-30,

        it is possible to think up that what property and the main thing as it to load in WCF RIA?

     


    My ticket ID is: 439478  


    Thanks

     

  9. Answer
    Teodor
    Admin
    Teodor avatar
    501 posts

    Posted 01 Jul 2011 Link to this post

    Hello Elena,

    Thank you for contacting us.

    1. Once items are populated in the Dynamic/Information layer, the RadMap automatically takes care of positioning them according to their Location, so all you need is to set your items coordinates properly. Additionally, you can control item's offsets through Margin properties in the Style / DataTemplate of the items.

    2. I am not sure I understand the question clearly, but if you need to show a busy indication while loading some data, feel free to use the RadBusyIndicator. Refer to the online demo and help sections for more insight on that.

    3. You can call your RIA service Query with a Where or Take clause (or any other that match your filtering need) to shrink the results set, like:

    var query = Context.GetStationsQuery(upLeft_Longitude, upLeft_Latitude, lowRight_Longitude, lowRight_Latitude).Take(30);

    Hope this helps you.
    All the best,

    Teodor
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner