Forum : Intégration Leaflet Twig

Bonjour,

J'essai de faire une intégration Leaflet JS dans mon code TWIG de symfony mais je n'y arrive pas.
J'ai un fichier base.html.twig et mon fichier map.html.twig qui étend mon fichier base.html.twig quand je procéde comme ça ma map ne s'affiche pas.
J'ai essayé de créer un fichier à part en reprenant tous le code de base.html.twig et en intégrant ma map et tout fonctionne. Je ne sais pas pourquoi lorsque j'utilise les mécanismes de twig ma map ne s'affiche pas.

Mes fichiers

base.html.twig

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>
        {% block title %}
            {{ title | trans }}
        {% endblock %}
    </title>

    {% block icon %}...{% endblock %}        

    {{ encore_entry_link_tags('app') }}
    {% block stylesheets %}{% endblock %}
</head>

<body>
    {% block navbar %}... {% endblock %}
    {% block body %}...{% endblock %}
    {% block footer %}...{% endblock %}

    {{ encore_entry_script_tags('app') }}
    {% block javascripts %}{% endblock %}
</body>
</html>

base.html.twig

{% extends 'base.html.twig' %}

{% set title = 'Map' %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
{% endblock %}

{% block body %}
{{ parent() }}
<div class="container">
<div id="mapid" class="w-100 h-50"></div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script type="text/javascript">
function init(){
var mymap = L.map('mapid').setView([51.505, 45.78], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'MON_TOKEN_MAPBOX'
}).addTo(mymap);
}
window.onload = init();
</script>
{% endblock %}



### Ce que je veux

Le résultat de mon fichier à part (qui n'étend pas `base.html.twig` et qui n'utilise pas les mécanismes TWIG).

[Map](https://zupimages.net/viewer.php?id=20/10/npw9.png)

### Ce que j'obtiens

Le résultat de mon `map.html.twig` (qui étend `base.html.twig` et qui utilise les mécanismes TWIG).

[Map](https://zupimages.net/viewer.php?id=20/10/cjhb.png)

Intégration Leaflet Twig

Mes fichiers

1 réponse