how to make cluster of marker gather to be one fat marker

[Kyle Oliveros]

how can I make the clusters of markers to be a fat dot if the map is zoomed out but if the map is being zoomed in that fat dot will explode into clusters just like what my boss wants here is his statement to me and I quote

"On the main map, if markers are selected and there are more than  1 marker, they want to see a cluster of dots, If the map is zoomed out, just a fat dot (it’s ok the dots are on top of each other), If the map is zoomed in close to the mine site, the dots need to be next to each other, so that the users can hover/ click  on specific marker"

[Deepaa Pragaasam]

Hi Kyle, 

We have analyzed your requirement and prepared the sample for the same. When the map is loaded initially single maker is loaded. When the particular marker is clicked the selected marker  name is displayed in the popup. On Clicking the marker the map is zoomed in to display the inner marker items present. We have bound the mouseup event to achieve this functionality . 

On Mousewheel zooming the based on the zooming level the marker are displayed and hidden. The zooming level is obtained in the OnClientZoomedOut event of the maps 

Please refer the below code snippet 

[Maps.ASPX] 

Maps.ASPX] 

<ej:Map ID="dataMarker" OnClientMarkerSelected="markerSelected" OnClientZoomedOut="zoomedOut"   > 

 

</ej:Map> 

 

[JS] 

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

               if (!$(event.target).hasClass("e-mapSelectedShape mapShape")) { 

                   if (event.target.className == "e-icon1 e-map-home") 

                       window.count = 1; 

 

                   else if (event.target.className == "e-icon1 nav-inc-Vert  e-innerIncrement") 

 

                       window.count++; 

                   else if (event.target.className == "e-icon1 nav-dec-Vert e-innerDecrement") 

                       window.count--; 

 

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

 

                   if (window.count > 1) { 

                     

                       markerCount = map.model.layers[0].markers.length + 1; 

 

                       for (i = 0; i < markerCount ; i++) { 

                           window.markerSource[i] = []; 

                           window.markerSource[i] = (dataSource[i]); 

                       } 

 

                       map.model.layers[0].markers = window.markerSource; 

                   } 

                   $("#dataMarker").ejMap("refresh") 

                    

                   window.markerSource = []; 

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

                       $("#dataMarker").ejMap("navigateTo", window.latitude, window.longitude, window.count); 

                   

                  

                

               } 

 

           }); 

The map while initial rendering  

 

Map after clicking and zooming of the marker 

 

We have attached the sample for your reference 

Sample Link: http://www.syncfusion.com/downloads/support/forum/135115/7z/cluster_of_markers-1089373360  

Please let us know if you have any concerns  

Regards, 

Deepaa 

[Deepaa Pragaasam]

Hi Kyle, 

Sorry for the inconvenience caused. We have modified and attached the runnable samples. 

VB Sample: http://www.syncfusion.com/downloads/support/forum/135115/7z/VB_Sample-1805053846  

C# sample: http://www.syncfusion.com/downloads/support/forum/135115/7z/CSample-759035092  

Please let me know if you have any concerns 

Regards, 

Deepaa. 

[Kyle Oliveros]

Hi Deepa 

Can you make that RouteConfig.cs into something that I can remove this error that says

The files '/App_Code/AuthConfig.vb' and '/App_Code/App_Start/RouteConfig.cs' use a different language, which is not allowed since they need to be compiled together.  and I am not using .cs as my backcode I use .vb aside from that I got this error EnableFriendlyUrls is not a member of System.Web.Routing.RouteCollection 

Please note 

that I have different array of country and product so the scenario would be initial loading of map the marker of country can be seen just like your screenshot but if I zoom in that marker will explode into clusters of marker for products so for example I can see the marker of USA, Brazil, India, China and Indonesia on the initial load of the map but if I zoom in the USA marker then the marker of USA will be a cluster of marker for products

thanks  

 

[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

[Kyle Oliveros]

Can  you make a vb version sample because I have an Error stating RouteConfig.cs and RouteConfig.vb cannot be compiled

[Deepaa Pragaasam]

Hi Kyle, 

Sorry for the inconvenience caused.We have modified the sample and attached the runnable sample for your reference 

Sample link: http://www.syncfusion.com/downloads/support/forum/135115/7z/vb_sample-48397055 

Please let me know if you have any concerns 

Regards, 

Deepaa.