title: Trying to make a custom marker show up on my exact location when I allow tracking of my location
body: <p>I want to use the pic <code>userPosition.png</code> on my location when I accept the prompt of asking for location, right now it doesn't work.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""
      /&gt;
      &lt;script
        src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""
      &gt;&lt;/script&gt;
      &lt;script src="./leaflet/leaflet.js"&gt;&lt;/script&gt;
      &lt;style&gt;&lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h2 style="text-align: center;"&gt;My interactive map&lt;/h2&gt;
  
      &lt;div id="mapid" style="width: 100%;height: 500px;"&gt;&lt;/div&gt;
  
      &lt;script&gt;
        var mymap;
        mymap = L.map("mapid").setView([55.70584, 13.19021], 12);
  
        L.tileLayer(
          "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFkc2pvaGFuc2VuIiwiYSI6ImNrNWkxZnA3bzA5NnIza3M2cGczNnprMHcifQ.Z2h9R1lODB6zPZ2Ex92BrA",
          {
            attribution:
              'Map data &amp;copy; &lt;a href="https://www.openstreetmap.org/"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="https://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="https://www.mapbox.com/"&gt;Mapbox&lt;/a&gt;',
            maxZoom: 18,
            id: "mapbox/streets-v11",
            accessToken: "your.mapbox.access.token"
          }
        ).addTo(mymap);
  
        function onLocationFound(e) {
          var radius = e.accuracy / 2;
  
          L.marker(e.latlng)
            .addTo(map)
            .bindPopup("You are within " + radius + " meters from this point")
            .openPopup();
        }
  
        function onLocationError(e) {
          alert(e.message);
        }
  
        map.on("locationfound", onLocationFound);
        map.on("locationerror", onLocationError);
  
        map.locate({
          setView: true,
          maxZoom: 16
        });
  
        var popup = L.popup();
        var marker = L.marker();
        var circle = L.circle();
  
        var newMarkerIcon = L.Icon.extend({
          options: {
            iconSize: [38, 95],
            shadowSize: [50, 64],
            iconAnchor: [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor: [-3, -76]
          }
        });
  
        var blackMarker = new newMarkerIcon({ iconUrl: "userPosition.png" });
  
        function onMapClick(e) {
          L.marker(e.latlng, "Insert postition PNG pic here")
            .addTo(mymap)
            .bindPopup("You clicked the map at " + e.latlng.toString());
        }
  
        mymap.on("click", onMapClick);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>