This commit is contained in:
bastianonm
parent
3054a34306
commit
53639d7a97
|
|
@ -0,0 +1,89 @@
|
||||||
|
function wpgpxmaps(targhetId,mapType,mapData,graphData)
|
||||||
|
{
|
||||||
|
var el = document.getElementById(targhetId);
|
||||||
|
var el_map = el.childNodes[0];
|
||||||
|
var el_chart = el.childNodes[1];
|
||||||
|
switch (mapType)
|
||||||
|
{
|
||||||
|
case 'TERRAIN': { mapType = google.maps.MapTypeId.TERRAIN; break;}
|
||||||
|
case 'SATELLITE': { mapType = google.maps.MapTypeId.SATELLITE; break;}
|
||||||
|
case 'ROADMAP': { mapType = google.maps.MapTypeId.ROADMAP; break;}
|
||||||
|
default: { mapType = google.maps.MapTypeId.HYBRID; break;}
|
||||||
|
}
|
||||||
|
var mapOptions = {
|
||||||
|
mapTypeId: mapType
|
||||||
|
};
|
||||||
|
var map = new google.maps.Map(el_map, mapOptions);
|
||||||
|
if (graphData!= '')
|
||||||
|
{
|
||||||
|
var data = new google.visualization.DataTable();
|
||||||
|
data.addColumn('number', 'Lunghezza');
|
||||||
|
data.addColumn('number', 'Altezza');
|
||||||
|
data.addRows(graphData);
|
||||||
|
var chart = new google.visualization.AreaChart(el_chart);
|
||||||
|
var options = { curveType: "function",
|
||||||
|
strictFirstColumnType: true,
|
||||||
|
hAxis : {format : '#,###m', title : "Lunghezza"},
|
||||||
|
vAxis : {format : '#,###m', title : "Altitudine"},
|
||||||
|
legend : {position : 'none'},
|
||||||
|
chartArea: {left:70,top:10,width:"100%",height:"75%"}
|
||||||
|
};
|
||||||
|
chart.draw(data, options);
|
||||||
|
google.visualization.events.addListener(chart, 'onmouseover', function (e) {
|
||||||
|
var r = e['row'];
|
||||||
|
if (marker)
|
||||||
|
{
|
||||||
|
var point = getItemFromArray(mapData,r)
|
||||||
|
marker.setPosition(new google.maps.LatLng(point[0],point[1]));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
google.visualization.events.addListener(chart, 'onmouseout', function (e) {
|
||||||
|
if (marker)
|
||||||
|
{
|
||||||
|
if (chart.getSelection() != '')
|
||||||
|
{
|
||||||
|
var r = chart.getSelection()[0]['row'];
|
||||||
|
var point = getItemFromArray(mapData,r)
|
||||||
|
marker.setPosition(new google.maps.LatLng(point[0], point[1]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (mapData != '')
|
||||||
|
{
|
||||||
|
var points = [];
|
||||||
|
var bounds = new google.maps.LatLngBounds();
|
||||||
|
for(var i in mapData)
|
||||||
|
{
|
||||||
|
var p = new google.maps.LatLng(mapData[i][0], mapData[i][1]);
|
||||||
|
points.push(p);
|
||||||
|
bounds.extend(p);
|
||||||
|
}
|
||||||
|
var poly = new google.maps.Polyline({
|
||||||
|
path: points,
|
||||||
|
strokeColor: "#3366cc",
|
||||||
|
strokeOpacity: .7,
|
||||||
|
strokeWeight: 4
|
||||||
|
});
|
||||||
|
poly.setMap(map);
|
||||||
|
map.setCenter(bounds.getCenter());
|
||||||
|
map.fitBounds(bounds);
|
||||||
|
var first = getItemFromArray(mapData,0)
|
||||||
|
var marker = new google.maps.Marker({
|
||||||
|
position: new google.maps.LatLng(first[0], first[1]),
|
||||||
|
title:"Hello World!"
|
||||||
|
});
|
||||||
|
marker.setMap(map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getItemFromArray(arr,index)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
return arr[index];
|
||||||
|
}
|
||||||
|
catch(e)
|
||||||
|
{
|
||||||
|
return [0,0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
=== WP-GPX-Maps ===
|
||||||
|
Contributors: bastianonm
|
||||||
|
Donate link: http://www.darwinner.it/
|
||||||
|
Tags: maps, gpx, graph, google maps, google chart
|
||||||
|
Requires at least: 2.0.0
|
||||||
|
Tested up to: 3.3
|
||||||
|
Stable tag: 1.0.0
|
||||||
|
License: GPLv2 or later
|
||||||
|
|
||||||
|
Add a gpx trak with altitude graph
|
||||||
|
|
||||||
|
== Description ==
|
||||||
|
|
||||||
|
Add a gpx trak with altitude graph
|
||||||
|
|
||||||
|
WP-GPX-Maps
|
||||||
|
|
||||||
|
== Installation ==
|
||||||
|
|
||||||
|
This section describes how to install the plugin and get it working.
|
||||||
|
|
||||||
|
e.g.
|
||||||
|
|
||||||
|
1. Use the classic wordpress plugin installer or copy the plugins folder to the `/wp-content/plugins/` directory
|
||||||
|
1. Activate the plugin through the 'Plugins' menu in WordPress
|
||||||
|
1. Add the shortcode [sgpx gpx="<relative path to your gpx>"]
|
||||||
|
|
||||||
|
== Frequently Asked Questions ==
|
||||||
|
|
||||||
|
= Is it free? =
|
||||||
|
|
||||||
|
Yes!
|
||||||
|
|
||||||
|
= What happening if I've a very large gpx? =
|
||||||
|
|
||||||
|
This plugin will print a small amout of points in orther to speedup javascript and pageload.
|
||||||
|
|
||||||
|
== Screenshots ==
|
||||||
|
|
||||||
|
|
||||||
|
== Changelog ==
|
||||||
|
|
||||||
|
= 0.5 =
|
||||||
|
* Initial release.
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
<?php
|
||||||
|
/*
|
||||||
|
Plugin Name: WP-GPX-Maps
|
||||||
|
Plugin URI: http://www.darwinner.it/
|
||||||
|
Description: Add a gpx trak with altitude graph
|
||||||
|
Version: 1.0.0
|
||||||
|
Author: Bastianon Massimo
|
||||||
|
Author URI: http://www.pedemontanadelgrappa.it/
|
||||||
|
License: GPL
|
||||||
|
*/
|
||||||
|
|
||||||
|
include 'wp-gpx-maps_Utils.php';
|
||||||
|
|
||||||
|
add_action( 'wp_print_scripts', 'enqueue_WP_GPX_Maps_scripts' );
|
||||||
|
|
||||||
|
function enqueue_WP_GPX_Maps_scripts()
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
<script type='text/javascript' src='https://www.google.com/jsapi?ver=3.2.1'></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
google.load("maps", "3", {other_params: "sensor=false"});
|
||||||
|
google.load('visualization', '1', {'packages':['corechart']});
|
||||||
|
</script>
|
||||||
|
<script type='text/javascript' src='<?php echo plugins_url('/wp-gpx-maps.js', __FILE__) ?>'></script>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
|
//add_shortcode('wpgpxmaps','handle_WP_GPX_Maps_Shortcodes');
|
||||||
|
|
||||||
|
add_shortcode('sgpx','handle_WP_GPX_Maps_Shortcodes');
|
||||||
|
|
||||||
|
function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
|
||||||
|
{
|
||||||
|
$gpx = $attr["gpx"];
|
||||||
|
$key = get_option("wpgpxmaps_bing_license");
|
||||||
|
$w = get_option("wpgpxmaps_width");
|
||||||
|
$h = get_option("wpgpxmaps_height");
|
||||||
|
$t = get_option("wpgpxmaps_map_type");
|
||||||
|
|
||||||
|
$r = rand(1,5000000);
|
||||||
|
|
||||||
|
$points = getPoints($gpx);
|
||||||
|
$points_maps = '';
|
||||||
|
$points_graph = '';
|
||||||
|
|
||||||
|
foreach ($points as $p) {
|
||||||
|
$points_maps .= "[".(float)$p[0].",".(float)$p[1]."],";
|
||||||
|
$points_graph .= "[".(float)$p[3].",".(float)$p[2]."],";
|
||||||
|
}
|
||||||
|
$p="/,$/";
|
||||||
|
$points_maps = preg_replace($p, "", $points_maps);
|
||||||
|
$points_graph = preg_replace($p, "", $points_graph);
|
||||||
|
|
||||||
|
echo
|
||||||
|
'
|
||||||
|
<div id="wpgpxmaps_'.$r.'" style="clear:both;">
|
||||||
|
<div id="map_'.$r.'" style="width:'.$w.'; height:'.$h.'"></div>
|
||||||
|
<div id="chart_'.$r.'" class="plot" style="width:'.$w.'; height:'.(preg_replace("([pxPX%emEM])", "", $h) / 2).'px"></div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
jQuery(document).ready(function () {
|
||||||
|
var m_'.$r.' = ['.$points_maps.'];
|
||||||
|
var c_'.$r.' = ['.$points_graph.'];
|
||||||
|
wpgpxmaps("wpgpxmaps_'.$r.'",\''.$t.'\',m_'.$r.',c_'.$r.');
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>';
|
||||||
|
}
|
||||||
|
|
||||||
|
register_activation_hook(__FILE__,'WP_GPX_Maps_install');
|
||||||
|
register_deactivation_hook( __FILE__, 'WP_GPX_Maps_remove');
|
||||||
|
|
||||||
|
function WP_GPX_Maps_install() {
|
||||||
|
add_option("wpgpxmaps_width", '100%', '', 'yes');
|
||||||
|
add_option("wpgpxmaps_height", '450px', '', 'yes');
|
||||||
|
add_option('wpgpxmaps_map_type','HYBRID','','yes');
|
||||||
|
}
|
||||||
|
|
||||||
|
function WP_GPX_Maps_remove() {
|
||||||
|
delete_option('wpgpxmaps_width');
|
||||||
|
delete_option('wpgpxmaps_height');
|
||||||
|
delete_option('wpgpxmaps_map_type');
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
if ( is_admin() ){
|
||||||
|
|
||||||
|
add_action('admin_menu', 'wpgpxmaps_admin_menu');
|
||||||
|
|
||||||
|
function wpgpxmaps_admin_menu() {
|
||||||
|
add_options_page('WP GPX Maps', 'WP GPX Maps', 'administrator', 'WP-GPX-Maps', 'WP_GPX_Maps_html_page');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
function WP_GPX_Maps_html_page() {
|
||||||
|
?>
|
||||||
|
<div>
|
||||||
|
<h2>WP GPX Settings</h2>
|
||||||
|
|
||||||
|
<form method="post" action="options.php">
|
||||||
|
<?php wp_nonce_field('update-options'); ?>
|
||||||
|
|
||||||
|
<table width="100%">
|
||||||
|
<tr valign="top">
|
||||||
|
<th width="200" scope="row">Maps Width:</th>
|
||||||
|
<td>
|
||||||
|
<input name="wpgpxmaps_width" type="text" id="wpgpxmaps_width" value="<?php echo get_option('wpgpxmaps_width'); ?>" style="width:50px;" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr valign="top">
|
||||||
|
<th width="200" scope="row">Maps Height:</th>
|
||||||
|
<td>
|
||||||
|
<input name="wpgpxmaps_height" type="text" id="wpgpxmaps_height" value="<?php echo get_option('wpgpxmaps_height'); ?>" style="width:50px;" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th width="200" scope="row">Default Map Type:</th>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$t = get_option('wpgpxmaps_map_type');
|
||||||
|
if (!($t))
|
||||||
|
$t = 'HYBRID';
|
||||||
|
?>
|
||||||
|
|
||||||
|
<input type="radio" name="wpgpxmaps_map_type" value="HYBRID" <?php if ($t == 'HYBRID') echo 'checked'; ?> > This map type displays a transparent layer of major streets on satellite images.<br />
|
||||||
|
<input type="radio" name="wpgpxmaps_map_type" value="ROADMAP" <?php if ($t == 'ROADMAP') echo 'checked'; ?>> This map type displays a normal street map.<br />
|
||||||
|
<input type="radio" name="wpgpxmaps_map_type" value="SATELLITE" <?php if ($t == 'SATELLITE') echo 'checked'; ?>> This map type displays satellite images.<br />
|
||||||
|
<input type="radio" name="wpgpxmaps_map_type" value="TERRAIN" <?php if ($t == 'TERRAIN') echo 'checked'; ?>> This map type displays maps with physical features such as terrain and vegetation.<br />
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<input type="hidden" name="action" value="update" />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<input type="submit" value="<?php _e('Save Changes') ?>" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
|
||||||
|
function getPoints($gpxPath,$gpxOffset = 10)
|
||||||
|
{
|
||||||
|
$points = array();
|
||||||
|
|
||||||
|
$dist=0;
|
||||||
|
|
||||||
|
$lastLat=0;
|
||||||
|
$lastLon=0;
|
||||||
|
$lastEle=0;
|
||||||
|
$lastOffset=0;
|
||||||
|
|
||||||
|
//Default Offset = 10 mt
|
||||||
|
if (!($gpxOffset > 0))
|
||||||
|
{
|
||||||
|
$gpxOffset = 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
$realGpxPath = substr (__FILE__, 0, strrpos(__FILE__,'/wp-content/')).$gpxPath;
|
||||||
|
|
||||||
|
if (file_exists($realGpxPath))
|
||||||
|
{
|
||||||
|
|
||||||
|
$gpx = simplexml_load_file($realGpxPath);
|
||||||
|
$gpx->registerXPathNamespace('10', 'http://www.topografix.com/GPX/1/0');
|
||||||
|
$gpx->registerXPathNamespace('11', 'http://www.topografix.com/GPX/1/1');
|
||||||
|
|
||||||
|
foreach($gpx->xpath('//trkpt | //10:trkpt | //11:trkpt') as $trkpt){
|
||||||
|
$lat = $trkpt['lat'];
|
||||||
|
$lon = $trkpt['lon'];
|
||||||
|
$ele = $trkpt->ele;
|
||||||
|
if ($lastLat == 0 && $lastLon == 0)
|
||||||
|
{
|
||||||
|
//Base Case
|
||||||
|
array_push($points, array((float)$lat,(float)$lon,(float)round($ele,1),(float)round($dist,1)));
|
||||||
|
$lastLat=$lat;
|
||||||
|
$lastLon=$lon;
|
||||||
|
$lastEle=$ele;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
//Normal Case
|
||||||
|
$offset = calculateDistance($lat, $lon, $ele,$lastLat, $lastLon, $lastEle);
|
||||||
|
$dist = $dist + $offset;
|
||||||
|
if (((float) $offset + (float) $lastOffset) > $gpxOffset)
|
||||||
|
{
|
||||||
|
//Bigger Offset -> write coordinate
|
||||||
|
$lastOffset=0;
|
||||||
|
array_push($points, array((float)$lat,(float)$lon,(float)round($ele,1),(float)round($dist,1)));
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
//Smoller Offset -> continue..
|
||||||
|
$lastOffset= (float) $lastOffset + (float) $offset ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$lastLat=$lat;
|
||||||
|
$lastLon=$lon;
|
||||||
|
$lastEle=$ele;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
array_push($points, array((float)0,(float)0,(float)0,(float)0));
|
||||||
|
}
|
||||||
|
|
||||||
|
// riduco l'array a circa 200 punti per non appensantire la pagina(mappa e grafico)!
|
||||||
|
$count=sizeof($points);
|
||||||
|
if ($count>200)
|
||||||
|
{
|
||||||
|
$f = round($count/200);
|
||||||
|
if ($f>1)
|
||||||
|
for($i=$count;$i>0;$i--)
|
||||||
|
if ($i % $f != 0)
|
||||||
|
unset($points[$i]);
|
||||||
|
}
|
||||||
|
return $points;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toRadians($degrees)
|
||||||
|
{
|
||||||
|
return $degrees * 3.1415926535897932385 / 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateDistance($lat1,$lon1,$ele1,$lat2,$lon2,$ele2)
|
||||||
|
{
|
||||||
|
//Distance in meters
|
||||||
|
$dLat = toRadians((float) $lat2 - (float) $lat1);
|
||||||
|
$dLng = toRadians((float) $lon2 - (float) $lon1);
|
||||||
|
$a = (float) ( sin($dLat / 2) * sin($dLat / 2)) + (float) ( cos( toRadians($lat1)) * cos( toRadians($lat2)) * sin($dLng / 2) * sin($dLng / 2) );
|
||||||
|
$dist = 2 * 3958.75 * atan2(sqrt($a), sqrt(1 - (float) $a));
|
||||||
|
return sqrt(pow($dist * 1609.00, 2) + pow((float) $lat1 - (float)$lat2, 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
Loading…
Reference in New Issue