map marker and bubbles

[Kyle Oliveros]

Hi can it be done combining the map markers and bubbles of map what  I mean is that in initial load you can see the bubbles but if you zoom in a bubbles it will become cluster of markers

[Deepaa Pragaasam]

Hi Kyle, 

We have analyzed your requirement and prepared sample according to your requirement. 

In the sample initially we have loaded the bubble and single marker together. When mouse wheel zooming is done then cluster of markers appear in the sample 

We have added the cluster of markers in the mouse wheel event of the windows 

[Map.aspx] 

<ej:Map ID="drillDown" runat="server"  Background="White"  OnClientZoomedIn="zoomedIn" OnClientMarkerSelected="markerSelected" OnClientZoomedOut="zoomedOut"> 

 

          <Layers> 

                                                <ShapeSettings Fill="#C3E6ED" StrokeThickness = "0.5" Stroke = "white" HighlightColor = "#63B7B7" HighlightStroke = "white" ValuePath = "name"/> 

 

                           <SubLayers> 

                                  <ej:ShapeLayer ShapeDataPath = "country" ShapePropertyPath = "name"   MapItemsTemplate = "labeltemplate" ShowMapItems = "true" > 

                        <BubbleSettings ShowBubble = "true" ValuePath = "Sales" MinValue = "20" MaxValue = "30" Color = "#379F64"></BubbleSettings> 

                                         <ShapeSettings Fill = "#9FD0D3" StrokeThickness = "0.2" Stroke = "white" HighlightColor = "#63B7B7"></ShapeSettings> 

                                          

                                  </ej:ShapeLayer> 

                           </SubLayers> 

                     </ej:ShapeLayer> 

 

 

              </Layers> 

       </ej:Map> 

 

 

[JS] 

 

$(window).on('mousewheel', function (event) { 

 

                           var map = $("#MainContent_drillDown").data("ejMap"); 

 

                           window.markerSource = [];                 

 

                           if (window.zoomedLevel == 1) 

                                  map.model.layers[0].markers = initalDataSource; 

                           else 

                                  map.model.layers[0].markers = dataSource; 

                           map.model.layers[0].markerTemplate = "template"; 

                           $("#MainContent_drillDown").ejMap("refresh"); 

                           if ((window.latitude && window.longitude) !== undefined) 

                                  $("#MainContent_drillDown").ejMap("navigateTo", window.latitude, window.longitude, window.zoomedLevel); 

 

                        }); 

 

Please refer the sample screenshot 

Initial Rendering 

 

After zooming 

 

We have attached the sample for your reference 

Sample link: http://www.syncfusion.com/downloads/support/forum/135171/7z/bubbleandmarker-650859309 

Please let me know if you have any concerns 

Regards, 

Deepaa