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).
Ce que j'obtiens
Le résultat de mon map.html.twig (qui étend base.html.twig et qui utilise les mécanismes TWIG).