diff --git a/index.html b/index.html index 069fbef835..abb095567b 100644 --- a/index.html +++ b/index.html @@ -61,13 +61,22 @@ // Load the KML file omnivore.kml(proxyKmlUrl).addTo(map); - // Optionally, handle any errors - omnivore.kml(proxyKmlUrl).on('ready', function() { - console.log('KML loaded successfully'); - }).on('error', function() { - alert('Failed to load KML'); - }); +// Load the KML file and customize the marker icon + var kmlLayer = omnivore.kml(proxyKmlUrl, null, L.geoJSON(null, { + pointToLayer: function (feature, latlng) { + return L.marker(latlng, { + icon: L.icon({ + iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x-red.png', + iconSize: [25, 41], // size of the icon + iconAnchor: [12, 41], // point of the icon which will correspond to marker's location + popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor + shadowSize: [41, 41] // size of the shadow + }) + }); + } + })).addTo(map); + // GPX URL - Change 'croton.gpx' to the filename of your GPX file var gpxUrl = 'croton.gpx';