Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Filter map markers in javascript

Posted on 2013-06-12
4
Medium Priority
?
777 Views
Last Modified: 2013-06-14
I am experimenting with the open source tools:  TileMill and MapBox.  In particular, I am using the Weekend Picks template.   Part of this template involves the following bit of javascript code that I am having trouble understanding.  I know generally that this code accomplishes the task of filtering the various markers, but I just don't understand how it works.

    var container = $('#markerfilters');
    $.each(tilejson.markers.markers(), function(index, m) {
        var s = m.data.properties['marker-symbol'];

        if (container.find('[href="#' + s + '"]').length) return;

        var el = $(document.createElement('a'))
            .addClass('markerfilter')
            .attr('href', '#' + s)
            .css('background-image', 'url(http://a.tiles.mapbox.com/v3/marker/pin-l-'+s+'+000000.png)')
            .bind('click', filter);
        container.append(el);
    });


    $('[href="#all"]').bind('click', filter);


    function filter(e) {
        container.find('a').removeClass('selected');
        var id = $(this).addClass('selected').attr('href').replace('#', '');
        tilejson.markers.filter(function(feature) {
            return feature.properties['marker-symbol'] == id || id == 'all';
        });
        return false;
    }

Open in new window


I would really benefit from a detailed explanation, if someone is able to help.  Thanks.
0
Comment
Question by:DanielAttard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 39245500
Line by line
// This line creates a JQuery object for the #markerfilters object - this will be used 
// in the .each loop

    var container = $('#markerfilters');

// Loop through the list of markers returned by the call to tilejson.markers.markers()
// this will return an arry of objects that contain marker information
// Each iteration of the ach loop (for each item in the array) gets passed the index
// of that item and the item itself

    $.each(tilejson.markers.markers(), function(index, m) {

// get the id of the marker-symbol from the array

        var s = m.data.properties['marker-symbol'];

// This is just a shorthand way of determining if the item exists in the container already
// It is calling the .find function on the href attribute set to a concatenation of '#'
// and the marker-symbol retrieved above. The JQuery .find method will return an 
// array of elements that match the selector criteria - in this case there should only
// be 0 or 1. By checking the length of the return array the code determines if the
// element exists already in the container - in which case it is returns and allows the 
// loop to continue. If the element does not exist length will return 0 and so the code
// will continue.

        if (container.find('[href="#' + s + '"]').length) return;

// If we get here then the marker does not exist so create it
// The code below uses chaining to achieve the desired result
// Each call to a JQuery function returns a JQuery object
// So calls can be chained together
        var el = $(document.createElement('a'))
// Give it a class
            .addClass('markerfilter')
// Set its href to # + marker-symbol value retrieved above
            .attr('href', '#' + s)
// Give it some styling based on its marker symbol

            .css('background-image', 'url(http://a.tiles.mapbox.com/v3/marker/pin-l-'+s+'+000000.png)')
// Bind a click event handler to the marker
            .bind('click', filter);
// And finally append the newly created <a> element to the end of the content in the 
// container id=markerfilters

        container.append(el);
    });

// Here we bind the click event to the element with attribute href = #all - I assume
// This exists in the markup somewhere

    $('[href="#all"]').bind('click', filter);

// This is the event handler for the click event we bound in the code above

    function filter(e) {
// This line removes the selected class from all <a> elements in the container
        container.find('a').removeClass('selected');
// This adds the selected class to the <a> element that was clicked and fired this
// event handler call.
// After setting the class the code removes the '#' from the href attribute for the
// item clicked
        var id = $(this).addClass('selected').attr('href').replace('#', '');
// Without seeing the code for the filter function I can only guess what this does
// The code below seems to be finding a 'feature' (whatever that is in the lib you are using)
// based on the id of the item clicked or if the all button was clicked.
// You would need to look at the tilejson code to get more insight into what this is doing
        tilejson.markers.filter(function(feature) {
            return feature.properties['marker-symbol'] == id || id == 'all';
        });

// Finally return false to disable the normal processing of the click event - i.e. you don't want the browser to attempt to browse to the href of the click event - this disables it
        return false;
    }

Open in new window

0
 

Author Closing Comment

by:DanielAttard
ID: 39245578
This is amazing julianH, thank you so much.  You went above and beyond the call of duty here.  Thanks for helping this old dog learn a couple of new tricks.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 39246766
You are welcome - thanks for the points.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 39246814
Just a correction to my earlier post

// After setting the class the code removes the '#' from the href attribute for the
// item clicked
        var id = $(this).addClass('selected').attr('href').replace('#', '');

Open in new window

Should have been
// This line extracts the marker id from the href attribute by retrieving the 
// href and removing the '#' - it does not (as alluded to above) replace the actual
// attribute in the href

        var id = $(this).addClass('selected').attr('href').replace('#', '');

Open in new window

0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question