mpetazzoni / leaflet-gpx Goto Github PK

import { AfterViewInit, Component, OnInit } from '@angular/core';
import * as L from 'leaflet-gpx';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit {
  private map;
  constructor() { }

  ngOnInit() {
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
    }).addTo(map);

    var gpx = 'C:/xampp/htdocs/leaflet-example/src/app/map/london.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);
    
    this.map = map;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
<div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
    </div>
  </div>

this.callInitHooks()

gpx.js:262 Uncaught DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    at e._load_xml (http://test.localhost:8021/static/bow/leaflet-gpx/gpx.js:262:9)
    at e._parse (http://test.localhost:8021/static/bow/leaflet-gpx/gpx.js:291:12)
    at e.initialize (http://test.localhost:8021/static/bow/leaflet-gpx/gpx.js:91:12)
    at new e (http://test.localhost:8021/static/bow/leaflet/dist/leaflet.js:5:2745)
    at FileReader.<anonymous> (http://test.localhost:8021/kalendar/:600:19)

gpx.js:270 GET http://test.localhost:8021/kalendar/-----BEGIN%20PGP%20PUBLIC%20KEY%20BLOCK…gg70ajn5b5VHPvrw3poywoe/Q===Ct9S-----END%20PGP%20PUBLIC%20KEY%20BLOCK----- 414 (Request-URI Too Long)

    var myIcon = L.AwesomeMarkers.icon({
        icon: 'coffee',
        prefix: 'fa',
        markerColor: 'blue',
        iconColor: 'white'
    }); 
    var gpx = new L.GPX(gpx, {
         async: false,
         marker_options: {
                    icon: myIcon,
                    startIconUrl: null,
                    endIconUrl: null,
                    shadowUrl: null
          }     
    }); 

var gain = (e.target.get_elevation_gain() / 10).toFixed(0);
var loss = (e.target.get_elevation_loss() / 10).toFixed(0);

var gpxLayer = new L.GPX(gpx, {async: true});
        gpxLayer.on('loaded', function(e) { map.fitBounds(e.target.getBounds());}); 
        map.addLayer(gpxLayer);

    var options = {
        position: 'topleft',
        draw : {
            polygon: false,
            circle: false,
            rectangle: false,
            marker: false,
            line: false
        },

        edit: {
            featureGroup: gpxLayer,
            remove: false
        }
    };

    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

req.onreadystatechange = function() {
  if (req.readyState != 4) return;
  if (req.status == 200) {
      if (req.responseXML) {
          cb(req.responseXML, options);
      } else {
          try{
              var parser = new DOMParser();
              cb(parser.parseFromString(req.response, "text/xml"), options);
          } catch (e) {
              console.log(e);
          }
      }
  }
};

  <wpt lat="60.2068333" lon="25.7541667">
    <time>2011-11-08T20:32:40Z</time>
    <name>Aggskar</name>
    <sym>Beach</sym>
    <extensions>
      <gpxx:WaypointExtension xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3">
        <gpxx:DisplayMode>SymbolAndName</gpxx:DisplayMode>
      </gpxx:WaypointExtension>
    </extensions>
  </wpt>

  <wpt lat="55.9259326" lon="14.3052798">
    <time>2013-03-08T12:31:11Z</time>
    <name>Ahus</name>
    <cmt>150-200kr EWTDA Inet</cmt>
    <desc>150-200kr EWTDA Inet</desc>
    <sym>Marina</sym>
    <extensions>
      <gpxx:WaypointExtension xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3">
        <gpxx:DisplayMode>SymbolAndName</gpxx:DisplayMode>
      </gpxx:WaypointExtension>
    </extensions>
  </wpt>

    <gpxx:WaypointExtension xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3">
       <gpxx:DisplayMode>SymbolAndName</gpxx:DisplayMode>
     </gpxx:WaypointExtension>

{
    "time": "2014-05-12T16:55:02+0000",
    "location": {
      "type": "Point",
      "coordinates": [-70.222, 42.123]
    },
    "speed": 5400.0,
    "altitude": 14.67527198791504,
    "tripId": "1399913694471-c258e6ce-667e-4749-a3a4-ae93f00e56a6"
  }

diff --git a/gpx.js b/gpx.js
index fcc4ce0..a6b57ca 100644
--- a/gpx.js
+++ b/gpx.js
@@ -342,6 +342,8 @@ L.GPX = L.FeatureGroup.extend({
         var symIcon;
         if (options.marker_options.wptIcons && options.marker_options.wptIcons[symKey]) {
           symIcon = options.marker_options.wptIcons[symKey];
+       } else if (options.marker_options.wptIcons && options.marker_options.wptIcons['']) {
+          symIcon = options.marker_options.wptIcons[''];
         } else if (options.marker_options.wptIconUrls && options.marker_options.wptIconUrls[symKey]) {
           symIcon = new L.GPXTrackIcon({iconUrl: options.marker_options.wptIconUrls[symKey]});
         } else {

	// Load GPX Tacks
	
		var tracks = [
			["/mapselchaltentrekking/maps/gpx/track-20.gpx", "#f48024", "4", "", "", ""],
			["/mapselchaltentrekking/maps/gpx/test-wpticon.gpx", "#f48024", "4", "", "", ""],
		];
				
		function loadGpx(item, index) {
			var g = new L.GPX(item[0], { 
				async: true,
				parseElements: ['track'],
				polyline_options: {
					weight: item[2],
					color: item[1],
					fillOpacity: 1
				},
				marker_options: {
					startIconUrl: item[4],
					endIconUrl: item[5],				
					iconSize: [40, 40],
					iconAnchor: [20, 40],
					shadowSize: [0, 0],
					shadowAnchor: [0, 0],
					wptIconUrls: {
					'green': '/mapselchaltentrekking/maps/iconos/sendero-green.png',
					}
				}
			});						
					

			g.on('loaded', function(e) {
				var gpx = e.target,
				name = gpx.get_name(),
				distM = gpx.get_distance(),
				distKm = distM / 1000,
				distKmRnd = distKm.toFixed(1),
				eleGain = gpx.get_elevation_gain().toFixed(0),
				eleLoss = gpx.get_elevation_loss().toFixed(0),
				eleDiff = gpx.get_elevation_max().toFixed(0) - gpx.get_elevation_min().toFixed(0);
				var info = "<b>" + name + "</b></br>" + "Distancia: <b>" + distKmRnd + " km </b></br>" + "Desnivel: <b>" + eleDiff + " m </b></br> <a target=" + "'" + "_parent" + "'" + "href=" + "'" + item[3] + "'"  + ">+ info</a>"

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<!-- Stylesheet (CSS) -->

<link rel="stylesheet" href="/mapselchaltentrekking/maps/style/mapa-general.css" />

<!-- Font-Awesome (CSS) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- leaflet-geometryutil -->
<script src="https://unpkg.com/[email protected]/src/leaflet.geometryutil.js"></script>

<!-- Leaflet-fullscreen (JS/CSS) -->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

<!-- D3.js (JS) -->
<script src="https://unpkg.com/[email protected]/build/d3.min.js" charset="utf-8"></script>

<!-- leaflet-gpx (JS) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.js"></script>

<!-- leaflet-easyButton (JS/CSS) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

</head>
<body>
    <!-- Map div -->
    <div id="map" style="height: 100% !important;"></div>
    
    <!-- Main Script -->
    <script>
    
        // Map Setup
		var opts = {
    		map: {
	    		center: [-48.979325, -72.827558],
		    	zoom: 12.5,
				markerZoomAnimation: false,
    			zoomControl: true,
    			attributionControl: false
	    	},
			
    		osmLayer: {
			    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			    options: {
				    maxZoom: 18,
				    attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
			    }
		    },
		    
		    otmLayer: {
			url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
			    options: {
				    maxZoom: 18,
				    attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
			    },
		    },
    
		    layersControl: {
			    options: {
			    	position: 'topright',
			    	collapsed: true,
		    	},
		    },
		    
		    scale: {
		        maxWidth: 100,
		        metric: true,
		        imperial: false,
		    },
		    
		    fullscreenControl: {
		        title: {
                    'false': 'Pantalla Completa',
                    'true': 'Salir de Pantalla Completa'
                 }
		    }
	    };
	    
	    // Define Icons
	    var iconSize = [20, 20];
	    var shadowSize = [34, 34];
		var iconAnchor = [10, 10];
		var shadowAnchor = [17, 17];

	<!-- Camping Area -->	
		var CampIcon = L.icon({
			iconUrl: '/mapselchaltentrekking/maps/iconos/camp.png',
			iconSize: [iconSize[0], iconSize[1]],
			iconAnchor: [iconAnchor[0], iconAnchor[1]],
			shadowUrl: '/mapselchaltentrekking/maps/iconos/icono-shadow.png',
			shadowSize: [shadowSize[0], shadowSize[1]],
			shadowAnchor: [shadowAnchor[0], shadowAnchor[1]]
		});	

	<!-- Gendarmeria -->	
		var GendaIcon = L.icon({
			iconUrl: '/mapselchaltentrekking/maps/iconos/genda.png',
			iconSize: [iconSize[0], iconSize[1]],
			iconAnchor: [iconAnchor[0], iconAnchor[1]],
			shadowUrl: '/mapselchaltentrekking/maps/iconos/icono-shadow.png',
			shadowSize: [shadowSize[0], shadowSize[1]],
			shadowAnchor: [shadowAnchor[0], shadowAnchor[1]]
		});				
		
	<!-- Internacional border-->	
		var PasointIcon = L.icon({
			iconUrl: '/mapselchaltentrekking/maps/iconos/pasoint.png',
			iconSize: [iconSize[0], iconSize[1]],
			iconAnchor: [iconAnchor[0], iconAnchor[1]],
			shadowUrl: '/mapselchaltentrekking/maps/iconos/icono-shadow.png',
			shadowSize: [shadowSize[0], shadowSize[1]],
			shadowAnchor: [shadowAnchor[0], shadowAnchor[1]]
		});	

	    
	// Load GPX Tacks
	
		var tracks = [
			["/mapselchaltentrekking/maps/gpx/track-20.gpx", "#f48024", "4", "", "", ""],
			["/mapselchaltentrekking/maps/gpx/test-wpticon.gpx", "#f48024", "4", "", "", ""],
		];
				
		function loadGpx(item, index) {
			var g = new L.GPX(item[0], { 
				async: true,
				parseElements: ['track'],
				polyline_options: {
					weight: item[2],
					color: item[1],
					fillOpacity: 1
				},
				marker_options: {
					startIconUrl: item[4],
					endIconUrl: item[5],				
					iconSize: [40, 40],
					iconAnchor: [20, 40],
					shadowSize: [0, 0],
					shadowAnchor: [0, 0],
					wptIconUrls: {
					'green': '/mapselchaltentrekking/maps/iconos/sendero-green.png',
					}
				}
			});						
					

			g.on('loaded', function(e) {
				var gpx = e.target,
				name = gpx.get_name(),
				distM = gpx.get_distance(),
				distKm = distM / 1000,
				distKmRnd = distKm.toFixed(1),
				eleGain = gpx.get_elevation_gain().toFixed(0),
				eleLoss = gpx.get_elevation_loss().toFixed(0),
				eleDiff = gpx.get_elevation_max().toFixed(0) - gpx.get_elevation_min().toFixed(0);
				var info = "<b>" + name + "</b></br>" + "Distancia: <b>" + distKmRnd + " km </b></br>" + "Desnivel: <b>" + eleDiff + " m </b></br> <a target=" + "'" + "_parent" + "'" + "href=" + "'" + item[3] + "'"  + ">+ info</a>"

				// Register popup on click
				gpx.getLayers()[0].bindPopup(info)
				
				// Mouseover Style;
				gpx.getLayers()[0].on('mouseover', function(e) {
					gpx.getLayers()[0].setStyle({
						weight: 4,
						color: '#71a0b4',
						fillOpacity: 0.8,
					});
					gpx.getLayers()[0].bringToFront();
				});
				gpx.getLayers()[0].on('mouseout', function(e) {
					gpx.getLayers()[0].setStyle({
						weight: 3,
						color: item[1],
						fillOpacity: 1
					});
				});
			});
			g.addTo(map);
		};

	// Define Map Elements
		var info = "Name: ";
		var map = new L.Map('map', opts.map);
		var baseLayers = {};
		baseLayers["Base"] = new L.TileLayer(opts.osmLayer.url, opts.osmLayer.options);
		baseLayers["Topografico"] = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);
		var controlLayer = L.control.layers(baseLayers, null, opts.layersControl.options);
		var controlFullscreen = new L.Control.Fullscreen(opts.fullscreenControl)
		 
		// Load Map
		L.control.scale(opts.scale).addTo(map);
		controlFullscreen.addTo(map);
		controlLayer.addTo(map);
		L.easyButton('fa-home', function(btn, map){CenterMap(opts.map.center[0], opts.map.center[1], opts.map.zoom);}, 'Centrar').addTo(map);
		map.addLayer(baseLayers["Base"]);
		tracks.forEach(loadGpx);		

	// Load Pop-ups 
		<!-- Camping Punta Norte -->	
        var CampLocation = new L.LatLng(-48.999689, -72.838008);
        L.marker(CampLocation, {icon: CampIcon}).addTo(map).bindPopup("Campamento<br><b>Punta Norte</b>");

		<!-- Gendarmeria Punta Norte -->	               
        var GendaLocation = new L.LatLng(-48.998940, -72.839430);
        L.marker(GendaLocation, {icon: GendaIcon}).addTo(map).bindPopup("Gendarmería<br><b>Punta Norte</b>");			
		
		<!-- Paso Internacional Dos Lagunas-->			
        var PasointLocation = new L.LatLng(-48.960076, -72.815826);
        L.marker(PasointLocation, {icon: PasointIcon}).addTo(map).bindPopup("Paso Internacional<br><b>Dos Lagunas</b>");
		
	
    </script>
</body>