map.js

@@ -82,19 +82,19 @@
   this._element = element;
   this._element.classList.add('panel');
   
   this._hide = addParaWithText(this._element, '▶');
   this._hide = addElementWithText(this._element, 'a', '▶');
   this._hide.title = lang.action_collapse;
   this._hide.className = 'hide';
   this._hide.addEventListener('click', this.toggleExpanded.bind(this));
   
   this._close = addParaWithText(this._element, '×');
   this._close = addElementWithText(this._element, 'a', '×');
   this._close.title = lang.action_close;
   this._close.className = 'close';
   this._close.addEventListener('click', this.close.bind(this));
   
   this._content = document.createElement('div');
   this._element.appendChild(this._content);
};
}
Panel.prototype = {
   _element: null,
   _hide: null,
@@ -179,6 +179,11 @@
      var query = this.input.value.toUpperCase();
      if(query === this.query) return;
      this.query = query;
		
      if(query === '') {
         deleteChildren(this.results);
         return;
      }
      
      var features = [];
      stops_type.forEach(function(stop_type) {
@@ -271,11 +276,12 @@
      fill = '#922';
   }
   
   var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3" /></svg>';
   var image = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3"/></svg>';
   
   vehicle.setStyle(new ol.style.Style({
      image: new ol.style.Icon({
         src: 'data:image/svg+xml;base64,' + btoa(image),
         imgSize: [20,30],
         rotation: Math.PI * parseFloat(vehicle.get('heading') ? vehicle.get('heading') : 0) / 180.0,
      }),
      text: new ol.style.Text({
@@ -586,6 +592,8 @@
   }
   // Vehicle
   else if(ttss_types.includes(type)) {
      styleVehicle(feature, true);
		
      var span = displayVehicle(feature.get('vehicle_type'));
      
      additional = document.createElement('p');
@@ -601,8 +609,6 @@
      
      vehicleTable(feature, tbody);
      vehiclePath(feature);
		
      styleVehicle(feature, true);
   }
   // Stop or stop point
   else if(['s', 'p'].includes(type)) {
@@ -669,7 +675,7 @@
      })}, 10);
   };
   showOnMapElement.addEventListener('click', showOnMapFunction);
   showOnMapElement.className = 'icon-pin addon-icon';
   showOnMapElement.className = 'icon icon-pin';
   showOnMapElement.title = lang.show_on_map;
   
   if(additional) {
@@ -703,6 +709,11 @@

function listFeatures(features) {
   var div = document.createElement('div');
	
   if(features.length === 0) {
      addParaWithText(div, lang.no_results);
      return div;
   }
   
   addParaWithText(div, lang.select_feature);
   
@@ -900,8 +911,6 @@
      vehicles_last_update[type] = 0;
   });
   
   ol.style.IconImageCache.shared.setSize(512);
	
   geolocation_feature = new ol.Feature({
      name: '',
      style: new ol.style.Style({
@@ -953,9 +962,15 @@
   
   document.getElementById('find').addEventListener('click', find.open.bind(find, panel));
   
   var hidpi = ol.has.DEVICE_PIXEL_RATIO > 1;
   var layers = [
      new ol.layer.Tile({
         source: new ol.source.OSM(),
         source: new ol.source.XYZ({
            attributions: [ol.source.OSM.ATTRIBUTION],
            url: 'http://10.12.16.142:8080/tiles/mapnik_'+(hidpi ? 'x2' : 'x1')+'/webmercator_'+(hidpi ? 'x2' : 'x1')+'/{z}/{x}/{y}.png',
            maxZoom: 19,
            tilePixelRatio: (hidpi ? 2 : 1),
         }),
      }),
      route_layer,
      geolocation_layer,