Change the markertemplate when another component has mouseover

[tracstarr]

I'm currently adding some map markers where I also have some cards in a column next to the map of the results. Think of airbnb or alltrails. I want to select the given marker on the map when the mouse enters/hovers on the card (and visa versa). Is there a clean blazory way to do this? Do I have to resort to JS? 

[Chrispine Agunja Imbo]

Hi Tracstarr,

 

You can achieve your requirements using the Syncfusion Maps and Card components. In the below sample, we have included multiple Card components that hold a div element that represents the marker templates in the Maps component. When we move the mouse over the Card component, we can change the color of the marker template using the “onmouseenter” and “onmouseleave” events of the HTML div element in the Cards. In these events, we must change the CSS style of the marker templates to achieve your requirement. Please find the code snippet for the same below.

 

Code Snippet:

<div class="control-section">

   <div class="row">

       <div class="col-lg-6 col-md-6">

           <SfCard ID="BasicCard">

               <div style="width:inherit;height:inherit;background-color:blanchedalmond" @onmouseenter="OnMouseEnterMarkerOne"

                    @onmouseleave="OnMouseLeaveMarker"></div>

           </SfCard>

       //..

      //..

       </div>

   </div>

</div>

<style>

   #marker_one {

       width: 30px;

       height: 30px;

       background-color: @BackgroundColor_One;

       border-radius: 50%;

   }

</style>

 

<SfMaps ID="Maps" @ref="maps">

   <MapsLayers>

       <MapsLayer ShapeData='new {dataOptions= https://cdn.syncfusion.com/maps/map-data/world-map.json}' TValue="string">

           <MapsMarkerSettings>

               <MapsMarker Visible="true" DataSource="MarkerOne" TValue="City">

                   <MarkerTemplate>

                       @{

                           <div>

                               <div id="marker_one"></div>

                           </div>

                       }

                   </MarkerTemplate>

               </MapsMarker>

              //..

           </MapsMarkerSettings>

           <MapsShapeSettings Fill="lightgray"></MapsShapeSettings>

       </MapsLayer>

   </MapsLayers>

</SfMaps>

@code {

 

   public void OnMouseEnterMarkerOne()

   {

       BackgroundColor_One = "green";

       BackgroundColor_Two = BackgroundColor_Three = "blue";

   }

 

   public void OnMouseEnterMarkerTwo()

   {

       BackgroundColor_Two = "green";

       BackgroundColor_One = BackgroundColor_Three = "blue";

   }

 

   public void OnMouseEnterMarkerThree()

   {

       BackgroundColor_Three = "green";

       BackgroundColor_One = BackgroundColor_Two = "blue";

   }

 

   public void OnMouseLeaveMarker()

   {

       BackgroundColor_One = BackgroundColor_Two = BackgroundColor_Three = "blue";

   }

}

 

You can find the sample and video that demonstrates the same at the below links.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Maps-948293923

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps_card-1861165703

 

Please let us know if you need any further assistance.

[tracstarr]

Thanks. This seems like a good start - and works well for well defined markers. Is there a way to expand this for a more generic data set of unknown size? Think search results that are dynamic adding 50-80 markers at a time. 

[Indumathi Ravi]

Hi Tracstarr,

To achieve your requirement, you can dynamically add the marker templates and cards by iterating them with the count of objects in the marker data source. We need to pass the corresponding marker object in the “onmouseenter” event of the HTML div element in the card component to change the color of the marker template. In this way, you can dynamically handle your requirements. Please find the code snippet for the same below.

Code Snippet:

<div class="container">

    <div class="cards-container">

        <div class="card-grid">

            @foreach (var marker in MarkerDataSource.Take(25))

            {

                <SfCard ID="BasicCard">

                    <div style="width:inherit;height:inherit;background-color:blanchedalmond"

                         @onmouseenter="() => OnMouseEnterMarker(marker)"

                         @onmouseleave="OnMouseLeaveMarker">

                    </div>

                </SfCard>

            }

        </div>

    </div>

 

    <div class="map-container">

        <button id="marker" @onclick="AddMarker">Add Marker</button>

        <SfMaps ID="Maps" @ref="maps">

            <MapsLayers>

                <MapsLayer ShapeData='new {dataOptions= https://cdn.syncfusion.com/maps/map-data/world-map.json}' TValue="string">

                    <MapsMarkerSettings>

                        @foreach (var marker in MarkerDataSource)

                        {

                            <MapsMarker Visible="true" DataSource="new List<City> { marker }" TValue="City">

                                <MarkerTemplate>

                                    @{

                                        <div>

                                            <div class="marker" style="background-color:@GetBackgroundColor(marker)"></div>

                                        </div>

                                    }

                                </MarkerTemplate>

                            </MapsMarker>

                        }

                    </MapsMarkerSettings>

                    <MapsShapeSettings Fill="lightgray"></MapsShapeSettings>

                </MapsLayer>

            </MapsLayers>

        </SfMaps>

    </div>

</div>

 

@code {

    SfMaps maps;

    public string DefaultBackgroundColor = "blue";

    public string HighlightBackgroundColor = "green";

 

    public class City

    {

        public double Latitude { get; set; }

        public double Longitude { get; set; }

        public string BackgroundColor { get; set; } = "blue";

    }

 

    public ObservableCollection<City> MarkerDataSource = new ObservableCollection<City>

    {

        new City { Latitude=49.95121990866204, Longitude=18.468749999999998 },

        new City { Latitude=59.88893689676585, Longitude=-109.3359375 },

        //..

       //..

 

    };

 

    public void AddMarker()

    {

        MarkerDataSource.Add(new City { Latitude = 41.459865, Longitude = -75.5816517 });

        MarkerDataSource.Add( new City { Latitude = 38.3676216, Longitude = -78.9388426 });

        MarkerDataSource.Add( new City { Latitude = 39.9043006, Longitude = -84.258499 });

        MarkerDataSource.Add( new City { Latitude = 40.08832168, Longitude = -75.38212585 });

        MarkerDataSource.Add( new City { Latitude = 39.687383, Longitude = -86.360845 });

        //..

       //..

    }

   

 

    public void OnMouseEnterMarker(City marker)

    {

        foreach (var m in MarkerDataSource)

        {

            m.BackgroundColor = m == marker ? HighlightBackgroundColor : DefaultBackgroundColor;

        }

    }

 

    public void OnMouseLeaveMarker()

    {

        foreach (var marker in MarkerDataSource)

        {

            marker.BackgroundColor = DefaultBackgroundColor;

        }

    }

 

    public string GetBackgroundColor(City marker)

    {

        return marker.BackgroundColor;

    }

}

 

You can find the sample and video for demonstration at the below links.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Maps247067482

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps_marker787367046

NOTE: In the above sample, we have added 25 markers. You can extend the data source based on your requirement.

Please let us know if you need any further assistance.