1

I'm using Helix Ultimate alongside Joomla 3.9.6 with Sourcerer installed and want to embed a leafletjs-Map.

According to leaflet's documentation, I need to load their CSS as well as their JavaScript, which I did via the "Custom Code" tab inside the Helix Ultimate settings (of course in the <head>-section).

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

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

As you shall specify at least the map height, I did this in the <head> aswell by using <style> #map{ height: 100% }</style>

You then call a <div id="map"></div> inside the body and use a script to specify the map elements.

A simplified plain html (which combines all of the above and will create a simple map like in this example) looks like this - and works:

<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
<style> #map{ height: 100% }</style>
</head>

<body>

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

<script> 
    var map = L.map('map').setView([42.35, -71.08], 13); 
    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', maxZoom: 17, minZoom: 9 }).addTo(map); 
</script> 
</body>     

But how can I achieve this inside Joomla (which will just show nothing - while the elements seem to be in the right place if I take a look at the page's source code in my browser)?

  • As a whinge, I don't like the mix of https and http in the scripts. Are you getting any client-side errors? Are we able to visit your webpage? – mickmackusa Jun 15 at 5:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.