Opensource Photography Theme for Wordpress Part 2 #Tutorial





Continuing on from last weeks blog post, here's a look at the features included in my opensource photography theme.

Google maps api worldMap explained:

For the dynamic page that features all the posts images on a worldmap if they contain location information, I used google maps api v3.

As the location information is found either on the post itself or the upload images exiff information, we need to cycle through all the posts in the database, the so-called in wordpress “the loop”, as if it was the home page or a category template.

This first part is done in a separated php file, that prints an xml file containing the objects we will parse later with JQuery for adding the markers on the map.

The xml contains the markers, and their attributes: label, latitude, longitude, and a html string that will get pushed into googleMaps infoBox (that will display when clicking on a marker).

This a marker xml from the worldmapxml.php output:

<markers>

               <marker label=“Panorama - United Kingdom - stoneHenge 02”

                              lat=“51.17845185”

                               lng=”-1.82518553”

                               html=”&lt;div style=&quot;text-align: center&quot;&gt;

                                &lt;a href=&quot;http://photos.ezequielm.com/panoramas/uk-stonehenge_02/&quot; &gt;

                               &lt;img src=&quot;http://www.ezequielm.com/iFrameContent/photos/panoramaFlash/uk-stonehenge_02.jpg&quot; &gt; &lt;br&gt;

                               see image&lt;/a&gt; ” />

[....]

</markers>

 

This is generated by the “the loop” inside worldmapxml.php.

“The loop”, crawls through all the posts, looking for coordinates attributes, if found, it prints the information to the output to generate the xml.

<?php

                foreach($all_photo_arr as $key => $photo)

                {

                                if ( get_post_meta($photo->ID, 'gallery_coordLatitude', true)  ) { ?>

                                               <marker label="<?=$photo->post_title?>"

                                               <?php

                                                $image_url = get_post_meta($photo->ID, 'gallery_image_url', true);

                                                $image_thumb_fb= get_post_meta($photo->ID, 'gallery_preview_fb_image_url', true);

                                                $coordLatitude= get_post_meta($photo->ID, 'gallery_coordLatitude', true);

                                                $coordLongitude= get_post_meta($photo->ID, 'gallery_coordLongitude', true);

                                                $image_url_permalink = get_permalink( $photo->ID );?>

                                                lat="<?php $coordLatitude?>"

                                                lng="<?php $coordLongitude?>"

                                                html="&lt;div style=&quot;text-align: center&quot;&gt;

                                                &lt;a href=&quot;<?php $image_url_permalink?>&quot; &gt;

                                                &lt;img src=&quot;&#47_media&#47thumbs_fb&#47<?php $image_thumb_fb?>&quot; &gt; &lt;br&gt;

                                                see image&lt;/a&gt; " />

                                                <?php

                                }

                }             

?>                          

 

This is then read by the Javascript inside the actual worldMap.php. That is the page template the user will open. Feeding the xml file from the ../worldmapxml page into the function, we seach for the objects “marker”, for each one of them we read the attributes, and create a google.maps.Marker object that we then add to the google maps object, and attach the infoBox.

 

jQuery.get(”../worldmapxml”, {}, function(data) {

      jQuery(data).find("marker").each(function() {

        var marker = jQuery(this);

        var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),

                                    parseFloat(marker.attr("lng")));

        var contentString = marker.attr("html");

        var marker = new google.maps.Marker({position: latlng, map: theMap});

     

    var boxText = document.createElement(“div”);

    boxText.style.cssText = “border: 1px solid black; margin-top: 8px; background: black; padding: 1px;”;

    boxText.innerHTML = “<div style=\“width:100%\”>” + contentString + “</div>”;

    var myOptions = {

                       content: boxText

                      ,disableAutoPan: false

                      ,maxWidth: 0

                      ,pixelOffset: new google.maps.Size(-140, 0)

                      ,zIndex: null

                      ,boxStyle: {

                        opacity: 1

       }

                      ,closeBoxMargin: “10px 2px 2px 2px”

                      ,closeBoxURL: “http://www.google.com/intl/en_us/mapfiles/close.gif”

                      ,infoBoxClearance: new google.maps.Size(1, 1)

                      ,isHidden: false

                      ,pane: “floatPane”

                      ,enableEventPropagation: false

    };

                google.maps.event.addListener(marker, “click”, function (e) {

                ib.open(theMap, marker);

    });

                var ib = new InfoBox(myOptions);

  });

  });

 

After this, the map contains all the markers, just adding the map to the page and you got yourself a nice map of your whereabouts!

Click here to view World Map page.

 


Eze Mastrasso


We Love Animation™

Brown Bag Labs is an exciting online space, brought to you by Brown Bag Films. We share great content for families as well as behind the scenes fun and tutorials from the Brown Bag Films team.