templates/isochrone/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello IsochroneController!{% endblock %}
  5. {% block body %}
  6.     <style type="text/css">
  7.         #theMap {
  8.             width:100%;
  9.             height:600px;
  10.         }
  11.         form .alert {
  12.             display:none;
  13.             margin:0;
  14.         }
  15.     </style>
  16.     <script type="text/javascript" src="/ekotools/javascripts/isochrone.js"></script>
  18. <div class="row">
  19.     <div class="col-12">
  20.         <div class="card">
  22.             <div class="card-body">
  24.                 <h3>Isochrones et Isodistance</h3>
  25.                 <form action="index.html" method="get" onsubmit="return testIsochrone();">
  26.                     <div class="form-group">
  27.                         <div class="col-xs-12 row">
  28.                             <div class="col-xs-6">
  29.                                 <div class="clearfix">
  30.                                     <div class="col-xs-2"></div>
  31.                                     <div class="col-xs-5"><label><input type="radio" name="type" id="typeDuration" checked="checked"/> Temps (isochrone)</label></div>
  32.                                     <div class="col-xs-3"><input type="text" name="value" id="durationValue" value="10" size="7" class="form-control"/></div>
  33.                                     <div class="col-xs-2">en minutes</div>
  34.                                 </div>
  35.                                 <div class="clearfix">
  36.                                     <div class="col-xs-2">- ou -</div>
  37.                                     <div class="col-xs-5"><label><input type="radio" name="type"/> distance (isodistance)</label></div>
  38.                                     <div class="col-xs-3"><input type="text" name="value" id="distanceValue" value="1000" size="7" class="form-control"/></div>
  39.                                     <div class="col-xs-2">metres</div>
  40.                                 </div>
  41.                             </div>
  42.                             <div class="col-xs-6">
  43.                                 <div class="col-xs-6">
  44.                                     <input type="submit" value="Calcul du polygone" class="form-control"/>
  45.                                 </div>
  46.                                 <div class="col-xs-6">
  47.                                     <div class="alert alert-warning" id="computing">Calcul en cours...</div>
  48.                                     <div class="alert alert-danger" id="error">Erreur...</div>
  49.                                 </div>
  50.                             </div>
  51.                         </div>
  52.                         <div class="col-xs-12">
  53.                             <div class="col-xs-1">Mode</div>
  54.                             <div class="col-xs-9">
  55.                                 <label><input type="radio" name="mode" id="modeWalking" checked="checked"/> Marche</label>
  56.                                 <label><input type="radio" name="mode" id="modeBicycling"/> Vélo</label>
  57.                                 <label><input type="radio" name="mode" id="modeDriving"/> Voiture</label>
  58.                                 <label><input type="radio" name="mode"/> Transport</label>
  59.                             </div>
  60.                         </div>
  61.                     </div>
  62.                 </form>
  64.             </div>
  65.         </div>
  68.         <div class="card">
  69.             <div class="card-body">
  70.             <div class="text-center alert alert-info">Cliquer sur la carte pour choisir un emplacement</div>
  71.             <div id="theMap"></div>
  72.             </div>
  73.         </div>
  75.     </div>
  76. </div>
  80.     <script type="text/javascript">
  81.         $( document ).ready(function() {
  82.             var marker = false,
  83.                 polygon = false,
  84.                 latitude = 48.858254,
  85.                 longitude = 2.294563;
  86.             isochrone.load({
  87.                 map: 'theMap',
  88.                 key: 'AIzaSyBdNRvl5qARhD6X3JaQ1En7f4ETuJDl95A', // Do change the key: it won't work on your domain anyway :-)
  89.                 callback: function (iso) {
  90.                     marker = new google.maps.Marker({position: {lat: latitude, lng: longitude}, map: iso.map.map});
  91.                     iso.map.map.setOptions({
  92.                         clickableIcons: false,
  93.                         draggableCursor: 'pointer',
  94.                         styles: [{
  95.                             featureType: "poi",
  96.                             elementType: "labels",
  97.                             stylers: [{visibility: "off"}]
  98.                         }]
  99.                     });
  100.                     iso.map.map.addListener('click', function (data) {
  101.                         latitude = data.latLng.lat();
  102.                         longitude = data.latLng.lng();
  103.                         marker.setPosition({lat: latitude, lng: longitude});
  104.                     });
  105.                 },
  106.                 debug: true
  107.             });
  109.             /* Allow to click on the map */
  110.             function testIsochrone() {
  111.                 document.getElementById('error').style.display = 'none';
  112.                 document.getElementById('computing').style.display = 'block';
  113.                 if (polygon) {
  114.                     polygon.setMap(null);
  115.                     polygon = null;
  116.                 }
  118.                 let value = parseFloat(document.getElementById(document.getElementById('typeDuration').checked ? 'durationValue' : 'distanceValue').value.replace(',', '.'));
  120.                 if (document.getElementById('typeDuration').checked) {
  121.                     value = value * 60;
  122.                 }
  124.                 isochrone.compute({
  125.                     lat: latitude,
  126.                     lng: longitude,
  127.                     cycles: 5,
  128.                     slices: 8,
  129.                     type: document.getElementById('typeDuration').checked ? 'duration' : 'distance',
  130.                     value: value,
  131.                     mode: document.getElementById('modeWalking').checked ? 'walking' : (document.getElementById('modeBicycling').checked ? 'bicycling' : (document.getElementById('modeDriving').checked ? 'driving' : 'transit')),
  132.                     callback: function (status, points) {
  133.                         document.getElementById('computing').style.display = 'none';
  134.                         if (status === 'OK') {
  135.                             polygon = new google.maps.Polygon({path: points});
  136.                             polygon.setMap(isochrone.map.map);
  137.                         } else {
  138.                             document.getElementById('error').innerHTML = status;
  139.                             document.getElementById('error').style.display = 'block';
  140.                         }
  141.                     }
  142.                 });
  143.                 return false;
  144.             }
  145.         });
  146.     </script>
  148. {% endblock %}