0

I would like to use OpenLayers to embed a map in a Jekyll layout. (The whole site is hosted on GitLab pages and built with a GitLab CI workflow.)

To this end, I created a file in _includes with a div to hold the map, and an inline script that creates a map and populates the layers.

In order for this to work, the resulting page also needs to link to the main OpenLayers JavaScript and CSS. For testing purposes, I have accomplished this by referencing a hosted build, like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>

However, OpenLayers does not recommend this for production use. The recommended way seems to be npm, which my setup does not use. Also, I would like to keep the number of additional dependencies low, and besides that, OpenLayers installed via npm seems to rely on directory layout which is incompatible with what Jekyll uses.

There doesn’t seem to be an installation method specifically for Jekyll (please correct me if I’m wrong!), so I figure my best bet would be to place everything I need in the directory tree as static content.

https://openlayers.org/download/ has two downloads for the release: package (which, as per its description, includes sources and the full build of the library) and site (which includes examples and documentation and is about ten times the size of package). Running a diff between the two packages tells me than en/latest/ol in site is identical to package, thus package is likely what I need.

So, presumably, I would copy the contents of package into a static dir in my Jekyll tree (referred to as OL_PATH hereinafter) and modify the references as follows:

<link rel="stylesheet" href="OL_PATH/ol.css" type="text/css">
<script src="OL_PATH/dist/ol.js"></script>

Question – do I need to deploy the entire contents of the zip file to my site, or just parts of it? If so, which? (How does this work with npm – will that deploy a complete version of OpenLayers, or just the parts which are actually being used?)

user149408
  • 5,385
  • 4
  • 33
  • 69

1 Answers1

1

Using jsDelivr should be the right way to do. Downloading the whole package and hosting the content yourself will yield functionally equivalent results compared to loading them from jsDelivr, but with the added responsibility of managing dependencies on your own.

OpenLayer recommend against using a 3rd-party CDN on production for partially this reason, as enterprise-level software may frown upon external dependencies. For most personal to small-mid business applications, reputable CDN like jsDelivr shouldn't cause reliability issues, and saves you a lot of hassle managing everything.

iBug
  • 35,554
  • 7
  • 89
  • 134