I'm creating a web application with Leaflet and add file load feature like the image below. However, it didn't work and didn't show the icon either. enter image description here

     <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <title>Web Application</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.67.0/dist/L.Control.Locate.min.css">
    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.67.0/dist/L.Control.Locate.min.js"></script>        
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://unpkg.com/togeojson@0.14.2"></script>
    <script src="../src/leaflet.filelayer.js"></script>
        #header {
            height: 75px;
            background-color: darkgoldenrod;
        #mapdiv {
            height: 650px;
        #side_panel {
            height: 650px;
        #footer {
            background-color: darkgrey;
    <div id="header">
        <h1 class="text-center">Web Application</h1>
    <div class="row">
    <div id="side_panel" class="col-md-2 col-sm-2 col-xs-2">
    <div class="panel panel-default" style="margin:8px;border-color:blue;">
        <div class="panel-body">
                    <th>Cursor latitude:</th>
                    <td id="current_latitude">---</td>
                <tr class="space-top">
                    <th>Cursor longitude:</th>
                    <td id="current_longitude">---</td>
                <tr class="space-top">
                        <th>Zoom Level:</th>
                        <td id="zoom_level">---</td>
    <div id="mapdiv" class="col-md-10 col-sm-10 col-xs-"></div>
    <div id="footer" class="col-md-12">
        <h4 class="text-center">&copy;2019</h4>

        var cities = L.tileLayer.wms('http://localhost:8080/geoserver/cite/wms', {
            layers: 'cite:FarmersMarkets',
            format: 'image/png',
            transparent: true

        var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
        thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';

        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; ' + osmLink + ' Contributors',
        landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
        thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;

        var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
        landMap = L.tileLayer(landUrl, {attribution: thunAttrib});

        var mbAttr = '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>',
            mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

        var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
            streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

        var mymap = L.map('mapdiv', {
            layers: [streets],

        var baseLayers = {
            "Grayscale": grayscale,
            "Streets": streets,
            "OSM Mapnik": osmMap,
            "Landscape": landMap,

        var overlays = {
            "Cities": cities

        L.control.layers(baseLayers, overlays).addTo(mymap);

        var lc = L.control.locate({
            position: 'topleft',
            setView: 'always',

        mymap.locate({setView: true});

        L.Control.FileLayerLoad.LABEL = '<img class="icon" src="../docs/folder.svg" alt="file icon"/>';
     control = L.Control.fileLayerLoad({
        fitBounds: true,
        layerOptions: {
            style: style,
            pointToLayer: function (data, latlng) {
                return L.circleMarker(
                    { style: style }
    control.loader.on('data:loaded', function (e) {
        var layer = e.layer;

        mymap.on('mousemove', function(e){
            var str = +e.latlng.lat.toFixed(5);

        mymap.on('mousemove', function(e){
            var str = e.latlng.lng.toFixed(5);

        mymap.on('mousemove', function(e){
            var str = mymap.getZoom();


  • and whats the problem? – ziggy Jul 22 at 23:43
  • it did not work at all.. I'm so new and wonder if anyone can help me out with this – ake Jul 22 at 23:52
  • Any errors in debug console? Anything not loading in debug network? – TomazicM Jul 23 at 5:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.