CODEWITHSUNDEEP
javascriptgithubleafletgithub-pages
C. Bally
C. Bally

Reputation: 31

Leaflet with GitHub Pages - not rendering

I have a simple webpage into which I have embedded a basic leaflet map. When I try to publish this via my GitHub Pages website, the leaflet map won't render (everything else is fine).

GitHub Pages spec says it supports JS and this shouldn't be a problem as it's an API. I have tried to use a downloaded version of leaflet (.css and .js files uploaded to my gh-pages repository), but still nothing.

Anyone have any ideas why this isn't working? Is this what GitHub Pages means when it says that it will host "static" webpages (no APIs, no JS interactivity)?

Upvotes: 3

Views: 1877

Answers (1)

ghybs
ghybs

Reputation: 53185

EDIT

Leaflet now officially recommends unpkg CDN which does support https:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

or

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Original answer

There is a chance you are just facing a "mixed content" issue (resources from HTTP protocol trying to be loaded on a page accessed through secure HTTPS protocol).

Please note that GitHub pages for recent sites now enforce HTTPS protocol:

HTTPS enforcement is required for GitHub Pages sites created after June 15, 2016 and using a github.io domain.

This means that even if you manually type http://my-site.github.io, you will be automatically redirected to https://my-site.github.io.

The official Leaflet CDN does not support HTTPS protocol as of today unfortunately.

However, you can use alternative CDN's that do support HTTPS, e.g. cdnjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>

But it is strange it still does not work when you try to use local (downloaded) scripts?

Note:

GitHub Pages serving only "static" webpages means that they cannot be dynamically generated server-side, e.g. through PHP. However you are free to use client-side code (JavaScript). E.g., Leaflet official website is actually hosted on GitHub.

Upvotes: 4

Related Questions