From 43d9fa011f97efab6cacca2193406cf24f37bc2a Mon Sep 17 00:00:00 2001
From: Ninassi Benjamin <benjamin.ninassi@inria.fr>
Date: Thu, 12 Jul 2018 17:46:52 +0200
Subject: [PATCH] ajout map sur les coordinations
---
.../views/Coordination/list.html.twig | 62 ++++++++++++++++++-
.../Resources/views/Structure/list.html.twig | 10 ++-
2 files changed, 63 insertions(+), 9 deletions(-)
diff --git a/src/ClassCodeBundle/Resources/views/Coordination/list.html.twig b/src/ClassCodeBundle/Resources/views/Coordination/list.html.twig
index 0dd773e..00dea4d 100644
--- a/src/ClassCodeBundle/Resources/views/Coordination/list.html.twig
+++ b/src/ClassCodeBundle/Resources/views/Coordination/list.html.twig
@@ -1,5 +1,10 @@
{% extends 'base.html.twig' %}
+{% block stylesheets %}
+ {{ parent() }}
+ <link rel="stylesheet" href="{{ asset('js/leaflet-1.3.1/leaflet.css') }}" />
+ <link rel="stylesheet" href="{{ asset('js/leaflet-1.3.1/plugins/leaflet.markercluster-1.3.0/dist/MarkerCluster.Default.css') }}" />
+{% endblock %}
{% block body_title %}
{{ 'coordinations.list' | trans }}
@@ -27,9 +32,12 @@
{% include '@ClassCode/Coordination/editCoordinationFormModal.html.twig' %}
</div>
{% endif %}
- <div id='coordination_list_div'>
- {% include '@ClassCode/Coordination/ajax_list.html.twig' %}
- </div>
+ <div class="col-sm-12">
+ <div id="coordinationsMap" style="height:400px;">
+ </div>
+ <div id='coordination_list_div'>
+ {% include '@ClassCode/Coordination/ajax_list.html.twig' %}
+ </div>
</div>
<div id="loader">
@@ -42,11 +50,59 @@
{% block javascripts %}
{{ parent() }}
+ <script type="text/javascript" src="{{ asset('js/leaflet-1.3.1/leaflet.js') }}"></script>
+ <script type="text/javascript" src="{{ asset('js/leaflet-1.3.1/plugins/leaflet.markercluster-1.3.0/dist/leaflet.markercluster.js') }}"></script>
<script>
$(document).ready(function() {
loadDataTable();
$('#loader').hide();
$('#classcodeadmin_content').show();
+ //map
+ var coordinationMap = L.map('coordinationsMap',{maxZoom: 18}).setView([46.52863469527167, 2.43896484375], 5),
+ markers = L.markerClusterGroup({
+ spiderfyOnMaxZoom: true,
+ showCoverageOnHover: false,
+ zoomToBoundsOnClick: true,
+ polygonOptions: {
+ fillColor: '#FFFFFF',
+ color: '#FFFFFF',
+ weight: 0.5,
+ opacity: 1,
+ fillOpacity: 0.5
+ }
+ }),
+ lat = "",
+ lon = "",
+ LeafIcon = L.Icon.extend({
+ options: {
+ iconSize: [38, 95],
+ shadowSize: [50, 64],
+ iconAnchor: [22, 94],
+ shadowAnchor: [4, 62],
+ popupAnchor: [-3, -76]
+ }
+ });
+
+ var markerDetail = "";
+ var lat;
+ var lon;
+ {% for coordination in coordinations %}
+ lat = "{{ coordination.getLatitude }}" ;
+ lon = "{{ coordination.getLongitude }}" ;
+ if((lat !="0")&&(lon != "0")){
+ markerDetail ="<p class='h4'><b>";
+ markerDetail += "{{ coordination.getName }}";
+ markerDetail += "</b></p>"+ "<p class='h5'><b> " + "{{ coordination.getWho }} " + "</b></p>";
+ markers.addLayer(L.marker(L.latLng(lat, lon)).bindPopup(markerDetail)
+ .openPopup());
+ coordinationMap.addLayer(markers);
+ }
+ {% endfor %}
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }).addTo(coordinationMap);
+
});
function loadDataTable(){
diff --git a/src/ClassCodeBundle/Resources/views/Structure/list.html.twig b/src/ClassCodeBundle/Resources/views/Structure/list.html.twig
index c05345c..60a3bfd 100644
--- a/src/ClassCodeBundle/Resources/views/Structure/list.html.twig
+++ b/src/ClassCodeBundle/Resources/views/Structure/list.html.twig
@@ -32,9 +32,9 @@
{% include '@ClassCode/Structure/editStructureFormModal.html.twig' %}
</div>
{% endif %}
- <div class="col-sm-12">
- <div id="structuresMap" style="height:250px;">
- </div>
+ <div class="col-sm-12">
+ <div id="structuresMap" style="height:400px;">
+ </div>
</div>
<div id='structure_list_div'>
{% include '@ClassCode/Structure/ajax_list.html.twig' %}
@@ -43,9 +43,7 @@
<div id="loader">
<img src="{{ commons_url }}/images/pictos/loading_40.gif" alt="{{ 'Loading'|trans }}" title="{{ 'Loading'|trans }}">
- </div>
-
-
+ </div>
{% endblock %}
--
GitLab