Leaflet sur symfony2 et Twig

**adequat.bi** · 11/06/2014, 17h30

Bonjour,

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 :

{% 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 :
{% 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 !

**adequat.bi** · 14/06/2014, 13h52

Avec le ivory googlemap bundle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 new Ivory\GoogleMapBundle\IvoryGoogleMapBundle(),

Il suffit de mettre ce code dans index.html.twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 {% block map %}

   
          {{ google_map_css(map) }}
          {{ google_map_container(map) }}
          {{ google_map_js(map) }}       
    
     </script>
    <div id="map_canvas" class="map" style="height:250px" >   
   </div>
    
     {% endblock %}

et dans base.html.twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
{% block javascripts %}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">			</script>

De remplir les variables dans le controlleur ( je laisse les options en commentaires, je continue mes tests)

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php

namespace Luc\StatBundle\Controller;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Luc\StatBundle\Entity\Budget;
use Luc\StatBundle\Form\BudgetType;

use Ivory\GoogleMap\Map;
use Ivory\GoogleMap\MapTypeId;
use Ivory\GoogleMap\Controls\ControlPosition;
use Ivory\GoogleMap\Controls\PanControl;
use Ivory\GoogleMap\Overlays\Animation;
use Ivory\GoogleMap\Overlays\Marker;
use Ivory\GoogleMap\Controls\ZoomControl;
use Ivory\GoogleMap\Events\MouseEvent;
use Ivory\GoogleMap\Overlays\InfoWindow;

/**
 * Budget controller.
 *
 * @Route("/budget")
 */
class BudgetController extends Controller
{

    /**
     * Lists all Budget entities.
     *
     * @Route("/", name="budget")
     * @Method("GET")
     * @Template()
     */
    public function indexAction()
    {
        $em = $this->getDoctrine()->getManager();

        $entities = $em->getRepository('LucStatBundle:Budget')->findAll();   
        
       
        //
       $map = new Map();
       $map->setPrefixJavascriptVariable('map_');
        $map->setHtmlContainerId('map_canvas');
        //$map->setAsync(false);
        // Disable the auto zoom flag
        $map->setAutoZoom(false);
        // Sets the center
        $map->setCenter(13.363, 3.009, true);
        // Sets the zoom
        $map->setMapOption('zoom', 8);  
        //Set the type  
        //$map->setMapOption('mapTypeId', 'roadmap');
        $map->setStylesheetOption('width', '800px');
        //$map->setStylesheetOption('height', '300px');
        $map->setLanguage('fr');
        
        
        // Markers
        $marker = new Marker();
        // Configure your marker options
        //$marker->setPrefixJavascriptVariable('marker_');
        $marker->setPosition(13.363, 3.1090, true);
        //$marker->setAnimation(Animation::DROP);
        //$marker->setAnimation('bounce');
        //$marker->setOption('clickable', false);
        //$marker->setOption('clickable', true);
        //$marker->setOption('flat', true);
        /*$marker->setOptions(array(
            'clickable' => false,
            'flat'      => true,
            ));
        */
        
        //ajouter une fenetre d'info sur le marker
            $infoWindow = new InfoWindow();
            $infoWindow->setPrefixJavascriptVariable('info_window_');
            $infoWindow->setPosition(0, 0, true);
            $infoWindow->setPixelOffset(1.1, 2.1, 'px', 'pt');
            $infoWindow->setContent('<p>Voici le contenu</p>');
            $infoWindow->setOpen(false);
            //$infoWindow->setAutoOpen(true);
            $infoWindow->setOpenEvent(MouseEvent::CLICK);
            $infoWindow->setAutoClose(true);
            $infoWindow->setOption('disableAutoPan', true);
            $infoWindow->setOption('zIndex', 10);
            /*$infoWindow->setOptions(array(
                'disableAutoPan' => true,
                'zIndex'         => 10,
                    ));
            */
            //$infoWindow->setOpenEvent('click');
            $infoWindow->setOpenEvent('mouseover');
            // Add your info window to the marker
            $marker->setInfoWindow($infoWindow);
        //
        // Add your marker to the map
        $map->addMarker($marker);
        /*
        //Add your pan control to the map  
        $panControl = new PanControl();
        $map->setPanControl($panControl);
        $map->setPanControl(ControlPosition::TOP_LEFT);
    //
    $zoomControl = new ZoomControl();
    $zoomControl->setControlPosition('top_right');
    $map->setZoomControl($zoomControl);
    */
    
        return array(
            'entities' => $entities,
            'map'=> $map,
        );
    }

Mais avec LEAFLETJS ????? Mystère .....

**darkdeath** · 10/08/2014, 04h58

merci pour votre réponse mais est ce que tu peut nous donner la configuration et le codage que tu as fait dans(config.yml ,le controleur et le twig ) par ce que je vois que la documentation de Bundle n'est pas clair et merci

**adequat.bi** · 10/08/2014, 11h24

Reçus sur l'autre fil de question.
Bonne journée.

youpiz vient de répondre à une discussion à laquelle vous êtes abonné :
Forum : Symfony2 (sur Forum du club des développeurs et IT Pro)
Intitulé de la discussion : Leaflet sur symfony et Twig

Vous pouvez consulter le nouveau message en suivant ce lien :
http://www.developpez.net/forums/d14...-symfony-twig/

**darkdeath** · 25/08/2014, 12h44

@adequat.bi

Salut une autre fois , est ce qur tu peux me dire comment vous rechargé votre map celle d'ivory google map

et merci

**darkdeath** · 25/08/2014, 15h14

dsl mon question n'est pas assez clair

s'il vous plait j'aime bien savoir comment vous pouvez rechargé au même page la carte après que vous ajouter quelques markers au map

Leaflet sur symfony2 et Twig

SIG : Système d'information Géographique

Discussions similaires

Partager

Partager