added leaflet tag

Link

XaC

407
3
14

improved formatting

Source Link

edit approved Nov 29, 2019 at 7:18

Chase Choi

1.1k
7
19

I'd like to create a file upload button and then print the resulting gpx file on the map, could anyone have a look at this code to see where I'm going wrong?

body:

<form action="/action_page.php"> Select a file: <input type="file" id="uploadID"><br><br> <input type="submit">

<form action="/action_page.php"> Select a file: <input type="file" id="uploadID"><br><br> <input type="submit">

js:

let gpx = document.getElementById('uploadID'); gpx.onchange = function(){ new L.GPX(gpx, {async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' }}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

let gpx = document.getElementById('uploadID'); gpx.onchange = function() { new L.GPX(gpx, { async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' } }).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

I'd like to create a file upload button and then print the resulting gpx file on the map, could anyone have a look at this code to see where I'm going wrong?

body:

<form action="/action_page.php"> Select a file: <input type="file" id="uploadID"><br><br> <input type="submit">

js:

let gpx = document.getElementById('uploadID'); gpx.onchange = function(){ new L.GPX(gpx, {async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' }}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

I'd like to create a file upload button and then print the resulting gpx file on the map, could anyone have a look at this code to see where I'm going wrong?

body:

<form action="/action_page.php"> Select a file: <input type="file" id="uploadID"><br><br> <input type="submit">

js:

let gpx = document.getElementById('uploadID'); gpx.onchange = function() { new L.GPX(gpx, { async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' } }).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

added 42 characters in body; edited title

Source Link

edited Nov 26, 2019 at 3:11

PolyGeo ♦

65.5k
29
115
353

How to upload GPXfile Uploading GPX file to website and displaying it display visually

I'd like to create a file upload button and then print the resulting gpx file on the map, could anyone have a look at this code to see where I'm going wrong?

body:

Select a file:

<form action="/action_page.php"> Select a file: <input type="file" id="uploadID"><br><br> <input type="submit">

js: let gpx = document.getElementById('uploadID'); gpx.onchange = function(){ new L.GPX(gpx, {async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' }}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

Thank you!

let gpx = document.getElementById('uploadID'); gpx.onchange = function(){ new L.GPX(gpx, {async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' }}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

How to upload GPXfile to website and it display visually

I'd like to create a file upload button and then print the resulting gpx file on the map, could anyone have a look at this code to see where I'm going wrong?

body:

Select a file:

js: let gpx = document.getElementById('uploadID'); gpx.onchange = function(){ new L.GPX(gpx, {async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' }}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }

Thank you!

Uploading GPX file to website and displaying it visually

I'd like to create a file upload button and then print the resulting gpx file on the map, could anyone have a look at this code to see where I'm going wrong?

body:

<form action="/action_page.php"> Select a file: <input type="file" id="uploadID"><br><br> <input type="submit">

js:

let gpx = document.getElementById('uploadID'); gpx.onchange = function(){ new L.GPX(gpx, {async: true, marker_options: { startIconUrl: 'pin-icon-start.png', endIconUrl: 'pin-icon-end.png', shadowUrl: 'pin-shadow.png' }}).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); }).addTo(map); }