Solved

Filter map markers in javascript

Posted on 2013-06-12
4
694 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
  • 3
4 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 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 51

Expert Comment

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

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now