发表新帖
发表新帖

leaflet map shows up grey

后端 未结
关注
6 671
渐次进展
渐次进展 2020-12-10 10:45

I\'m starting leaflet.js with the quickstart but my map shows as grey... is there something I\'m missing?

script.js:

var leafletMap = L.map(\'leaflet
相关标签:
6条回答
  • 醉话见心
    2020-12-10 11:03

    Another thing to watch.

    If you check the network tab and the map tiles are loading ok, yet the map still remains grey, it can be due to CSS contamination from your surrounding page.

    In my case it was: 

    img {
    max-height: 100%;
}

    Fixed by overriding with: 

    .my-leaflet-map-container img {
    max-height: none;
}
    0 讨论(0)
  • 慢半拍i
    2020-12-10 11:04

    Did you set a value for API_KEY in your code?

    When I first ran the quickstart I was also confused why my map was grey, but I just realised I'd forgotten to retrieve an API access code (in my case, it was for Mapbox's service.)

    Your URL line references API_KEY but you don't seem to be declaring it.

    0 讨论(0)
  • 太阳男子
    2020-12-10 11:11

    The notes by elMarquis are useful if you've a problem when embedding inside something else. In my case I was using Gravity Forms on Wordpress, and they have image styles that have a wide scope, and are also set to important.

    I'm still chasing the ultimate fix, but this should get you started if you have discovered the same issue:

    <style>
    #map { position: inherit; top:0; bottom:0; right:0; left:0; width:100%; height:300px;}
    .gform_wrapper ul li.gfield.gfield_html .leaflet-container img { max-width: none!important;}
  </style>
    0 讨论(0)
  • 你的背包
    2020-12-10 11:15

    You need to implement the next section of the Quick Start Guide: you've initialized the map, but haven't added any tile layers to it, hence gray. So read on to the section beginning with Next we’ll add a tile layer to add to our map.

    0 讨论(0)
  • 忘了有多久
    2020-12-10 11:19

    For my ionic app this was resolved by setting trackResize: false in my map configuration. This was only happening on Android and called by a setTransform function in the Leaflet source code that's only called on Android.

    Leaflet.map('map', { trackResize: false })

    0 讨论(0)
  • 日久生厌
    2020-12-10 11:22

    You must style your map-container to have a nonzero height. In my case I linked to my CSS file too late; at the bottom of my <body> tag.

    So my map container; <div id="map"></div>, probably had a height of 0px at the time it loaded.

    This means the map and its tiles tried to load into 0px height. I suspect this produces a small tile "buffer"; everything outside the buffer zone was grey.

    To fix it, I referenced my CSS file in the <head>. Referencing the CSS file in <head> does both:

    • a good practice
    • allows the styles to apply before the map tried to load

    UPDATE

    Don't forget to link the Leaflet CSS file (if you haven't already). Otherwise your tiles may appear "mismatched"/staggered.

    <link rel="stylesheet" 
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>

    Another solution is to modify the style attribute of your map-container directly in HTML (i.e. CSS inline in HTML). I personally prefer my CSS to exist in a separate CSS file.

    0 讨论(0)
 看不清?
提交回复
热议问题