templates/location/list.html.twig line 1

Open in your IDE?
  1. {% extends 'content_base.html.twig' %}
  3. {% block title %}Show all Events{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  8.           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  9.           crossorigin=""/>
  10.     <link rel="stylesheet" href="{{ asset('css/map.css') }}">
  11.     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
  12.     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
  13.     <link rel="stylesheet" href="{{ asset('css/cluster.css') }}">
  14. {% endblock %}
  16. {% block content_body %}
  17.     <div class="container">
  18.         <div class="row">
  19.             <div class="col-sm-6 mt-2">
  20.                 <div class="article-text table-responsive">
  21.                     {{ knp_pagination_render(pagination) }}
  22.                     <table class="table hoverTable table-striped table-hover">
  23.                     <thead>
  24.                         <tr>
  25.                             <th scope="col" class="col-3 mx-3">{{knp_pagination_sortable(pagination, 'Type', 'l.type') }}</th>
  26.                             <th scope="col" class="col-6 mx-3">{{knp_pagination_sortable(pagination, 'Name', 'l.name') }}</th>
  27.                             <th scope="col" class="col-3 mx-3" style="min-width: 120px;">{{knp_pagination_sortable(pagination, 'Approved', 'l.approved') }}</th>
  28.                         </tr>
  29.                         <tr>
  30.                             <th colspan="3">
  31.                             <form>
  32.                                 <div class="input-group mb-3">
  33.                                     <input type="text"
  34.                                            name="q"
  35.                                            class="form-control"
  36.                                            placeholder="Search..."
  37.                                            value="{{ app.request.query.get('q') }}"
  38.                                     >
  39.                                     <div class="input-group-append">
  40.                                         <button type="submit"
  41.                                                 class="btn btn-outline-secondary">
  42.                                             <span class="fa fa-filter"></span>
  43.                                         </button>
  44.                                     </div>
  45.                                 </div>
  46.                             </form>
  47.                             </th>
  48.                         </tr>
  50.                     </thead>
  51.                     {% for location in pagination %}
  52.                         <tr>
  53.                             {% set location = location.update(app.user) %}
  54.                             <td>
  55.                                 <a href="{{path('location_show', {
  56.                                     id: location.id
  57.                                 })}}">
  58.                                     <img class="article-icon" src="{{ location.image | imagine_filter('squared_thumbnail_icon') }}">
  59.                                 </a>
  60.                             </td>
  61.                             <td>
  62.                                 {{ location.name}}
  63.                             </td>
  65.                             <td>
  66.                                 <a href="{{path('location_show', {
  67.                                     id: location.id
  68.                                 })
  69.                                 }}"><span class="fa fa-eye"></span>
  70.                                 </a>
  71.                                 {% if is_granted('ROLE_EDIT_ENTITY') %}
  72.                                 <a href="{{path('location_edit', {
  73.                                     id: location.id
  74.                                 })
  75.                                 }}"><span class="fa fa-pencil"></span>
  76.                                 </a>
  77.                                 {% endif %}
  78.                                 {# }% if is_granted('ROLE_ACCEPT_CHANGES') and not location.approved %}
  79.                                     <a href="{{path('location_edit', {
  80.                                         id: location.id
  81.                                     })
  82.                                     }}"><span class="fa fa-check-circle "></span>
  83.                                     </a>
  84.                                 {% endif %#}
  85.                             </td>
  86.                         </tr>
  87.                     {%  endfor %}
  88.                     </table>
  89.                 </div>
  90.             </div>
  91.             <div class="col-sm-6 mt-3">
  92.                 <div id="mapid"></div>
  93.             </div>
  94.         </div>
  95.     </div>
  97. {% endblock %}
  99. {% block javascripts %}
  100.     {{ parent() }}
  101.     <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  102.             integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  103.             crossorigin=""></script>
  104.     <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
  105.     <script type="text/javascript">
  107.     var data = {{ locationsSerialized| json_encode|raw }};
  109.         var map = L.map('mapid');
  110.         mapLink =
  111.             '<a href="http://openstreetmap.org">OpenStreetMap</a>';
  113.        /* L.tileLayer(
  114.             'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  115.                 attribution: '&copy; ' + mapLink + ' Contributors',
  116.                 maxZoom: 18,
  117.             }).addTo(map);*/
  118.     /*var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
  119.         //var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/WorldPhysical/MapServer/tile/{z}/{y}/{x}', {
  120.         attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
  121.         maxZoom: 13
  122.     });
  123.     Esri_WorldShadedRelief.addTo(map);*/
  125.    /* var Stamen_Terrain = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}', {
  126.         attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  127.         subdomains: 'abcd',
  128.         minZoom: 0,
  129.         maxZoom: 18,
  130.         ext: 'png'
  131.     });
  132.     Stamen_Terrain.addTo(map);*/
  134.     var Esri_World_Imagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
  135.         attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
  136.         maxZoom: 18
  137.     });
  138.     Esri_World_Imagery.addTo(map);
  140.     var markerGroups = [];
  141.         var markers =[];
  142.         var myRenderer = L.canvas({ padding: 0.5 });
  144.         data.forEach(function (d,i) {
  146.             var type = 'all';// d.type
  147.             if(markerGroups[type]  === undefined)
  148.             {   markerGroups[type] = L.markerClusterGroup({
  149.                 iconCreateFunction: function(cluster) {
  150.                     // get the number of items in the cluster
  151.                     var count = cluster.getChildCount();
  153.                     // figure out how many digits long the number is
  154.                     var digits = (count + '').length;
  156.                     // Return a new L.DivIcon with our classes so we can
  157.                     // style them with CSS. Take a look at the CSS in
  158.                     // the <head> to see these styles. You have to set
  159.                     // iconSize to null if you want to use CSS to set the
  160.                     // width and height.
  161.                     return L.divIcon({
  162.                         html: count,
  163.                         className: 'cluster digits-' + digits,
  164.                         iconSize: null
  165.                     });
  166.                 }
  167.             });
  168.             }
  170.             var marker = L.circleMarker([d.lat,d.lon], {
  171.                 color: getTypeColor(d.type),
  172.                     renderer: myRenderer,
  173.                 radius : 5,
  174.                 name: d.name,
  175.                 type: d.type,
  176.                 id: d.id,
  177.             })
  178.                 .bindPopup(d.name)
  180.                 .on('mouseover', function (e) {
  181.                     this.openPopup();
  182.                 })
  183.                 .on('mouseout', function (e) {
  184.                     this.closePopup();
  185.                 })
  186.                 .on({
  187.                     click: highlightFeature,
  188.                 })
  190.             markerGroups[type].addLayer(marker);
  191.         });
  193.     var latlngbounds = L.latLngBounds();
  194.     for (var key in markerGroups) {
  196.         latlngbounds.extend(markerGroups[key].getBounds());
  197.         map.addLayer(markerGroups[key]);
  198.     };
  200.     map.fitBounds(latlngbounds, { padding: [10, 10] });
  202. function getTypeColor(d) {
  203.     return d =="town" ? '#ff0000' : d =="river" ?  '#0000ff': d =="sea" ?
  204.         '#0000ff' : d =="mountain" ? '#aa6600' : '#000000';
  205. }
  207. function iconCreateFunction (cluster) {
  208.     // get the number of items in the cluster
  209.     var count = cluster.getChildCount();
  211.     // figure out how many digits long the number is
  212.     var digits = (count + '').length;
  214.     // Return a new L.DivIcon with our classes so we can
  215.     // style them with CSS. Take a look at the CSS in
  216.     // the <head> to see these styles. You have to set
  217.     // iconSize to null if you want to use CSS to set the
  218.     // width and height.
  219.     return L.divIcon({
  220.         html: count,
  221.         className: 'cluster digits-' + digits,
  222.         iconSize: null
  223.     });
  224. }
  226. function highlightFeature(e) {
  229.     var layer = e.target;
  230.     info.update(layer.options);
  231.     /*layer.setStyle({
  232.         weight: 5,
  233.         color: '#666',
  234.         dashArray: '',
  235.         fillOpacity: 0.7
  236.     });*/
  238.     if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
  239.         layer.bringToFront();
  240.     }
  241. }
  243. var info = L.control();
  245. info.onAdd = function (map) {
  246.     this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
  247.     this.update();
  248.     return this._div;
  249. };
  251. // method that we will use to update the control based on feature properties passed
  252. info.update = function (props) {
  254.     {% if is_granted('ROLE_EDIT_ENTITY') %}
  255.         var editUrl = '';
  256.     {% endif %}
  257.     var infoUrl = '';
  258.     if(props) {
  259.         infoUrl = '{{ path("location_show", {'id': 'location_id'})|escape('js') }}';
  260.         infoUrl = infoUrl.replace("location_id", props.id);
  261.         {% if is_granted('ROLE_EDIT_ENTITY') %}
  262.         editUrl = '{{ path("location_edit", {'id': 'location_id'})|escape('js') }}';
  263.         editUrl = editUrl.replace("location_id", props.id);
  264.         {% endif %}
  265.     }
  267.     this._div.innerHTML = '<h4>Location Info</h4>' +  (props ?
  268.         '<b>' + props.name + '</b> (' + props.type + ')<br /><a href='+infoUrl+'><span class="fa fa-eye"></span></a>'
  269.             {% if is_granted('ROLE_EDIT_ENTITY') %}
  270.                + '<a href='+editUrl+'><span class="fa fa-pencil"></span></a>'
  271.             {% endif %}
  272.         : '');
  273. };
  275. info.addTo(map);
  276.     </script>
  277. {% endblock %}