templates/accueil.html.twig line 1

Open in your IDE?
  1. {% extends "layout.twig" %}
  2. {% block titre %} Les fiches masse d'eau du département de la Vienne {% endblock %}
  3. {% block titre_menu %} Les fiches masse d'eau  {% endblock %}
  4. {% block script %}
  5. <script>
  6. var map,closer;
  7. $(document).ready( function () {
  9.   jQuery(function () {
  10.     jQuery('[data-toggle="tooltip"]').tooltip()
  11.   })
  14.   // cours d'eau
  15.   vectorLayer = new ol.layer.Vector({
  16.     source: new ol.source.Vector({
  17.       {#  // url: '{{ asset('/data/mece_86.geojson')}}',
  18.       #}
  19.       url: '{{ asset('/json/trace_mece_ok.json')}}',
  20.       // url: '{{ asset('/json/trace_mece_cible.json')}}',
  21.       {# génére dansle controleur #}
  22.       format: new ol.format.GeoJSON(),
  23.     }),
  24.     style:new ol.style.Style({
  25.       // fill: new ol.style.Fill({
  26.       //   color: 'rgba(239, 22, 64, 0.38)',
  27.       // }),
  28.       stroke: new ol.style.Stroke({
  29.         color: '#063970',
  30.         width: 1,
  31.       }),
  32.     }),
  33.     name:'coursdeau'
  35.   });
  37.   const styleMECE = new ol.style.Style({
  38.    stroke: new ol.style.Stroke({
  39.      // color: '#e52a5c',
  40.      color: '#000',
  41.      width: 2,
  42.    }),
  43.    fill: new ol.style.Fill({
  44.      // color: 'rgba(0, 0, 0, 0)',
  45.      color: 'rgba(239, 22, 64, 0.38)'
  46.    })
  47.    });
  50.   // Masse d'eau
  51.   vectorLayer_contour = new ol.layer.Vector({
  52.     source: new ol.source.Vector({
  53.       {#  // url: '{{ asset('/data/mece86ok.geojson')}}',
  54.       #}
  55.       // url: '{{ asset('/json/contour_mece_ok.json')}}',
  56.       url: '{{ asset('/json/contour_mece_cible.json')}}',
  57.       {# génére via qgis en sql #}
  58.       format: new ol.format.GeoJSON(),
  59.     }),
  60.     style: function (feature) {
  61.       // const color = feature.get('COLOR') || '#eeeeee';
  62.       const cible = feature.get('cible');// || '#eeeeee';
  63.       // if (properties.cible == undefined) {
  64.       if (cible == undefined) {
  65.         // e.selected[0].setStyle(highlightStyle);
  66.         // console.log(cible);
  67.         styleMECE.getFill().setColor('rgba(239, 22, 64, 0.38)');
  68.       }
  69.       // else if (properties.cible.trim() == 'MECE cible SDE') {
  70.       else if (cible.trim() == 'MECE cible SDE') {
  71.         // e.selected[0].setStyle(highlightStyleCible);
  72.         styleMECE.getFill().setColor('rgba(40, 243, 84 , 0.38)');
  73.         // console.log(cible.trim());
  74.       }
  75.       // styleMECE.getFill().setColor(color);
  76.       return styleMECE;
  77.     },
  78.         name:'mece'
  79.   });
  82.  map = new ol.Map({
  83.         target: "map",
  84.         layers: [
  85.           new ol.layer.Tile({
  86.             source: new ol.source.OSM()
  87.           }),
  88.           vectorLayer_contour,
  89.           vectorLayer,
  90.           new ol.layer.Tile({
  91.             source: new ol.source.TileWMS ({
  92.               url: "https://wms.observatoire-environnement.org/sigore?",
  93.               //params: {"LAYERS": "regions_France" ,"SLD":"https://wms.biodiversite-nouvelle-aquitaine.fr/SLD/region_NASeul.sld"},
  94.               params: {"LAYERS": "departement_86_inversed"},
  95.                serverType: "mapserver"
  96.             })
  97.           })
  98.         ],
  99.         view: new ol.View({
  100.             projection : "EPSG:3857",
  101.           //center: ol.proj.fromLonLat([37.41, 8.82]),
  102.           //center: [-104667.82049552513, 5605076.301251277],
  103.           center: [ 75875.0800440154, 5861329.337154213],
  104.           // zoom: 8
  105.           zoom: 9
  106.         })
  107. });
  109. const pos = ol.proj.fromLonLat([16.3725, 48.208889]);
  110. const container = document.getElementById('popup');
  111. const content = document.getElementById('popup-content');
  112. const closer = document.getElementById('popup-closer');
  113. const overlay = new ol.Overlay({
  114.   element: container,
  115.   /*
  116.   // positioning: "top-center",
  117.   autoPan:true,
  118.   stopEvent: false,
  119.   offset: [0,0]
  120.   */
  122.   autoPan: {
  123.     animation: {
  124.       duration: 250,
  125.     },
  126.   },
  128. });
  130. map.addOverlay(overlay);
  132. closer.onclick = function () {
  133.   overlay.setPosition(undefined);
  134.   closer.blur();
  135.   return false;
  136. };
  139. // CLICK
  140. map.on('click', function (e) {
  142.   var hitTest = map.forEachFeatureAtPixel(e.pixel, function (f,layer) {
  145.      if (layer.get('name')=='mece') {
  146.       const coordinate = e.coordinate;
  148.       content.innerHTML = '<div class="header-popup"><h3>'+f.get('code_sandre')+'</h3></div><div class="contenu-popup"><p>'+f.get('nom')+'<br><a target="_blank" href="/fiche?fiche='+f.get('code_sandre')+'">Voir la fiche > </a></p></div>';
  149.         overlay.setPosition(coordinate);
  150.       }
  152.   });
  153. });
  155. // HOVER
  156.  var selected = null;
  158.  map.on('pointermove', function (e) {
  160.    if (selected !== null) {
  161.      selected.setStyle(undefined);
  162.      selected = null;
  163.      // map.getTargetElement().style.cursor = '';
  164.    }
  166.    var hit = map.forEachFeatureAtPixel(e.pixel, function (f,layer) {
  167.       if (layer.get('name')=='mece')  {
  169.        selected = f;
  170.        if (f.get('cible') == undefined) {
  171.          f.setStyle(highlightStyle);
  172.        }
  173.        else if (f.get('cible').trim() == 'MECE cible SDE') {
  174.          f.setStyle(highlightStyleCible);
  175.        }
  176.        return true;
  177.       }
  178.    });
  179.    /*
  180.    if (hit) {
  181.      map.getTargetElement().style.cursor = 'pointer';
  183.    }
  184.    else map.getTargetElement().style.cursor = '';
  185.    */
  186.  });
  188.   var highlightStyle = new ol.style.Style({
  189.     fill: new ol.style.Fill({
  190.       color: 'rgba(239, 22, 64, 0.78)',
  191.     }),
  192.     stroke: new ol.style.Stroke({
  193.       // color: '#e52a5c',
  194.       color: '#000',
  195.       width: 3,
  196.     }),
  197.   });
  200.   var highlightStyleCible = new ol.style.Style({
  201.     fill: new ol.style.Fill({
  202.       // color: 'rgba(40, 243, 84 , 0.38)',
  203.       color: 'rgba(40, 243, 84 , 0.78)',
  204.     }),
  205.     stroke: new ol.style.Stroke({
  206.       // color: '#28f354',
  207.       color: '#000',
  208.       width: 3,
  209.     }),
  210.   });
  211. });
  212. </script>
  213. {% endblock %}
  215. {% block main %}
  216. <main role="main" class="container-fluid">
  217. {% endblock %}
  218. {% block contenu %}
  219. <style>
  220.       .map {
  221.         width: 100%;
  222.         /* height:400px; */
  223.         height:800px;
  224.       }
  226.       .legende-me {
  227.         background-color:rgba(239, 22, 64 , 0.38);
  228.         border:solid 1px black;
  229.         padding:5px 18px 5px 18px;
  230.         vertical-align:middle;
  231.         dispaly:inline-block;
  232.         margin-right:8px;
  234.       }
  235.       .legende-me#legende-me-cible {
  236.         background-color:rgba(40, 243, 84 , 0.38);
  237.       }
  239.     .ol-popup h3 {
  240.       background-color:rgb(240, 240, 240);
  241.       border-bottom:solid 1px grey;
  242.       width:100%;
  243.       font-size:16px;
  244.       font-weight:700;
  245.       border-top-left-radius:10px;
  246.       border-top-right-radius:10px;
  247.       padding: 15px;
  248.       font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  249.     }
  250.     .ol-popup a,
  251.     .ol-popup p
  252.      {
  253.       font-size:14px;
  254.       font-weight:400;
  255.       font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  256.     }
  257.     .ol-popup .contenu-popup {
  258.         padding: 0px 15px 10px 15px;
  259.     }
  261.     .ol-popup {
  262.         position: absolute;
  263.         background-color: white;
  264.         box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  266.         border-radius: 10px;
  267.         border: 1px solid #cccccc;
  268.         bottom: 12px;
  269.         left: -50px;
  270.         min-width: 280px;
  271.       }
  272.       .ol-popup:after, .ol-popup:before {
  273.         top: 100%;
  274.         border: solid transparent;
  275.         content: " ";
  276.         height: 0;
  277.         width: 0;
  278.         position: absolute;
  279.         pointer-events: none;
  280.       }
  281.       .ol-popup:after {
  282.         border-top-color: white;
  283.         border-width: 10px;
  284.         left: 48px;
  285.         margin-left: -10px;
  286.       }
  287.       .ol-popup:before {
  288.         border-top-color: #cccccc;
  289.         border-width: 11px;
  290.         left: 48px;
  291.         margin-left: -11px;
  292.       }
  293.       .ol-popup-closer {
  294.         text-decoration: none;
  295.         position: absolute;
  296.         top: 2px;
  297.         right: 8px;
  298.       }
  299.       .ol-popup-closer:after {
  300.         content: "✖";
  301.       }
  302. </style>
  305.  <div class="row justify-content-center">
  306.    <div class='col-12 col-md-5 py-3'>
  307.      <div id="map"  class="map">
  308.        <!-- <p>test</p> -->
  309.      </div>
  310.      <div id="popup" class="ol-popup">
  311.       <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  312.       <div id="popup-content"></div>
  313.     </div>
  314.   </div>
  315.   <div class='col-12 col-md-5 py-3'>
  316.     <div class="pt-5">
  317.       <p>Pour accéder à la fiche d'une masse d'eau, vous pouvez utiliser les <b>menus déroulants</b> ci-dessous : le choix se fait par le nom de la masse d'eau ou par son code Sandre.</p>
  319.      <form method="get" action="fiche/" >
  320.        <div class="input-group  ">
  321.          <select class="form-control form-inline " name="fiche" >
  323.            {% for masseEau in mece|sort((a, b) => a.nom <=> b.nom) %}
  324.            {#  <option value="{{masseEau.cdeumassed}}" >{{masseEau.nommassede}} </option>
  325.            #}
  326.            <option value="{{masseEau.getcodeSandre()}}" >{{masseEau.nom}} </option>
  327.            {% endfor %}
  328.          </select>
  329.          <div class="input-group-append mb-3">
  330.            <input type='submit' class="btn btn-primary" value="Accèder à la fiche">
  331.          </div>
  332.        </div>
  333.      </form>
  334.      <form method="get" action="fiche/" >
  335.        <div class="input-group  ">
  336.          <select class="form-control form-inline " name="fiche" >
  337.            {% for masseEau in mece|sort((a, b) => a.codeSandre <=> b.codeSandre) %}
  338.            {# <option value="{{masseEau.cdeumassed}}" >{{masseEau.cdeumassed}} </option> #}
  339.            <option value="{{masseEau.getcodeSandre}}" >{{masseEau.getcodeSandre}} </option>
  340.            {% endfor %}
  341.          </select>
  342.          <div class="input-group-append">
  343.            <input type='submit' class="btn btn-primary" value="Accèder à la fiche">
  344.          </div>
  345.        </div>
  346.      </form>
  347.     </div>
  348.     <div _style="max-width:75%;justify-content:center" class="pt-5">
  349.       <p>Ou alors <b>sur la carte</b>, cliquer sur la masse d'eau de votre choix pour accéder à sa fiche en cliquant le lien.</p>
  350.       <p style="display:inline-block" class="mt-4 mb-3"><b><u>Légende</u></b></p>
  351.       <p><span class="legende-me"></span> Masse d'eau</p>
  352.       <p style="line-height:1.2">
  353.         <span class="legende-me" id="legende-me-cible"></span>
  354.         Masse d'eau cible
  355.         <span class="badge badge-tooltip badge-pill badge-info" data-toggle="tooltip"  data-trigger="hover" data-placement="bottom" data-html="true" title="<div class='_mt-5 explique-donnee py-2'>
  356.           <p>Dans le cadre du Plan d’Actions Opérationnel Territorialisé (PAOT), outil opérationnel de l’Etat pour la mise en œuvre des programmes de mesures (PDM) des SDAGE à l’échelle départementale, 10 masses d’eau cibles ont été identifiées sur le département de la Vienne sur lesquelles une attention particulière est portée.  Ces masses d’eau cibles concernent  principalement des masses d’eau altérées dont la qualité peut s’améliorer rapidement par des actions ciblées sur les pressions identifiées.</p>
  357.         </div>">
  358.         i
  359.         </span>
  360.       </p>
  361.       <p style="line-height:1.2">
  362.         <span class="legende-badge badge badge-tooltip badge-pill badge-info" >
  363.         i
  364.         </span>
  365.         <span _class="legende-me" id="legende-me-cible">Informations</span>
  366.       </p>
  367.       <p style="line-height:1.2">
  368.         <span class="legende-badge badge badge-tooltip badge-pill badge-info" >
  369.         s
  370.         </span>
  371.         <span _class="legende-me" id="legende-me-cible">Sources de la donnée</span>
  372.       </p>
  373.     </div>
  374.    </div>
  375.  </div>
  376. {% endblock %}