-2

I am aware there is a post with a similar title but I am not trying to achieve the same thing. I am trying to achieve something similar to what this website is doing - https://www.commuterclub.co.uk/

(scroll down to the section where is says "Helping commuters across the UK get a better commute")

I am getting information from a JSON api providing me with X and Y coordinates and some text, I want to populate an image with a circle (respresent the x & y coordinates) and a bubble with the text using javascript like in the commuter club website.

I found a plugin - http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Adding-Notes-Markers-To-An-Image-imgNotes.html - and i was able to plot the image with markers and a tooltip but not what i am trying to achieve.

EDIT

I have used the above plugin to put the markers on my image and make them disappear and reappear randomly. see code below:

<script type="text/javascript">
;(function($) {
    $(document).ready(function() {
            var $img = $("#image").imgNotes({
                onShow: $.noop,
                onAdd: function() {
                        this.options.vAll = "bottom";
                        this.options.hAll = "middle";
                        var elem =     $(document.createElement('div')).addClass("mrkr").css({
                                                                        "background-color": "#9AB54D",
                                                                        height: "8px",
                                                                        width: "8px",
                                                                        "border-radius": "60px",
                                                                        "text-align": "center",
                                                                        color: "#fff"
                                                                    }).attr("title", "");
                        var self = this;
                        $(elem).tooltip({
                                content: function() {
                                            return $(elem).data("note");
                                        }
                        });
                        return elem;
                } 
    });
            $(".mrkr").tooltip().tooltip("open");
    $img.imgNotes("import", [   {x: "0.5", y:"0.5", note:"Text 1"}, 
                                {x: "0.322", y:"0.269", note: "Text 2"},
                                {x: "0.9", y:"0.6", note: "Text 3"},
                                {x: "0.1", y:"0.456", note: "Text 4"},
                                {x: "0.345", y:"0.987", note: "Text 5"},
                                {x: "0.824", y: "0.593", note: "Text 6"}]);

    var divs = $('.viewport').find('.mrkr'),
len = divs.length,
randomDiv,
speed = 2000;
var interval = setInterval(
            function() { 
                    randomDiv = Math.floor(Math.random()*len);
                    divs.removeClass('show');
                    divs.eq(randomDiv).addClass('show');                         
            } , speed);
  });
})(jQuery);
</script>

I want to show all 4 markers at a given time and as a new one appears one of the older one fades out.

Javascript isn't my strongest language so all the help you can give will be appreciated.

Thanks

geekysneaks
  • 3
  • 4
  • 1
    The provided example is a google map which includes extensive tooling to achieve this kind of thing. Are you also using a map or is this a generic query for overlaying images with interactive features? – Matt Jan 16 '17 at 16:41
  • *"not what i am trying to achieve"* ... well how would we know what the difference is? Question is far too broad to fit this site's guidelines as it currently stands as per [help] – charlietfl Jan 16 '17 at 16:44
  • @Yoda - I am using an Image, I know the example is using Google maps but I wondered if it was possible to create something like that using an Image. – geekysneaks Jan 16 '17 at 16:58
  • http://stackoverflow.com/questions/34975288/how-can-i-make-an-image-interactive – Matt Jan 16 '17 at 17:05
  • @charlietfl - Sorry I thought I was clear, I want to be able to create something similar to the commuter club website. Showing information from a JSON api. – geekysneaks Jan 16 '17 at 17:14
  • @geekysneaks fine but that isn't a specific code related problem , it is a broad concept and that is not how this site works. Read through the help link provided. This isn't a *"how to"* tutorial site. Had you provided some code based on plugin showing what you currently have and explained in better detail what it should do....that would be possibly an appropriate question – charlietfl Jan 16 '17 at 17:15
  • @charlietfl okay, I will edit and expand on the code I have. – geekysneaks Jan 16 '17 at 17:51
  • Do note however that if the plugin docs and features don't support what you want then modifying the plugin itself would also be too broad – charlietfl Jan 16 '17 at 17:54
  • @charlietfl - updated it. hope this is better. – geekysneaks Jan 16 '17 at 18:34

1 Answers1

0

so you can Iterate through List of Data items you received at Intervals and show one or two pins at a time.

prepend the bubble (html and css) in a string and pass it to createElement each time you show a new pin, and remove the old bubble element from the DOM.

Rahil Lakhani
  • 412
  • 4
  • 7