From edc339b1c9a4872aaa469942de13aef1de2300e3 Mon Sep 17 00:00:00 2001 From: bastianonm Date: Sat, 17 Mar 2012 11:46:00 +0000 Subject: [PATCH] --- WP-GPX-Maps.js | 177 ++++++++++++++++++++++++++++++-- readme.txt | 16 ++- wp-gpx-maps.php | 60 +++++++---- wp-gpx-maps_Utils.php | 3 +- wp-gpx-maps_admin.php | 4 +- wp-gpx-maps_admin_settings.php | 11 +- wp-gpx-maps_utils_nggallery.php | 71 +++++++++++++ 7 files changed, 308 insertions(+), 34 deletions(-) create mode 100644 wp-gpx-maps_utils_nggallery.php diff --git a/WP-GPX-Maps.js b/WP-GPX-Maps.js index 7b8c7f4..beb219a 100644 --- a/WP-GPX-Maps.js +++ b/WP-GPX-Maps.js @@ -34,6 +34,87 @@ function unqueue() } } + + + function CustomMarker( map, latlng, src, img_w, img_h) { + this.latlng_ = latlng; + + // Once the LatLng and text are set, add the overlay to the map. This will + // trigger a call to panes_changed which should in turn call draw. + this.setMap(map); + this.src_ = src; + this.img_w_ = img_w; + this.img_h_ = img_h; + } + + CustomMarker.prototype = new google.maps.OverlayView(); + + CustomMarker.prototype.draw = function() { + var me = this; + + // Check if the div has been created. + var div = this.div_; + if (!div) { + // Create a overlay text DIV + div = this.div_ = document.createElement('DIV'); + div.style.cssText = "border:1px solid #fff;position:absolute;cursor:pointer;margin:0;background:url('"+this.src_+"') center;width:"+(this.img_w_/3)+"px;height:"+(this.img_h_/3)+"px;"; + div.setAttribute("lat",this.latlng_.lat()); + div.setAttribute("lon",this.latlng_.lng()); + google.maps.event.addDomListener(div, "click", function(event) { + google.maps.event.trigger(me, "click",div); + }); + + google.maps.event.addDomListener(div, "mouseover", function(event) { + + var _t = div.style.top.replace('px',''); + var _l = div.style.left.replace('px',''); + + jQuery(div).animate({ + height: me.img_h_, + width : me.img_w_, + top : _t - (me.img_h_ / 3), + left : _l - (me.img_w_ / 3) + }, 100); + }); + + google.maps.event.addDomListener(div, "mouseout", function(event) { + jQuery(div).animate({ + height: me.img_h_ / 3, + width: me.img_w_ / 3, + top : me.orig_top, + left : me.orig_left + }, 100); + }); + + // Then add the overlay to the DOM + var panes = this.getPanes(); + panes.overlayImage.appendChild(div); + } + + // Position the overlay + var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); + if (point) { + div.style.left = point.x + 'px'; + div.style.top = point.y + 'px'; + + this.orig_left = point.x; + this.orig_top = point.y; + + } + }; + + CustomMarker.prototype.remove = function() { + // Check if the overlay was on the map and needs to be removed. + if (this.div_) { + this.div_.parentNode.removeChild(this.div_); + this.div_ = null; + } + }; + + + + + function _wpgpxmaps(params) { @@ -59,6 +140,8 @@ function _wpgpxmaps(params) var el_map = document.getElementById("map_" + targetId); var el_chart = document.getElementById("chart_" + targetId); + var mapWidth = el_map.style.width; + switch (mapType) { case 'TERRAIN': { mapType = google.maps.MapTypeId.TERRAIN; break;} @@ -72,6 +155,7 @@ function _wpgpxmaps(params) scrollwheel: false }; var map = new google.maps.Map(el_map, mapOptions); + var bounds = new google.maps.LatLngBounds(); // Print WayPoints if (waypoints != '') @@ -93,11 +177,54 @@ function _wpgpxmaps(params) } } + // Print Images + + var divImages = document.getElementById("ngimages_"+targetId); + + divImages.style.display='block'; + divImages.style.position='absolute'; + divImages.style.left='-500px'; + + var img_spans = divImages.getElementsByTagName("span"); + + + if (img_spans.length > 0) + { + var bb = new google.maps.LatLngBounds(); + for (var i = 0; i < img_spans.length; i++) { + + var imageLat = img_spans[i].getAttribute("lat"); + var imageLon = img_spans[i].getAttribute("lon"); + var imageImg = img_spans[i].getElementsByTagName('img')[0]; + var imageUrl = imageImg.getAttribute("src"); + + var img_w = imageImg.clientWidth; + var img_h = imageImg.clientHeight; + + var p = new google.maps.LatLng(imageLat, imageLon); + bounds.extend(p); + + var mc = new CustomMarker(map, p, imageUrl, img_w, img_h ); + + google.maps.event.addListener(mc, "click", function(div) { + var lat = div.getAttribute("lat"); + var lon = div.getAttribute("lon"); + var a = getClosestImage(lat,lon,targetId).childNodes[0]; + if (a) + { + a.click(); + } + }); + + } + + } + + // Print Track if (mapData != '') { var points = []; - var bounds = new google.maps.LatLngBounds(); for (i=0; i < mapData.length; i++) { @@ -140,8 +267,7 @@ function _wpgpxmaps(params) strokeWeight: 4 }); poly.setMap(map); - map.setCenter(bounds.getCenter()); - map.fitBounds(bounds); + var first = getItemFromArray(mapData,0) if (currentIcon == '') @@ -179,6 +305,9 @@ function _wpgpxmaps(params) }); } + map.setCenter(bounds.getCenter()); + map.fitBounds(bounds); + // Print Graph if (graphData!= '') { @@ -288,6 +417,16 @@ function _wpgpxmaps(params) marker.setTitle("Current Position"); } }); + + if( mapWidth = "100%") + { + var resizeChart = function(){ + el_chart.style.width = el_chart.clientWidth + "px"; + chart.draw(data, options); + }; + google.maps.event.addListener(map, "idle", resizeChart); + } + //google.visualization.events.addListener(chart, 'onmouseout', function (e) { //chart.setSelection([e]); //}); @@ -315,9 +454,16 @@ function addWayPoint(map, image, shadow, lat, lon, title, descr) { infowindow.close(); } - infowindow = new google.maps.InfoWindow({ - content: "" + title + "
" + descr - }); + var cnt = ''; + if (title=='') + { + cnt = "
" + descr + "
"; + } + else + { + cnt = "" + title + "
" + descr; + } + infowindow = new google.maps.InfoWindow({ content: cnt}); infowindow.open(map,m); }); } @@ -350,6 +496,25 @@ function getClosestIndex(points,lat,lon) return ii; } +function getClosestImage(lat,lon,targetId) +{ + var dd=10000; + var img; + var divImages = document.getElementById("ngimages_"+targetId); + var img_spans = divImages.getElementsByTagName("span"); + for (var i = 0; i < img_spans.length; i++) { + var imageLat = img_spans[i].getAttribute("lat"); + var imageLon = img_spans[i].getAttribute("lon"); + var d = dist(imageLat, imageLon, lat, lon); + if ( d < dd ) + { + img = img_spans[i]; + dd = d; + } + } + return img; +} + function isNumeric(input){ var RE = /^-{0,1}\d*\.{0,1}\d+$/; return (RE.test(input)); diff --git a/readme.txt b/readme.txt index 3effbb2..d3f4a13 100644 --- a/readme.txt +++ b/readme.txt @@ -1,10 +1,10 @@ === WP GPX Maps === Contributors: bastianonm -Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=bastianonm@hotmail.com&item_name=WP%20GPX%20Maps&item_number=Donation -Tags: maps, gpx, gps, graph, chart, google maps, google chart, track, garmin +Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8VHWLRW6JBTML +Tags: maps, gpx, gps, graph, chart, google maps, google chart, track, garmin, image, nextgen-gallery, nextgen, exif Requires at least: 2.0.0 Tested up to: 3.3 -Stable tag: 1.1.10 +Stable tag: 1.1.11 License: GPLv2 or later Draws a gpx track with altitude graph @@ -15,6 +15,8 @@ This plugin has, as input, the GPX file with the track you've made and as output Fully configurable: custom colors and icons to make the map look like your site. +Display your NextGen Gallery images inside the map! Take a look at nexgen gallery EXIF support.. + - iphone/ipad/ipod Compatible Try this plugin: http://www.pedemontanadelgrappa.it/category/mappe/ @@ -89,6 +91,10 @@ The attributes are: 1. currentIcon: Current position icon (when mouse hover) +1. nggalleries: NextGen Gallery id or a list of Galleries id separated by a comma + +1. ngimages: NextGen Image id or a list of Images id separated by a comma + = What happening if I've a very large gpx? = This plugin will print a small amout of points to speedup javascript and pageload. @@ -103,6 +109,9 @@ Yes! 2. Admin area - Settings == Changelog == += 1.1.11 = +* nextgen gallery integration +* minor bug fixes = 1.1.10 = * Configurable Map Icons * Chart scale configuration (max and min values) @@ -162,6 +171,7 @@ Yes! * Initial release == Upgrade Notice == += 1.1.11 = = 1.1.10 = = 1.1.9 = = 1.1.8 = diff --git a/wp-gpx-maps.php b/wp-gpx-maps.php index 8fc324d..c4b5f2d 100644 --- a/wp-gpx-maps.php +++ b/wp-gpx-maps.php @@ -3,7 +3,7 @@ Plugin Name: WP-GPX-Maps Plugin URI: http://www.darwinner.it/ Description: Draws a gpx track with altitude graph -Version: 1.1.10 +Version: 1.1.11 Author: Bastianon Massimo Author URI: http://www.pedemontanadelgrappa.it/ License: GPL @@ -11,7 +11,7 @@ License: GPL //error_reporting (E_ALL); -include 'wp-gpx-maps_Utils.php'; +include 'wp-gpx-maps_utils.php'; include 'wp-gpx-maps_admin.php'; add_action( 'wp_print_scripts', 'enqueue_WP_GPX_Maps_scripts' ); @@ -46,7 +46,7 @@ function enqueue_WP_GPX_Maps_scripts() google.load('visualization', '1', {'packages':['corechart']}); google.load("maps", "3", {other_params: 'sensor=false'}); - + '.$data.''; + } + + } - if ($points_maps == '') + if ($points_maps == '' && $gpx != '') { $sitePath = sitePath(); @@ -152,6 +168,8 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='') $points_maps = ''; $points_graph = ''; $waypoints = ''; + + foreach ($points as $p) { $points_maps .= '['.(float)$p[0].','.(float)$p[1].'],'; @@ -197,7 +215,7 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='') $waypoints .= '['.(float)$p[0].','.(float)$p[1].',\''.unescape($p[4]).'\',\''.unescape($p[5]).'\',\''.unescape($p[7]).'\'],'; } } - + $p="/,$/"; $points_maps = preg_replace($p, "", $points_maps); $points_graph = preg_replace($p, "", $points_graph); @@ -207,20 +225,23 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='') { $points_graph = ""; } - - @file_put_contents($gpxcache, - serialize(array("points_maps" => $points_maps, - "points_graph" => $points_graph, - "waypoints" => $waypoints) - ), - LOCK_EX); - @chmod($gpxcache,0755); + } + @file_put_contents($gpxcache, + serialize(array( "points_maps" => $points_maps, + "points_graph" => $points_graph, + "waypoints" => $waypoints, + "ngimgs" => $ngimgs_data) + ), + LOCK_EX); + @chmod($gpxcache,0755); + $output = '
+