diff --git a/.hgignore b/.hgignore index 049c8de..d94eb05 100644 --- a/.hgignore +++ b/.hgignore @@ -1,6 +1,6 @@ syntax: glob *~ -traces +gpxs/* leaflet-gpx/* leaflet-plugins/* leaflet-elevation/* diff --git a/README.md b/README.md new file mode 100644 index 0000000..3e6e617 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +SHARE GPX TRACKS +============ + +What +------ + +Share GPX tracks, using Leaflet + +Tested in Leaflet 0.6.4 + +Where +------ + +Source code: + +https://github.com/stefanocudini/share-tracks + +Demos: + +http://labs.easyblog.it/maps/share-tracks/ + diff --git a/gpxs/chia.fosso.gpx b/gpxs/chia.fosso.gpx new file mode 100755 index 0000000..be14861 --- /dev/null +++ b/gpxs/chia.fosso.gpx @@ -0,0 +1,154 @@ + + + + + + +286.0 + +286.0 + +292.0 + +288.0 + +289.0 + +288.0 + +282.0 + +282.0 + +291.0 + +286.0 + +281.0 + +273.0 + +268.0 + +268.0 + +269.0 + +276.0 + +273.0 + +272.0 + +275.0 + +272.0 + +272.0 + +272.0 + +269.0 + +262.0 + +263.0 + +263.0 + +266.0 + +272.0 + +270.0 + +260.0 + +268.0 + +269.0 + +267.0 + +265.0 + +259.0 + +257.0 + +256.0 + +253.0 + +255.0 + +252.0 + +252.0 + +241.0 + +237.0 + +233.0 + +226.0 + +226.0 + +225.0 + +229.0 + +221.0 + +217.0 + +221.0 + +224.0 + +234.0 + +232.0 + +232.0 + +228.0 + +230.0 + +228.0 + +226.0 + +222.0 + +221.0 + +228.0 + +254.0 + +261.0 + +263.0 + +260.0 + +259.0 + +262.0 + +259.0 + + + + diff --git a/gpxs/eremo_san_girolamo.gpx b/gpxs/eremo_san_girolamo.gpx new file mode 100755 index 0000000..b0daec7 --- /dev/null +++ b/gpxs/eremo_san_girolamo.gpx @@ -0,0 +1,356 @@ + + + + + + + 761.0 + + + + 761.0 + + + + 756.0 + + + + 750.0 + + + + 749.0 + + + + 750.0 + + + + 745.0 + + + + 744.0 + + + + 746.0 + + + + 746.0 + + + + 751.0 + + + + 755.0 + + + + 753.0 + + + + 744.0 + + + + 740.0 + + + + 737.0 + + + + 737.0 + + + + 732.0 + + + + 734.0 + + + + 734.0 + + + + 735.0 + + + + 734.0 + + + + 725.0 + + + + 723.0 + + + + 717.0 + + + + 717.0 + + + + 718.0 + + + + 713.0 + + + + 711.0 + + + + 702.0 + + + + 695.0 + + + + 702.0 + + + + 703.0 + + + + 705.0 + + + + 700.0 + + + + 698.0 + + + + 677.0 + + + + 679.0 + + + + 683.0 + + + + 684.0 + + + + 695.0 + + + + 694.0 + + + + 692.0 + + + + 689.0 + + + + 688.0 + + + + 686.0 + + + + 684.0 + + + + 683.0 + + + + 684.0 + + + + 687.0 + + + + 687.0 + + + + 686.0 + + + + 680.0 + + + + 681.0 + + + + 681.0 + + + + 678.0 + + + + 680.0 + + + + 681.0 + + + + 683.0 + + + + 684.0 + + + + 672.0 + + + + 665.0 + + + + 655.0 + + + + 650.0 + + + + 649.0 + + + + 653.0 + + + + 653.0 + + + + 651.0 + + + + 649.0 + + + + 649.0 + + + + 644.0 + + + + 645.0 + + + + 647.0 + + + + 648.0 + + + + 651.0 + + + + 644.0 + + + + 642.0 + + + + 642.0 + + + + 638.0 + + + + 641.0 + + + + 642.0 + + + + 643.0 + + + + 645.0 + + + + 639.0 + + + + 639.0 + + + + 639.0 + + + + 639.0 + + + + + diff --git a/index.php b/index.php index f639ab2..c35707e 100755 --- a/index.php +++ b/index.php @@ -1,6 +1,6 @@ "> zoom download - +
diff --git a/leaflet-elevation/README.md b/leaflet-elevation/README.md new file mode 100755 index 0000000..691d079 --- /dev/null +++ b/leaflet-elevation/README.md @@ -0,0 +1,54 @@ +Leaflet.Elevation +================= + +### What is this? +A [Leaflet](http://leafletjs.com) plugin to view an interactive height profile of polylines lines using [d3](http://d3js.org). Currently Chrome and Firefox are supported and tested. +This plugin is under development. + +Support for +- GeoJSON [Demo](http://mrmufflon.github.io/Leaflet.Elevation/example/example.html) +- GPX-files using [leaflet-gpx](https://github.com/mpetazzoni/leaflet-gpx) [Demo](http://mrmufflon.github.io/Leaflet.Elevation/example/example_gpx.html) + +*Tested with Leaflet 0.4+* + + + + +### How to use +```javascript +//all used options are the default values +var el = L.control.elevation({ + position: "topright", + theme: "steelblue-theme", //default: lime-theme + width: 600, + height: 125, + margins: { + top: 10, + right: 20, + bottom: 30, + left: 50 + }, + useHeightIndicator: true, //if false a marker is drawn at map position + interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate + hoverNumber: { + decimalsX: 3, //decimals on distance (always in km) + decimalsY: 0, //deciamls on height (always in m) + formatter: undefined //custom formatter function may be injected + }, + xTicks: undefined, //number of ticks in x axis, calculated by default according to width + yTicks: undefined //number of ticks on y axis, calculated by default according to height +}); +el.addTo(map); +L.geoJson(geojson,{ + onEachFeature: el.addData.bind(el) //working on a better solution +}).addTo(map); +``` +```javascript +var el = L.control.elevation(); +el.addTo(map); +var g=new L.GPX("./mytrack.gpx", {async: true}); +g.on("addline",function(e){ + el.addData(e.line); +}); +g.addTo(map); +``` diff --git a/leaflet-gpx/README.md b/leaflet-gpx/README.md new file mode 100644 index 0000000..39efcbe --- /dev/null +++ b/leaflet-gpx/README.md @@ -0,0 +1,126 @@ +GPX plugin for Leaflet +====================== + +[Leaflet](http://www.leafletjs.com) is a Javascript library for displaying +interactive maps. This plugin, based on the work of [Pavel +Shramov](http://github.com/shramov) and his +[leaflet-plugins](http://github.com/shramov/leaflet-plugins), it allows for the +analysis and parsing of a GPX track in order to display it as a Leaflet map +layer. As it parses the GPX data, it will record information about the recorded +track, including total time, moving time, total distance, elevation stats and +heart-rate. + +GPX parsing will automatically handle pauses in the track with a default +tolerance interval of 15 seconds between points. You can configure this +interval by setting `max_point_interval`, in milliseconds, in the options +passed to the `GPX` constructor. + +I've put together a complete example as a +[demo](http://mpetazzoni.github.com/leaflet-gpx/). + + +License +------- + +`leaflet-gpx` is under the *BSD 2-clause license*. Please refer to the +attached LICENSE file and/or to the copyright header in gpx.js for more +information. + +Usage +----- + +Usage is very simple. Let's consider we have a Leaflet map: + +```javascript +var map = L.map('map'); +L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: 'Map data © OpenStreetMap' +}).addTo(map); +``` + +Displaying the GPX track is as easy as: + +```javascript +var gpx = '...'; // URL to your GPX file or the GPX itself +new L.GPX(gpx, {async: true}).on('loaded', function(e) { + map.fitBounds(e.target.getBounds()); +}).addTo(map); +``` + +If you want to display additional information about the GPX track, you can do +so in the 'loaded' event handler, calling one of the following methods on the +`GPX` object `e.target`: + +* `get_name()`: returns the name of the GPX track +* `get_distance()`: returns the total track distance, in meters +* `get_start_time()`: returns a Javascript `Date` object representing the + starting time +* `get_end_time()`: returns a Javascript `Date` object representing when the + last point was recorded +* `get_moving_time()`: returns the moving time, in milliseconds +* `get_total_time()`: returns the total track time, in milliseconds +* `get_moving_pace()`: returns the average moving pace in milliseconds per km +* `get_elevation_gain()`: returns the cumulative elevation gain, in meters +* `get_elevation_loss()`: returns the cumulative elevation loss, in meters +* `get_average_hr()`: returns the average heart rate (if available) + +If you're not a fan of the metric system, you also have the following methods +at your disposal: + +* `get_distance_imp()`: returns the total track distance in miles +* `get_moving_pace_imp()`: returns the average moving pace in milliseconds per + mile + +The reason why these methods return milliseconds is that you have at your +disposal a nice helper method to format a duration in milliseconds into a cool +string like `3:07'48"` or `59'32.431`: + +* `get_duration_string(duration, hidems)`, where `duration` is in + milliseconds and `hidems` is an optional boolean you can use to request never + to display millisecond precision. + +You can also get full elevation and heartrate data with: + +* `get_elevation_data()` and `get_elevation_data_imp()` +* `get_heartrate_data()` and `get_heartrate_data_imp()` + +These methods all return an array of points `[distance, value, tooltip]` where +the distance is either in kilometers or in miles and the elevation in meters of +feet, depending on whether you use the `_imp` variant or not. Heart rate, +obviously, doesn't change. + + +About marker icons +------------------ + +By default `gpx.js` will use `pin-icon-start.png`, `pin-icon-end.png` and +`pin-shadow.png` as the marker icons URLs for, respectively, the start marker, +the end marker and their drop shadow. Since it might not be convenient that +these images have to reside under the same directory as your HTML page, it is +possible to override the marker icon URLs and sizes by passing a +`marker_options` object to the `GPX` options object. + +The field names are the same as for custom Leaflet icons, as explained in the +[Markers with custom icons](http://leafletjs.com/examples/custom-icons.html) +page in Leaflet's documentation. The only difference is that instead of +`iconUrl` you should specify `startIconUrl` and `endIconUrl` for the start and +end markers, respectively. + +Note that you do not need to override all the marker icon options as `gpx.js` +will use sensible defaults with sizes matching the provided icon images. Here +is how you would override the URL of the provided icons if you decided to place +them in an `images/` directory: + +```javascript +var url = '...'; // URL to your GPX file +new L.GPX(url, { + async: true, + marker_options: { + startIconUrl: 'images/pin-icon-start.png', + endIconUrl: 'images/pin-icon-end.png', + shadowUrl: 'images/pin-shadow.png' + } +}).on('loaded', function(e) { + map.fitBounds(e.target.getBounds()); +}).addTo(map); +``` diff --git a/leaflet-plugins/README.asciidoc b/leaflet-plugins/README.asciidoc new file mode 100755 index 0000000..c22ed53 --- /dev/null +++ b/leaflet-plugins/README.asciidoc @@ -0,0 +1,41 @@ +Leaflet plugins +=============== + +== What's it? + +Miscellaneous plugins for Leaflet library for services that need to display +route information and need satellite imagery from different providers. +Currently it consists of: + + - Vector layers (`layer/vector/`): + * GPX + * KML + + - Providers (`layer/tile`): + * Google - using Google Maps API v3; + * Yandex - using Yandex Maps API v2; + * Bing - with propper attribution. + +All theese providers are implemented with respect to terms of use. + +Also there are some useful control plugins (`control/`): + + * Permalink - OpenLayers compatible permanent link with support of storing + location data in hash part (#lat=...); + * Scale - scale ruler which looks like one on paper maps. + +== How to get? + +http://psha.org.ru/cgit/psha/leaflet-plugins.git + +or + +http://github.com/shramov/leaflet-plugins.git + +== Russian docs + +See link:http://psha.org.ru/b/leaflet-plugins.ru.html[russian documentation] for more info. + +//////////////////////////////////// +vim: sts=4 sw=4 et tw=80 ft=asciidoc +//////////////////////////////////// diff --git a/share-tracks.css b/share-tracks.css index 0c0da12..3733f86 100755 --- a/share-tracks.css +++ b/share-tracks.css @@ -98,6 +98,7 @@ a span { border-radius:.5em; } .leaflet-control-permalink { + display: none; border-radius: 6px; } .leaflet-container .leaflet-control-attribution {