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.
base.html.twig
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 %}
J'ai trouvé ! Ma seule différence entre mes 2 fichiers était mon <!DOCTYPE html> dans mon fichier base.html.twig ....