JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/togeojson/0.16.0/togeojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.4.0/mapbox-gl.js"></script>
<h3>Select GPX-file and Date for replace</h3>
<div>GPX-file <input type="file" id="rfile" name="file" /></div>
<div>Date <input type="date" id='dtime'></div>
<div id='cd'></div>
<div id='mose_coord'></div>
<div id='features'></div>

<div id='map' style="width:100%; height:500px;"></div>

JavaScript

if (window.File && window.FileReader && window.FileList && window.Blob) {
    // Работает
} else {
    alert('File API не поддерживается данным браузером');
}

var sfile;
var coords;
var times;

var token="pk.eyJ1IjoidWdnd2F5IiwiYSI6ImNrNDBhYnFnazAxMDQza255dXM3anhxajEifQ.hB6x3H1-q9MomgKPP6sH-Q";
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object		
    var rfile = files[0];
    var reader = new FileReader();		
    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            var s = e.target.result;
						var dom = (new DOMParser()).parseFromString(s, 'text/xml');
						var jsongpx = toGeoJSON.gpx(dom);
						map.addLayer({
'id': 'route',
'type': 'line',
'source': {
	'type': 'geojson',
	'data':jsongpx
	},
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': 'red',
'line-width': 2
}
});

var coordinates = jsongpx.features[0].geometry.coordinates;
 
// Pass the first coordinates in the LineString to `lngLatBounds` &
// wrap each coordinate pair in `extend` to include them in the bounds
// result. A variation of this technique could be applied to zooming
// to the bounds of multiple Points or Polygon geomteries - it just
// requires wrapping all the coordinates with the extend method.
var bounds = coordinates.reduce(function(bounds, coord) {
return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
 
map.fitBounds(bounds, {
padding: 20
});

            sfile = s.split('\n');
            var i = 0,
                t = 0,
                p = 0,
                c = 0;
						var out;
            if (s == "") return;
						//<time>2019-12-08T
						//<time>2000-04-23T
						var dt = $('#dtime').val();						
						for(var ss in sfile)
						{
							var td = '$1<time>'+dt+'T$3';
							var os = sfile[ss].replace(/(.*)<time>(.*?)T(.*?)/g, td);
							if(os !== undefined)
							out+=os+'\n';
						}
		var...