Can't load leaflet maps in Wordpress

Daniel Leandro 0
Viewed 24

I've load the the style and the js in my function.php (you can see it in the last of each group)

function recursos_ah6studio(){
    wp_enqueue_style('bootstrap', get_theme_file_uri('/css/bootstrap.min.css'));
    wp_enqueue_style('slick', get_theme_file_uri('/slick/slick.css'));
    wp_enqueue_style('slick-theme', get_theme_file_uri('/slick/slick-theme.css'));
    wp_enqueue_style('magnific-popup', get_theme_file_uri('/magnific-popup/magnific-popup.css'));
    wp_enqueue_style('font-awesome', get_theme_file_uri('/fontawesome-5.5/css/all.min.css'));
    wp_enqueue_style('estilo_ah6studio', get_stylesheet_uri());
    wp_enqueue_style('leaflet_style', 'https://unpkg.com/leaflet@1.8.0/dist/leaflet.css'); //here!

    wp_enqueue_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', NULL, '1.0', true);
    wp_enqueue_script('chartdatalabel', 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js', NULL, '1.0', true);
    wp_enqueue_script('jquery', get_theme_file_uri('/js/jquery-3.5.1.min.js'), NULL, '1.0', true);
    wp_enqueue_script('popper', get_theme_file_uri('/js/popper.min.js'), NULL, '1.0', true);
    wp_enqueue_script('boostrap', get_theme_file_uri('/js/bootstrap.min.js'), NULL, '1.0', true);
    wp_enqueue_script('slickJS', get_theme_file_uri('/slick/slick.min.js'), NULL, '1.0', true);
    wp_enqueue_script('magnific-popup', get_theme_file_uri('/magnific-popup/jquery.magnific-popup.min.js'), NULL, '1.0', true);
    wp_enqueue_script('easingJS', get_theme_file_uri('/js/easing.min.js'), NULL, '1.0', true);
    wp_enqueue_script('singlePageJS', get_theme_file_uri('/js/jquery.singlePageNav.min.js'), NULL, '1.0', true); 
    wp_enqueue_script('tool-tip', get_theme_file_uri('/js/tooltip.js'), NULL, '1.0', true);
    wp_enqueue_script('leaflet_js','https://unpkg.com/leaflet@1.8.0/dist/leaflet.js', NULL, '1.0', true); // and here

} 
add_action('wp_enqueue_scripts', 'recursos_ah6studio');

And put the code in my index.php I've even put some js that the official quick start of Leaflet tells you to start with

<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>

But it does not load the map. Am I doing something wrong?

My footer.php looks like this (someone ask for it):

<div class="container">
<div class="tm-gallery-container">
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8 footer_text"><p>Copyright © 2021  |  Todos los derechos reservados | By DALF</p></div>
        <div class="col-lg-2"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4 social_icon">
                    <a href="https://www.facebook.com/ah6studio">
                        <img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
                    <a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
                        <img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
                    <a href="https://www.instagram.com/ah6studio/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
                    <a href="https://www.linkedin.com/company/77211866/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>


        </div>
        <div class="col-lg-4"></div>
    </div>
</div>
</div>
<?php wp_footer(); ?>

 </body>

 
 </html>
leaflet wordpress php javascript
1 Answers

In WordPress, you don't add any code to index.php. The comment at the top of the page starts with "This file doesn't do anything..."

To make modifications, you add code to the theme's functions.php or any one of the template files. For illustration I'll use the footer.php template file that you have provided. I've not tested the code, but this should display the map in the Footer of the page:

<div class="container">
<div class="row">
        <div class="col-lg-10">
            <div id="map"></div>
            <script>
                var map = L.map('map').setView([51.505, -0.09], 13);
            </script>
        </div>
</div>
<div class="tm-gallery-container">
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8 footer_text"><p>Copyright © 2021  |  Todos los derechos reservados | By DALF</p></div>
        <div class="col-lg-2"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4 social_icon">
                    <a href="https://www.facebook.com/ah6studio">
                        <img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
                    <a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
                        <img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
                    <a href="https://www.instagram.com/ah6studio/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
                    <a href="https://www.linkedin.com/company/77211866/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>


        </div>
        <div class="col-lg-4"></div>
    </div>
</div>
</div>
<?php wp_footer(); ?>

 </body>

 
 </html>
KalenGi0
Related