Change icon size while user zooms in/out of a map?

General talk
1

Hello,

I’m using the code below to display a live map with Leaflet, and load waypoints from a GPX file using Leaflet-gpx.

Problem is, the icon is a simple PNG, which means that it isn’t resized while the user zooms in and out, so the map is unreadable when zooming out.

Is there a way for an icon to be resized automagically?

Thank you.


<html>
  <head>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
		integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
		crossorigin=""/>
		
		<style>#mapid { height: 720px; }</style>
	</head>

  <body>
		<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
		integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
		crossorigin=""></script>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>

	  <div id="mapid"></div>
    
    <script>
	    var mymap = L.map('mapid').setView([48.8591, 2.3470], 11);
			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
			    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
			    maxZoom: 18,
			    id: 'mapbox.streets',
			    accessToken: 'pk.eyJ1mytoken'
			}).addTo(mymap);			

			var gpx = 'http://192.168.0.12:8080/mywaypoints.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(mymap);
			
    </script>
  
  
  </body>
</html>