Leaflet Draw spritesheet icon issue - Missing and then not aligned

问题

I have incorporated leaflet draw in one of my projects. My issue is that the icons were not displaying in the tool bar. It looked like this:

Looking around I found THIS post and did as it stated. I located the spritesheet in the Leaflet Draw folder and linked to it like htis:

    .leaflet-draw-toolbar a {
            background-image: url('E:/MappingProject/Leaflet.Draw/src/images/spritesheet.png');
            background-repeat: no-repeat;
        }

I ended up with this:

I can't seem to find any other solutions to get this spritesheet to line up in the boxes. It looks like instead of pulling individual icons, it's putting the entire sheet in each button.

Here is my code to instantiate the L.FeatureGroup() and L.Control.Draw():

    function logIn(){
        map = L.map('map').setView([51.505, -0.09], 13);
        OpenStreetMap_HOT.addTo(map);
        $("#logInScreen").css('display', 'none');
        addSideBars();
        addDrawToMap();
    }        

/////////////////////////////////////////////
        //DRAW FUNCTIONALITY
///////////////////////////////////////////
        function addDrawToMap(){
            map.addControl(drawControl);
            map.addLayer(drawnItems);
        }
        var drawnItems = new L.FeatureGroup();
            var drawControl = new L.Control.Draw({
                position: 'topright',
                draw: {
                    polyline: true,
                    polygon: true,
                    circle: true,
                    marker: true
                },
                edit: {
                    featureGroup: drawnItems,
                    remove: true
                }
            });

Any one have experience with this?

回答1:

Most probably you miss the Leaflet-draw CSS file.

It is in that file that the CSS rules like .leaflet-draw-toolbar a are defined.

Example without this file, but with your CSS rule:

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
  position: 'topright'
});
map.addControl(drawControl);

.leaflet-draw-toolbar a {
  background-image: url('https://unpkg.com/leaflet-draw@1.0.2/dist/images/spritesheet.png');
  background-repeat: no-repeat;
  color: transparent !important;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.js"></script>

<div id="map" style="height: 200px"></div>

Example with this file:

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
  position: 'topright'
});
map.addControl(drawControl);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.css" />
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.js"></script>

<div id="map" style="height: 200px"></div>

来源：https://stackoverflow.com/questions/48572987/leaflet-draw-spritesheet-icon-issue-missing-and-then-not-aligned

标签

css

icons

leaflet

toolbar

draw