markdumay
commented
1 year ago I'm a bit hesitant to add the library to the repository by default. However, you could add the dependency to your own project in a few steps. Let me know if this works for you. I published a demo repository to GitHub for your convenience.
Install Leaflet as development dependency
Run the following command from within your project folder to add Leaflet as a development dependency.
npm i -D leafletMount the library to the assets folder
Ensure the leaflet.js file is included in the project's JavaScript bundle by adding a mount to config/_default/config.toml.
[[module.mounts]]
source = "node_modules/leaflet/dist"
target = "assets/js/vendor/leaflet"
includeFiles = "leaflet.js"Import the css file
Similarly to the JavaScript bundle, add the following statement to assets/scss/app.scss to include the Leaflet's CSS file in your main style. Please note that the file extension .css is omitted.
// Import Leaflet
@import "leaflet/dist/leaflet";Adjust the Content Security Policy
Leaflet requires access to OpenStreetMap. Adjust the Content Security Policy in config/_default/server.toml to enable the image access. You might need to adjust the settings of your hosting provider too (see netlify.toml in the repository root).
img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://tile.openstreetmap.org; \Add the image map placeholder
Add an map placeholder to your (Markdown) content file. The following placeholder uses a 16x9 ratio and stretches across the main body.
<div id="map" class="ratio ratio-16x9 w-100"></div>Initialize the map
Finally, initialize the map placeholder with the OpenStreetMap content. The following example uses London. The mapID refers to the ID of the placeholder. The code tests if an element with the map ID is present and initializes the placeholder accordingly. You can place the code in assets/js/leaflet.js, where Hinode will pick it up automatically.
const mapID = 'map'
if (document.getElementById(mapID) !== null) {
const map = L.map(mapID).setView([51.505, -0.09], 13)
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map)
}Test the map
From here on you should have a working map on your site. Run the following command to start a local development server.
npm run startYou can now modify the placeholder and map initialization as needed.
rimatech987
Is your feature request related to a problem? Please describe. N/A
Describe the solution you'd like Add Leaflet library inside the project to create marvelous interactive maps for your blog.
Describe alternatives you've considered N/A
Additional context Reference: https://leafletjs.com/download.html