How to add Map with LeafletJS to a Symfony App

I’m new to Symfony and i’m trying to build a simple game based on maps, so i started by the home page with should show an adress input field and below a map therefore i have created home.html.twig file in the templates/app folder and added this code that should work (i tested it indepandantly when i wasn’t working with symfony) but it doesn’t show the map! the console log shows me this error:

Map.js:1103 Uncaught Error: Map container not found.
at i._initContainer (Map.js:1103)
at initialize (Map.js:136)
at new i (Class.js:22)
at (Map.js:1728)
at (index):14

here’s the code of my home.html.twig :

        <meta charset="utf-8">
        {% block stylesheets %} <link rel="stylesheet" href="[email protected]/dist/leaflet.css"
        crossorigin=""/>{% endblock %}
         {% block javascripts %}
            <script src="[email protected]/dist/leaflet.js"
            <script type="text/javascript">
            var adresse=document.getElementById("adresse");
            var centerview=[46.71109,1.7191036];
            var mymap ='carte1').setView([centerview[0], centerview[1]], 6);
            L.tileLayer('https://{s}{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="">OpenStreetMap</a> contributors'
            var layerGroup = L.layerGroup().addTo(mymap);
                var query=""+adresse.value;
                fetch(query,{method: 'get'})
                    r.features.forEach(element => {
                        var coords=element.geometry.coordinates;

        {% endblock %}
        <form id="fff" action="#">
            <input type="text" placeholder="Entrez une adresse" id="adresse"/>

        <div id="carte1" style="height: 300px;">
        <div id="coords" style="position: absolute; z-index: 3; top: auto; left: auto;"></div>


Thank you!

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *