IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Leaflet sur symfony et Twig


Sujet :

Symfony PHP

  1. #1
    Membre du Club
    Homme Profil pro
    Conseil en assistance à maîtrise d'ouvrage
    Inscrit en
    Juin 2014
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Conseil en assistance à maîtrise d'ouvrage
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Juin 2014
    Messages : 7
    Par défaut Leaflet sur symfony et Twig
    Bonjour,
    Je pose ici ma question http://stackoverflow.com/questions/2...n-symfony-twig et postée aussi sur le forum SIG (http://www.developpez.net/forums/d14...-symfony2-twig )
    Mais c'est plus une question d'intégration d'un script dans symfony qu'une question de SIG.


    J'ai une application symfony 2 avec des données géoréférencées, lat + lon et je voudrais en avoir une cartographie.
    Pour simplifier, on peut commencer avec la base, l'exemple de http://leafletjs.com/examples/quick-start.html

    dans base.html.twig j'ai :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" /> 
            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
     
    {% endblock %}
    {% block javascripts %}
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">			</script>
            <script type="text/javascript" src="{{ asset('js/bootstrap.js') }}">			</script>
            <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
     {% endblock %}
    dans la vue index.html.twig j'ai :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     {% block map %}
     
        <div id="map_canvas" class="map" style="height:250px" >
        <script type="text/javascript">
        //carte centrée au sud Niger
       var map = L.map('map_canvas').setView([13.3, 3.05], 7);
       var marker{0} = L.marker([{13.5}, {3.5}]).addTo(map);
           marker{0}.bindPopup("texte");
       </script>
        </div>
    Je remplirai des variables dans le controleur, plus tard.


    Et ... rien ... nada ...

    qu'est-ce qui peut me manquer ?????

    D'avance merci !

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    168
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 168
    Par défaut
    dans base.html.twig t'as un {% block map %} ?

  3. #3
    Membre du Club
    Homme Profil pro
    Conseil en assistance à maîtrise d'ouvrage
    Inscrit en
    Juin 2014
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Conseil en assistance à maîtrise d'ouvrage
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Juin 2014
    Messages : 7
    Par défaut
    Oui, dans base.html.twig, j'ai

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div class="row">           
            {% block map %}         
            {% endblock %}
    </div>
    Ce code est inclus dans le body , et se trouve juste en dessous d'une table.

    Quand, dans la vue index.html.twig, je mets un texte pour tester, j'ai bien le texte au bon endroit. D'ailleurs si je change la hauteur de l'élement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="map_canvas" class="map" style="height:250px" >
    j'ai bien une modification de la disposition des eléments à l'écran.

    Le code source de la page (code source envoyé au navigateur) est :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
                <div class="row">          
        <div id="map_canvas" class="map" style="height:250px" >
        <script type="text/javascript">
        //carte centrée au sud Niger
       var map = L.map('map_canvas').setView([13.3, 3.05], 7);
       var marker{0} = L.marker([{13.5}, {3.5}]).addTo(map);
           marker{0}.bindPopup("texte");
       </script>
     
     
        </div>
     
                 </div>

  4. #4
    Membre à l'essai
    Homme Profil pro
    Ingénieur commercial
    Inscrit en
    Mai 2008
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur commercial

    Informations forums :
    Inscription : Mai 2008
    Messages : 6
    Par défaut
    je me suis documenté sur le sujet et dans la doc il est dit que le container 'map' doit etre placé apres l'import des js, c'est peut etre ça.

  5. #5
    Membre du Club
    Homme Profil pro
    Conseil en assistance à maîtrise d'ouvrage
    Inscrit en
    Juin 2014
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Conseil en assistance à maîtrise d'ouvrage
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Juin 2014
    Messages : 7
    Par défaut merci
    Merci pour la réponse, je vais essayer à l'occasion. Entre temps, j'ai réglé la question avec le googlemapsbundle ...

  6. #6
    Nouveau candidat au Club
    Femme Profil pro
    Administrateur de base de données
    Inscrit en
    Août 2014
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Août 2014
    Messages : 2
    Par défaut
    Bonjour,

    J'utilise aussi leaflet dans Symfony 2.
    Je souhaite afficher une carte dans une page de formulaire.
    J'y suis arrivée sans trop de problème en mettant toutes les librairies utilisées ainsi que les fichiers javascript contenant le code Leaflet dans le répertoire web/Bundles/nomBundle/libs.
    Pour exemple, je les ai déclaré de cette manière dans le fichier new.html.twig (page de mon formulaire) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {% block stylesheets %}
      {{ parent() }}
      <link href="{{ asset('bundles/cenlrtest/css/jquery-ui.css') }}" rel=stylesheet" />
      <link type="text/css" rel="stylesheet" href="{{ asset('bundles/cenlrtest/libs/leaflet/leaflet.css') }}" />
      <link type="text/css" rel="stylesheet" href="{{ asset('bundles/cenlrtest/libs/draw/dist/leaflet.draw.css') }}" />
      {{ form_stylesheet(form) }}
    {% endblock %} 
     
    {% block javascripts %}
    	{{ parent() }}
            <script src="{{ asset('bundles/cenlrtest/js/jquery-ui.js') }}"></script>
            <script src="{{ asset('bundles/cenlrtest/js/jquery-ui.min.js') }}"></script>
            <script src="{{ asset('bundles/cenlrtest/js/external/jquery/jquery.js') }}"></script>
     
    	<script src="{{ asset('bundles/cenlrtest/libs/leaflet/leaflet-src.js') }}"></script>
    	<script src="{{ asset('bundles/cenlrtest/libs/leaflet/leaflet.js') }}"></script>
     
    	<script type="text/javascript" src="{{ asset('bundles/cenlrtest/carte.js') }}"></script> 
     
          {{ form_javascript(form) }}
       {% endblock %}
    Le code leaflet se trouve dans le fichier carte.js

    J'ai créé également un block map dans ce même fichier contenant seulement la balise div de ma carte.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    {% block map %}
    	<div id="map" style="width: 100%px; height: 400px; border: 1px solid #ccc"></div>
    {% endblock %}
    Pour que cela fonctionne bien, le block javascript se trouve dans le block body et avant le block map !

    Je pense qu'il s'agit d'un tout autre problème mais à tout hasard je demande...
    Lorsque je regarde le code source de ma page de formulaire, les fichiers javascripts sont déclarés deux fois (à l'endroit où je l'ai écris et à la fin du code).
    Avez-vous déjà eu cette situation ? Une idée pour solutionner ce problème bien que ma carte s'affiche bien ?

    En espérant que ça puisse aider certains ou m'avertir si ce n'est pas la bonne manière de procéder !

Discussions similaires

  1. Leaflet sur symfony2 et Twig
    Par adequat.bi dans le forum SIG : Système d'information Géographique
    Réponses: 5
    Dernier message: 25/08/2014, 14h14
  2. [1.x] Creer un filtre sur un module CRUD sur Symfony 1.1
    Par katie.gillot dans le forum Symfony
    Réponses: 1
    Dernier message: 28/10/2008, 17h00
  3. [1.x] Renseignements sur symfony
    Par Phelim dans le forum Symfony
    Réponses: 2
    Dernier message: 27/06/2008, 00h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo