From 299e4c8a54df6622bb1918ee4c23c39816da42c8 Mon Sep 17 00:00:00 2001 From: franzz Date: Thu, 14 Feb 2019 22:59:32 +0100 Subject: [PATCH] Adding elevation chart --- inc/converter.php | 23 +- inc/project.php | 8 +- inc/spot.php | 13 +- masks/index.html | 1 + masks/project.html | 123 +++--- script/d3.min.js | 2 + script/leaflet.min.js | 795 +++++++++++++++++++++++++++++++++- style/_common.scss | 13 + style/_fa.scss | 12 + style/_leaflet_elevation.scss | 86 ++++ style/_mask_project.scss | 10 +- style/spot.css | 2 +- style/spot.css.map | 4 +- style/spot.scss | 1 + 14 files changed, 1001 insertions(+), 92 deletions(-) create mode 100644 script/d3.min.js create mode 100644 style/_leaflet_elevation.scss diff --git a/inc/converter.php b/inc/converter.php index 5b078b5..086d210 100644 --- a/inc/converter.php +++ b/inc/converter.php @@ -5,19 +5,12 @@ class Converter extends PhpObject { const GPX_EXT = '.gpx'; const GEO_EXT = '.geojson'; - /** - * Project to convert - * @var Project - */ - private $oProject; - - public function __construct(&$oProject) { + public function __construct() { parent::__construct(__CLASS__, Settings::DEBUG); - $this->oProject = &$oProject; } - public function convertToGeoJson() { - $sFileName = pathinfo($this->oProject->getGeoFile(), PATHINFO_FILENAME); + public function convertToGeoJson($sGeoFile) { + $sFileName = pathinfo($sGeoFile, PATHINFO_FILENAME); $sGpxFileName = $sFileName.self::GPX_EXT; $sGeoJsonFileName = $sFileName.self::GEO_EXT; @@ -70,7 +63,7 @@ class Gpx extends Geo { $asTrack['points'][] = array( 'lon' => (float) $asPoint['lon'], 'lat' => (float) $asPoint['lat'], - //'ele' => (int) $asPoint->ele + 'ele' => (int) $asPoint->ele ); } } @@ -96,7 +89,7 @@ class GeoJson extends Geo { } private function getGeoJson() { - $asTracks = array(); + $asTracks = array('features'=>array()); foreach($this->asTracks as $asTrackProps) { switch($asTrackProps['color']) { @@ -114,15 +107,15 @@ class GeoJson extends Geo { 'description' => $asTrackProps['desc'] ), 'geometry' => array( - 'type' => 'MultiLineString', + 'type' => 'LineString', 'coordinates' => array() ) ); foreach($asTrackProps['points'] as $asPoint) { - $asTrack['geometry']['coordinates'][0][] = array_values($asPoint); + $asTrack['geometry']['coordinates'][] = array_values($asPoint); } - $asTracks[] = $asTrack; + $asTracks['features'][] = $asTrack; } return $asTracks; diff --git a/inc/project.php b/inc/project.php index e9a8074..5963183 100644 --- a/inc/project.php +++ b/inc/project.php @@ -100,7 +100,13 @@ class Project extends PhpObject { case 1: $asProject['mode'] = self::MODE_BLOG; break; case 2: $asProject['mode'] = self::MODE_HISTO; break; } - $asProject['geofile'] = Spot::addTimestampToFilePath(self::GEO_FOLDER.$asProject['geofile']); + + $sGeoFile = self::GEO_FOLDER.$asProject['geofile']; + if(!file_exists($sGeoFile)) { + (new Converter())->convertToGeoJson($asProject['geofile']); + } + + $asProject['geofile'] = Spot::addTimestampToFilePath($sGeoFile); $asProject['codename'] = $sCodeName; $asProject['timezone_desc'] = Spot::getTimeZoneDesc($asProject['timezone']); } diff --git a/inc/spot.php b/inc/spot.php index 37dcbdb..fa711d8 100755 --- a/inc/spot.php +++ b/inc/spot.php @@ -48,7 +48,8 @@ class Spot extends Main $asClasses = array( array('name'=>'project', 'project'=>true), array('name'=>'picture', 'project'=>true), - array('name'=>'cacher', 'project'=>true) + array('name'=>'cacher', 'project'=>true), + array('name'=>'converter', 'project'=>true) ); parent::__construct($oClassManagement, $sProcessPage, $asClasses); @@ -140,6 +141,7 @@ class Spot extends Main 'index', array( 'filepath_css' => self::addTimestampToFilePath('style/spot.css'), + 'filepath_js_d3' => self::addTimestampToFilePath('script/d3.min.js'), 'filepath_js_leaflet' => self::addTimestampToFilePath('script/leaflet.min.js'), 'filepath_js_jquery' => self::addTimestampToFilePath('script/jquery.min.js'), 'filepath_js_jquery_mods' => self::addTimestampToFilePath('script/jquery.mods.js'), @@ -436,6 +438,10 @@ class Spot extends Main $sToken = Settings::IGN_FR_KEY; $sReferer = 'https://www.visugpx.com/yfJDwfuTlf'; break; + case 'opentopomap': + $sPattern = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'; + $asDomains = array('a', 'b', 'c'); + break; case 'static': $sPattern = 'https://api.mapbox.com/v4/mapbox.satellite/url-https%3A%2F%2Fspot.lutran.fr%2Fimages%2Ffootprint_mapbox.png({x},{y})/{x},{y},{z}/400x300.png?access_token={token}'; $sToken = Settings::MAPBOX_KEY; @@ -455,9 +461,8 @@ class Spot extends Main } public function convertGpxToGeoJson() { - $this->oClassManagement->incClass('converter', true); - $oConverter = new Converter($this->oProject); - return $oConverter->convertToGeoJson(); + $oConverter = new Converter(); + return $oConverter->convertToGeoJson($this->oProject->getGeoFile()); } public static function DecToDMS($dValue, $sType='lat') { diff --git a/masks/index.html b/masks/index.html index bc928d9..1a9d1af 100755 --- a/masks/index.html +++ b/masks/index.html @@ -5,6 +5,7 @@ + diff --git a/masks/project.html b/masks/project.html index 0eb5d66..739c586 100755 --- a/masks/project.html +++ b/masks/project.html @@ -137,8 +137,7 @@ function initSpotMessages(aoMessages, aoTracks) { //Tile layers var oMapBoxSat = L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite', minZoom: 0, maxZoom: 19}), - oOpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19}), - //oMapBoxStreet = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.streets'}), + oOpenTopoMap = L.tileLayer(self.tmp('tile_api'), {id: 'opentopomap', minZoom: 2, maxZoom: 19}), oIgnSpain = L.tileLayer(self.tmp('tile_api'), {id: 'ign.es', minZoom: 1, maxZoom: 20}), oIgnFrance = L.tileLayer(self.tmp('tile_api'), {id: 'ign.fr', minZoom: 0, maxZoom: 18, tileSize: 256}), oLinz = L.tileLayer(self.tmp('tile_api'), {id: 'linz', maxZoom: 17, continuousWorld: true, attribution: 'Sourced from LINZ. CC BY 4.0'}); @@ -151,12 +150,71 @@ function initSpotMessages(aoMessages, aoTracks) { }); self.tmp('map', oMap); + //Controls: Legend + var oLegend = L.control({position: 'bottomleft'}); + oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];}; + oLegend.addTo(oMap); + + //Controls: Projects + var oProjects = L.control({position: 'bottomleft'}); + oProjects.onAdd = function(oMap) { + + var $Labels = $('
', {'class': 'leaflet-control-layers-base'}); + $.each(self.vars('projects'), function(sCodeName, asProject){ + var asRadioAttrs = {'type': 'radio', 'class': 'leaflet-control-layers-selector', 'name':'project', 'value': sCodeName}; + if(asProject.id == self.vars(['project', 'id'])) asRadioAttrs.checked = 'checked'; + var $Radio =$('', asRadioAttrs).change(function(){ + self.setHash(self.vars('page'), [$(this).val()]); + }); + + var $Label = $('