* NGG gallery is working
* Getting HR, Cad and Temp working again (thanks to cyclinggeorgian) * Fix javascript errors * Fix multiple traks gpx
This commit is contained in:
bastianonm
parent
f6a747d503
commit
15ad51122d
|
|
@ -0,0 +1,27 @@
|
|||
.leaflet-marker-photo {
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 3px 3px 10px #888;
|
||||
}
|
||||
|
||||
.leaflet-marker-photo div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.leaflet-marker-photo b {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: -11px;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
height: 12px;
|
||||
min-width: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
L.Photo = L.FeatureGroup.extend({
|
||||
options: {
|
||||
icon: {
|
||||
iconSize: [40, 40]
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function (photos, options) {
|
||||
L.setOptions(this, options);
|
||||
L.FeatureGroup.prototype.initialize.call(this, photos);
|
||||
},
|
||||
|
||||
addLayers: function (photos) {
|
||||
if (photos) {
|
||||
for (var i = 0, len = photos.length; i < len; i++) {
|
||||
this.addLayer(photos[i]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
addLayer: function (photo) {
|
||||
L.FeatureGroup.prototype.addLayer.call(this, this.createMarker(photo));
|
||||
},
|
||||
|
||||
createMarker: function (photo) {
|
||||
var marker = L.marker(photo, {
|
||||
icon: L.divIcon(L.extend({
|
||||
html: '<div style="background-image: url(' + photo.thumbnail + ');"></div>',
|
||||
className: 'leaflet-marker-photo'
|
||||
}, photo, this.options.icon)),
|
||||
title: photo.caption || ''
|
||||
});
|
||||
marker.photo = photo;
|
||||
return marker;
|
||||
}
|
||||
});
|
||||
|
||||
L.photo = function (photos, options) {
|
||||
return new L.Photo(photos, options);
|
||||
};
|
||||
|
||||
if (L.MarkerClusterGroup) {
|
||||
|
||||
L.Photo.Cluster = L.MarkerClusterGroup.extend({
|
||||
options: {
|
||||
featureGroup: L.photo,
|
||||
maxClusterRadius: 100,
|
||||
showCoverageOnHover: false,
|
||||
iconCreateFunction: function(cluster) {
|
||||
return new L.DivIcon(L.extend({
|
||||
className: 'leaflet-marker-photo',
|
||||
html: '<div style="background-image: url(' + cluster.getAllChildMarkers()[0].photo.thumbnail + ');"></div><b>' + cluster.getChildCount() + '</b>'
|
||||
}, this.icon));
|
||||
},
|
||||
icon: {
|
||||
iconSize: [40, 40]
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
options = L.Util.setOptions(this, options);
|
||||
L.MarkerClusterGroup.prototype.initialize.call(this);
|
||||
this._photos = options.featureGroup(null, options);
|
||||
},
|
||||
|
||||
add: function (photos) {
|
||||
this.addLayer(this._photos.addLayers(photos));
|
||||
return this;
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
this._photos.clearLayers();
|
||||
this.clearLayers();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
L.photo.cluster = function (options) {
|
||||
return new L.Photo.Cluster(options);
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
.marker-cluster-small {
|
||||
background-color: rgba(181, 226, 140, 0.6);
|
||||
}
|
||||
.marker-cluster-small div {
|
||||
background-color: rgba(110, 204, 57, 0.6);
|
||||
}
|
||||
|
||||
.marker-cluster-medium {
|
||||
background-color: rgba(241, 211, 87, 0.6);
|
||||
}
|
||||
.marker-cluster-medium div {
|
||||
background-color: rgba(240, 194, 12, 0.6);
|
||||
}
|
||||
|
||||
.marker-cluster-large {
|
||||
background-color: rgba(253, 156, 115, 0.6);
|
||||
}
|
||||
.marker-cluster-large div {
|
||||
background-color: rgba(241, 128, 23, 0.6);
|
||||
}
|
||||
|
||||
/* IE 6-8 fallback colors */
|
||||
.leaflet-oldie .marker-cluster-small {
|
||||
background-color: rgb(181, 226, 140);
|
||||
}
|
||||
.leaflet-oldie .marker-cluster-small div {
|
||||
background-color: rgb(110, 204, 57);
|
||||
}
|
||||
|
||||
.leaflet-oldie .marker-cluster-medium {
|
||||
background-color: rgb(241, 211, 87);
|
||||
}
|
||||
.leaflet-oldie .marker-cluster-medium div {
|
||||
background-color: rgb(240, 194, 12);
|
||||
}
|
||||
|
||||
.leaflet-oldie .marker-cluster-large {
|
||||
background-color: rgb(253, 156, 115);
|
||||
}
|
||||
.leaflet-oldie .marker-cluster-large div {
|
||||
background-color: rgb(241, 128, 23);
|
||||
}
|
||||
|
||||
.marker-cluster {
|
||||
background-clip: padding-box;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.marker-cluster div {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.marker-cluster span {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
|
||||
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
|
||||
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
|
||||
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
|
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
.leaflet-cluster-spider-leg {
|
||||
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
|
||||
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
|
||||
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
|
||||
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
|
||||
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -18,7 +18,9 @@ var WPGPXMAPS = {
|
|||
|
||||
var result = [];
|
||||
|
||||
for (i=0; i < mapData.length; i++)
|
||||
var _len = mapData.length;
|
||||
|
||||
for (i=0; i < _len; i++)
|
||||
{
|
||||
if (mapData[i] == null)
|
||||
{
|
||||
|
|
@ -27,7 +29,7 @@ var WPGPXMAPS = {
|
|||
}
|
||||
}
|
||||
|
||||
if (mapData.length != lastCut)
|
||||
if ( (_len - 1 ) != lastCut)
|
||||
{
|
||||
result.push( mapData.slice(lastCut) );
|
||||
}
|
||||
|
|
@ -885,7 +887,7 @@ var WPGPXMAPS = {
|
|||
|
||||
|
||||
// Print WayPoints
|
||||
if (!jQuery.isEmptyObject(waypoints))
|
||||
if (!jQuery.isEmptyObject(waypoints) && waypoints.length > 0)
|
||||
{
|
||||
map.AddWaypoints(waypoints, waypointIcon);
|
||||
}
|
||||
|
|
@ -893,49 +895,107 @@ var WPGPXMAPS = {
|
|||
// Print Images
|
||||
|
||||
jQuery("#ngimages_" + targetId).attr("style","display:block;position:absolute;left:-50000px");
|
||||
jQuery("#ngimages_" + targetId + " span").each(function(){
|
||||
|
||||
var imageLat = jQuery(this).attr("lat");
|
||||
var imageLon = jQuery(this).attr("lon");
|
||||
var nggImages = jQuery("#ngimages_" + targetId + " span").toArray();
|
||||
|
||||
jQuery("img",this).each(function() {
|
||||
if (nggImages !== undefined && nggImages.length > 0)
|
||||
{
|
||||
var photos = [];
|
||||
|
||||
jQuery(this).load(function(){
|
||||
for (var i = 0; i < nggImages.length; i++) {
|
||||
|
||||
var imageUrl = jQuery(this).attr("src");
|
||||
var img_w = jQuery(this).width();
|
||||
var img_h = jQuery(this).height();
|
||||
var ngg_span = nggImages[i];
|
||||
var ngg_span_a = ngg_span.children[0];
|
||||
|
||||
imageLat = imageLat.replace(",", ".");
|
||||
imageLon = imageLon.replace(",", ".");
|
||||
var pos = [
|
||||
Number(ngg_span.getAttribute("lat")),
|
||||
Number(ngg_span.getAttribute("lon"))
|
||||
];
|
||||
|
||||
//var p = new google.maps.LatLng(imageLat, imageLon);
|
||||
//bounds.extend(p);
|
||||
map.Bounds.push(pos);
|
||||
|
||||
var mc = new CustomMarker(map, p, imageUrl, img_w, img_h );
|
||||
photos.push({
|
||||
"lat": pos[0],
|
||||
"lng": pos[1],
|
||||
"name": ngg_span_a.getAttribute("data-title"),
|
||||
"url": ngg_span_a.getAttribute("data-src"),
|
||||
"thumbnail": ngg_span_a.getAttribute("data-thumbnail")
|
||||
});
|
||||
|
||||
ngImageMarkers.push(mc);
|
||||
}
|
||||
|
||||
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)
|
||||
if (photos.length > 0)
|
||||
{
|
||||
var photoLayer = L.photo.cluster().on('click', function(evt) {
|
||||
var photo = evt.layer.photo;
|
||||
var template = '<img src="{url}" /></a><p>{name}</p>';
|
||||
evt.layer.bindPopup(L.Util.template(template, photo), {
|
||||
minWidth: 'auto',
|
||||
}).openPopup();
|
||||
});
|
||||
|
||||
photoLayer.add(photos).addTo(map.map);
|
||||
|
||||
map.CenterMap();
|
||||
|
||||
|
||||
/*
|
||||
var showHideImagesCustomControl = L.Control.extend({
|
||||
|
||||
options: {
|
||||
position: 'topleft'
|
||||
//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
|
||||
var container = document.createElement('img');
|
||||
container.class= "leaflet-bar leaflet-control leaflet-control-custom"
|
||||
container.style.backgroundColor = 'white';
|
||||
container.style.width = '30px';
|
||||
container.style.height = '30px';
|
||||
container.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
|
||||
container.style.cursor = 'pointer';
|
||||
container.title = lng.hideImages;
|
||||
|
||||
container.onclick = function(){
|
||||
|
||||
var isImagesHidden = (controlUIhi.isImagesHidden == true);
|
||||
var mapDiv = map.getDiv();
|
||||
var center = map.getCenter();
|
||||
|
||||
if (isImagesHidden)
|
||||
{
|
||||
a.click();
|
||||
for (var i=0; i<ngImageMarkers.length; i++) {
|
||||
ngImageMarkers[i].setMap(map);
|
||||
}
|
||||
controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
|
||||
controlUIhi.title = lng.hideImages;
|
||||
}
|
||||
});
|
||||
else
|
||||
{
|
||||
for (var i=0; i<ngImageMarkers.length; i++) {
|
||||
ngImageMarkers[i].setMap(null);
|
||||
}
|
||||
controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/showImages.png";
|
||||
controlUIhi.title = lng.showImages;
|
||||
}
|
||||
controlUIhi.isImagesHidden = !isImagesHidden;
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
if (jQuery(this).width() + jQuery(this).height() > 0)
|
||||
{
|
||||
jQuery(this).trigger("load");
|
||||
}
|
||||
map.map.addControl(new showHideImagesCustomControl());
|
||||
*/
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
|
@ -972,43 +1032,6 @@ var WPGPXMAPS = {
|
|||
}
|
||||
*/
|
||||
|
||||
if ( jQuery("#ngimages_" + targetId + " span").length > 0 )
|
||||
{
|
||||
|
||||
// Set CSS for the control border
|
||||
var controlUIhi = document.createElement('img');
|
||||
controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
|
||||
controlUIhi.style.cursor = 'pointer';
|
||||
controlUIhi.title = lng.hideImages;
|
||||
controlDiv.appendChild(controlUIhi);
|
||||
|
||||
// Setup the click event listeners
|
||||
google.maps.event.addDomListener(controlUIhi, 'click', function(event) {
|
||||
var isImagesHidden = (controlUIhi.isImagesHidden == true);
|
||||
var mapDiv = map.getDiv();
|
||||
var center = map.getCenter();
|
||||
|
||||
if (isImagesHidden)
|
||||
{
|
||||
for (var i=0; i<ngImageMarkers.length; i++) {
|
||||
ngImageMarkers[i].setMap(map);
|
||||
}
|
||||
controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
|
||||
controlUIhi.title = lng.hideImages;
|
||||
}
|
||||
else
|
||||
{
|
||||
for (var i=0; i<ngImageMarkers.length; i++) {
|
||||
ngImageMarkers[i].setMap(null);
|
||||
}
|
||||
controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/showImages.png";
|
||||
controlUIhi.title = lng.showImages;
|
||||
}
|
||||
controlUIhi.isImagesHidden = !isImagesHidden;
|
||||
return false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Print Track
|
||||
if (mapData != '')
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_i
|
|||
Tags: maps, gpx, gps, graph, chart, leaflet, track, garmin, image, nextgen-gallery, nextgen, exif, OpenStreetMap, OpenCycleMap, Hike&Bike, heart rate, heartrate, cadence
|
||||
Requires at least: 2.0.0
|
||||
Tested up to: 4.9.8
|
||||
Stable tag: 1.6.03
|
||||
Stable tag: 1.6.04
|
||||
|
||||
Draws a gpx track with altitude graph. You can also display your nextgen gallery images in the map.
|
||||
|
||||
|
|
@ -153,6 +153,11 @@ Yes!
|
|||
1. Altitude & Speed & Hearth rate
|
||||
|
||||
== Changelog ==
|
||||
= 1.6.04 =
|
||||
* NGG gallery is working
|
||||
* Getting HR, Cad and Temp working again (thanks to cyclinggeorgian)
|
||||
* Fix javascript errors
|
||||
* Fix multiple traks gpx
|
||||
= 1.6.03 =
|
||||
* Fix syntax error causing graph not to display (thanks to nickstabler)
|
||||
= 1.6.02 =
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Plugin Name: WP-GPX-Maps
|
||||
* Plugin URI: http://www.devfarm.it/
|
||||
* Description: Draws a GPX track with altitude chart
|
||||
* Version: 1.6.03
|
||||
* Version: 1.6.04
|
||||
* Author: Bastianon Massimo
|
||||
* Author URI: http://www.devfarm.it/
|
||||
* Text Domain: wp-gpx-maps
|
||||
|
|
@ -64,33 +64,21 @@ function enqueue_WP_GPX_Maps_scripts_admin($hook)
|
|||
function enqueue_WP_GPX_Maps_scripts() {
|
||||
|
||||
/* leaflet */
|
||||
|
||||
wp_register_style( 'leaflet', plugins_url( '/ThirdParties/Leaflet_1.3.1/leaflet.css', __FILE__ ), array(), "1.3.1" );
|
||||
wp_enqueue_style( 'leaflet' );
|
||||
wp_enqueue_style( 'leaflet' ); wp_register_style( 'leaflet.markercluster', plugins_url( '/ThirdParties/Leaflet.markercluster-1.4.1/MarkerCluster.css', __FILE__ ), array(), "0" ); wp_enqueue_style( 'leaflet.markercluster' ); wp_register_style( 'leaflet.Photo', plugins_url( '/ThirdParties/Leaflet.Photo/Leaflet.Photo.css', __FILE__ ), array(), "0" ); wp_enqueue_style( 'leaflet.Photo' );
|
||||
|
||||
wp_register_style( 'leaflet.fullscreen', plugins_url( '/ThirdParties/leaflet.fullscreen-1.1.4/Control.FullScreen.css', __FILE__ ), array(), "1.3.1" );
|
||||
wp_enqueue_style( 'leaflet.fullscreen' );
|
||||
|
||||
wp_register_script('leaflet', plugins_url( '/ThirdParties/Leaflet_1.3.1/leaflet.js', __FILE__ ), array(), "1.3.1" );
|
||||
wp_register_script('leaflet.fullscreen', plugins_url( '/ThirdParties/leaflet.fullscreen-1.1.4/Control.FullScreen.js', __FILE__ ), array(), "1.1.4" );
|
||||
wp_register_script('leaflet', plugins_url( '/ThirdParties/Leaflet_1.3.1/leaflet.js', __FILE__ ), array(), "1.3.1" ); wp_register_script('leaflet.markercluster', plugins_url( '/ThirdParties/Leaflet.markercluster-1.4.1/leaflet.markercluster.js', __FILE__ ), array('leaflet'), "0" ); wp_register_script('leaflet.Photo', plugins_url( '/ThirdParties/Leaflet.Photo/Leaflet.Photo.js', __FILE__ ), array('leaflet','leaflet.markercluster'), "0" );
|
||||
wp_register_script('leaflet.fullscreen', plugins_url( '/ThirdParties/leaflet.fullscreen-1.1.4/Control.FullScreen.js', __FILE__ ), array('leaflet'), "1.1.4" );
|
||||
|
||||
/* chartjs */
|
||||
|
||||
wp_register_script('chartjs', plugins_url( '/js/Chart.min.js', __FILE__ ), array(), "2.7.2" );
|
||||
wp_register_script('WP-GPX-Maps', plugins_url( '/js/WP-GPX-Maps.js', __FILE__ ), array('jquery','leaflet','chartjs'), "1.6.03" );
|
||||
|
||||
/*
|
||||
$wpgpxmaps_googlemapsv3_apikey = get_option('wpgpxmaps_googlemapsv3_apikey');
|
||||
wp_register_script('WP-GPX-Maps', plugins_url( '/js/WP-GPX-Maps.js', __FILE__ ), array('jquery','leaflet','chartjs'), "1.6.04" );
|
||||
|
||||
if ($wpgpxmaps_googlemapsv3_apikey) {
|
||||
wp_enqueue_script('googlemaps', '//maps.googleapis.com/maps/api/js?key='.$wpgpxmaps_googlemapsv3_apikey, null, null);
|
||||
}
|
||||
else {
|
||||
wp_enqueue_script('googlemaps', '//maps.googleapis.com/maps/api/js', null, null);
|
||||
}
|
||||
*/
|
||||
|
||||
wp_enqueue_script('leaflet');
|
||||
wp_enqueue_script('leaflet'); wp_enqueue_script('leaflet.markercluster'); wp_enqueue_script('leaflet.Photo');
|
||||
wp_enqueue_script('leaflet.fullscreen');
|
||||
wp_enqueue_script('jquery');
|
||||
wp_enqueue_script('chartjs');
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@
|
|||
|
||||
$gpx->registerXPathNamespace('a', 'http://www.topografix.com/GPX/1/0');
|
||||
$gpx->registerXPathNamespace('b', 'http://www.topografix.com/GPX/1/1');
|
||||
$gpx->registerXPathNamespace('gpxtpx', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
|
||||
$gpx->registerXPathNamespace('ns3', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
|
||||
|
||||
$nodes = $gpx->xpath('//trk | //a:trk | //b:trk');
|
||||
//normal gpx
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
|
||||
$trk->registerXPathNamespace('a', 'http://www.topografix.com/GPX/1/0');
|
||||
$trk->registerXPathNamespace('b', 'http://www.topografix.com/GPX/1/1');
|
||||
$trk->registerXPathNamespace('gpxtpx', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
|
||||
$trk->registerXPathNamespace('ns3', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
|
||||
|
||||
$trkpts = $trk->xpath('//trkpt | //a:trkpt | //b:trkpt');
|
||||
|
||||
|
|
@ -265,12 +265,12 @@
|
|||
|
||||
$arr = json_decode( json_encode($trkpt->extensions) , 1);
|
||||
|
||||
if (isset($arr['gpxtpx:TrackPointExtension']))
|
||||
if (isset($arr['ns3:TrackPointExtension']))
|
||||
{
|
||||
$tpe = $arr['gpxtpx:TrackPointExtension'];
|
||||
$hr = @$tpe["gpxtpx:hr"];
|
||||
$atemp = @$tpe["gpxtpx:atemp"];
|
||||
$cad = @$tpe["gpxtpx:cad"];
|
||||
$tpe = $arr['ns3:TrackPointExtension'];
|
||||
$hr = @$tpe["ns3:hr"];
|
||||
$atemp = @$tpe["ns3:atemp"];
|
||||
$cad = @$tpe["ns3:cad"];
|
||||
}
|
||||
else if (isset($arr['TrackPointExtension']))
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue