How to use LeafletJS Map in a Symfony Project?

I’m new to Symfony and I’m trying to build a simple game based on maps.
I started with the homepage 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 independently 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>


Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

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