Adding a Leaflet map

Has anyone had any experience/success incorporating a Leaflet map?

As it's JavaScript, it should be no problem to just add.

You can even use the Assets plugin to allow you to add leaflet.js files and JS initialization right on the page.

Or of course you can create a custom leaflet.html.twig rendering file in your theme with everything it needs.

Or you could create a simple plugin so that anyone could easily add a leaflet map to their page.

So many options!

Amazing! Thanks for pointing me to the multitude of possibilities. Exploring them now...

I'm struggling a bit in testing out the Assets Plugin. I found the below example here but it appears to be showing up blank. I will keep experimenting.

{assets:css order:5}
http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
{/assets}

{assets:js order:5}
http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
{/assets}

{assets:inline_css}
div#map {height: 180px;}
{/assets}

{assets:inline_js}
$(document).ready(function() {
    var map = L.map('map').setView([51.505, -0.09], 13);
    var marker = L.marker([51.5, -0.09]).addTo(map);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'OpenStreetMap' 
    }).addTo(map);
});
{/assets}

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

That should work.. is nothing showing up in your source?

Interesting. In my source I only have:

<script>
$(document).ready(function() {
</script>

But in the working example from the GRΛV that I noted above, I can see this in the source:

<script>
$(document).ready(function() {
var map = L.map('map').setView([51.505, -0.09], 13);
var marker = L.marker([51.5, -0.09]).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap'
}).addTo(map);
});
$(document).ready(function() {
                    $('pre code').each(function(i, block) {
                        hljs.highlightBlock(block);
                    }); 
                 });
</script>

I must be doing something wrong. I'm new to all this. My page path is /user/pages/leaflet_test/default.md. My /config/plugins/assets.yaml is set to enabled. Also, admin plugin says I'm 100% updated, at 9.4.0. I wonder, too, why in the working example I don't see a map. I will keep experimenting...

I believe it was my syntax error in the inline_js assets section, as it worked once I adjusted it to this:

{assets:inline_js}
$(document).ready(function() {var map = L.map('map').setView([39.759415, -84.193975], 15); var marker = L.marker([39.75957, -84.19790]).addTo(map); L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'}).addTo(map);});{/assets}

Note: I adjusted the tileLayer and setView.

I had the same problem: only the first line of my inline scripts and CSS was rendered.
So I made some changes in the file user/plugins/assets/assets.php

• line 102: $this->grav['assets']->addInlineCss($data[0]);
  becomes: $this->grav['assets']->addInlineCss($matches[3][$x]);
• line 104: $this->grav['assets']->addInlineJs($data[0]);
  becomes: $this->grav['assets']->addInlineJs($matches[3][$x]);

@beneva can you submit those changes as PR request on the assets plugin? https://github.com/getgrav/grav-plugin-assets

Just done!

thanks, and merged!