Dynamic Map Markers

10 posts, 0 answers
  1. Chuck
    Chuck avatar
    35 posts
    Member since:
    Oct 2008

    Posted 26 Jun 2014 Link to this post

    I am using the map and all is working mostly. My problem is how can I change the map marker based on the data feed?

    I am getting my data as latlng = [32.123, 80.123], name = "KDAY", color = "green"

    I can get the marker to show up in the correct place and the name set properly the next thing I need to do is set the color of the marker based on the color field. I have three different colors that I need to be able to use.

    Any ideas?
  2.
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 30 Jun 2014 Link to this post

    Hi Chuck,

    The problem here is to set the marker's color because in the markerCreated haven't it. But we will fix this issue for the next official release of the Kendo UI.

    Now you can set the color only with class. For other two properties you can use titleField and locationField. You can examine this example: http://trykendoui.telerik.com/@germanov/eYaY/3

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Chuck
    Chuck avatar
    35 posts
    Member since:
    Oct 2008

    Posted 30 Jun 2014 Link to this post

    Thanks for your help. I did manage to get it working.

    Here is my short write up and solution. 

    Hope this helps someone else.

    Chuck
  7. Matt
    Matt avatar
    2 posts
    Member since:
    Dec 2012

    Posted 05 Apr 2015 Link to this post

    Hristo,

     Was this functionality part of a release yet? If so can you send me a link to an example on setting a markers color.

     

    Thanks,

     

    Matt

  8.
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 08 Apr 2015 Link to this post

    Hi,

    The markerActivate event will fire when a marker DOM element has been created.
    It can be used to change sprites, styles and content on per-element basis.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Gerber
    Gerber avatar
    8 posts
    Member since:
    May 2014

    Posted 06 Mar 2018 in reply to Chuck Link to this post

    Hi Chuck - your solution is actually what we need but the link is no longer working. I know it's been a couple of years now. Is it ok if you post again your solution.

    Thanks,

    Gerber

  13. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 08 Mar 2018 Link to this post

    Hello, Gerber,

    We have a Knowledge Base article with a runnable example which uses the suggested approach - adding a handler to the markerActivate event and customizing the marker dynamically:

    https://docs.telerik.com/kendo-ui/knowledge-base/map-marker-color-from-field

    Please check it out and let me know if you need further help with the suggested approach.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  14.
  15. Gerber
    Gerber avatar
    8 posts
    Member since:
    May 2014

    Posted 04 May 2018 in reply to Alex Hajigeorgieva Link to this post

    Hi Alex - thank you for your reply.

    Do you have an example wherein the marker color dynamically change based on value provided from datasource? I have attached an example image map.

    Appreciate it.

    Thanks,

    Gerber

  17. Gerber
    Gerber avatar
    8 posts
    Member since:
    May 2014

    Posted 04 May 2018 in reply to Gerber Link to this post

    By The way I wrote it using ASP.NET MVC source
  19. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 08 May 2018 Link to this post

    Hello, Gerber,

    From the private thread that we have discussed the same approach, I understand that you have already found the solution you were looking for. However, I will post my reply here for any future visits to the same topic.

    This functionality is not a built-in property of the marker but it is easily achievable by adding an event handler to the markerActivate event.

    At this point, I suggest either adding a class to the marker element and then targeting the colour with CSS rules:

    <style>
         .k-marker.low {
           color:green;
         }
         .k-marker.medium {
           color:yellow;
         }
         .k-marker.high {
           color:red;
         }
       </style>           
      
    markerActivate:function(e){
       e.marker.element.addClass(e.marker.dataItem.risk);
    }

    http://dojo.telerik.com/@bubblemaster/EXIxEmUS

    You may submit an official Feature request if such functionality is important to you. I had a look through the ones that we have for DataViz and Map but there wasn't one for a colour field of the marker data.

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=46450&query=map

    The most popular requests get looked at by the Product Manager and pushed forward to the roadmap.

    Let me know if I may assist you further. 

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  20.
Back to Top