L.Icon.Default.imagePath not set for images such as markers on OneMap home page

Chit-Chat Open-Source Community
#1

https://docs.onemap.sg/maps/index.html

image
image.png1920×990 504 KB

You can use the default leaflet images library and set it like this in your JS:

      <script>

        L.Icon.Default.imagePath = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images"; // missing setup


        var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
        var map = L.map('mapdiv').setView([center.x, center.y], 12);

        var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png', {
          detectRetina: true,
          maxZoom: 18,
          minZoom: 11
        });

        map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);

        basemap.addTo(map);

        function getLocation() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
          } 
        }

        function showPosition(position) {           
          marker = new L.Marker([position.coords.latitude, position.coords.longitude], {bounceOnAdd: false}).addTo(map);             
          var popup = L.popup()
          .setLatLng([position.coords.latitude, position.coords.longitude]) 
          .setContent('You are here!')
          .openOn(map);         
        }
      </script>
#2

Hi @jarrettyeo,

Thank you for your fix. Icon is needed when the navigator needs the current location and pin-point the location with Marker. Apparently, there’s come changes to the leaflet framework.

We will look into that since we package our own onemap-leaflet.js.