CODEWITHSUNDEEP
javascriptleaflet
Aliaksei.Statkevich
Aliaksei.Statkevich

Reputation: 11

The leaflet is not displayed

I am new to JavaScript. The leaflet on the page doesn't display the map until I change the .leaflet-container property { overflow: ;}, you can see it in image2. How can I fix this? Thank you! CSS

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"  />
<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }

HTML

<div id="map"></div>

JS

</body>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script>
        var map = L.map.invalidateSize();
        L.tileLayer(
            'https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key=ekfefkerdkdfk2', 
            {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'}
        ).addTo(map);
    </script>

image2 image1

Upvotes: 1

Views: 57

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Replace var map = L.map.invalidateSize(); with

var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

If it still not work check if you overwrite div in some of your CSS classes. Else create a sample on https://leafletjs.com/edit

Upvotes: 1

Related Questions