vendor/pdir/panorama-bundle/src/Resources/views/mod_pano_map_view.twig line 1

Open in your IDE?
  1. <div class="map-container">
  2.   <script>
  3.     var catalogUri = '{{ catalogUri }}';
  4.     var zoom = {{ city.zoom }};
  5.     var cityid = '{{ city.id }}';
  6.     var iCatalogPageId = '{{ iCatalogPageId }}';
  7.     var sCatalogUri = '{{ sCatalogUri }}';
  8.     var year = '{{ actYear }}';
  9.     var timePeriod = '{{ timePeriod }}';
  10.     var cat = '{{ cat }}';
  12.     var lat = '{{ city.latitude }}';
  13.     var lng = '{{ city.longitude }}';
  15.     var overlayImageUri = '{{ overlayImage }}';
  16.     var overlayLat1 = '{{ cityMap.overlay_latitude }}';
  17.     var overlayLng1 = '{{ cityMap.overlay_longitude }}';
  18.     var overlayLat2 = '{{ cityMap.overlay_bottom_latitude }}';
  19.     var overlayLng2 = '{{ cityMap.overlay_bottom_longitude }}';
  20.     var overlayZoom = parseInt('{{ cityMap.overlay_zoom }}');
  22.     var actOverlayObject = null;
  24.     var controlPanel = parseInt('{{ iControlPanel }}');
  25.     var webp = true;
  27.     function initialize() {
  28.       const newark = new google.maps.LatLng(lat, lng);
  29.       const myOptions = {
  30.         zoom: zoom,
  31.         maxZoom: 20,
  32.         minZoom: 13,
  33.         center: newark,
  34.         mapTypeId: google.maps.MapTypeId.ROADMAP,
  35.         mapTypeControl: false,
  36.         streetViewControl: false,
  37.         panControlOptions: {
  38.           position: google.maps.ControlPosition.TOP_RIGHT
  39.         },
  40.         zoomControlOptions: {
  41.           style: google.maps.ZoomControlStyle.LARGE,
  42.           position: google.maps.ControlPosition.TOP_LEFT
  43.         }
  44.       };
  46.       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  48.       // deactivate restaurants ...
  49.       const styles = [
  50.         // {
  51.         //   elementType: "geometry",
  52.         //   stylers: [
  53.         //     {
  54.         //       color: "#212121"
  55.         //     }
  56.         //   ]
  57.         // },
  58.         // {
  59.         //   elementType: "labels.icon",
  60.         //   stylers: [
  61.         //     {
  62.         //       visibility: "off"
  63.         //     }
  64.         //   ]
  65.         // },
  66.         {
  67.           featureType: "poi",
  68.           stylers: [
  69.             {
  70.               visibility: "off"
  71.             }
  72.           ]
  73.         }
  74.       ];
  76.       map.setOptions({styles: styles});
  78.       overlayImageUri = '{{ overlayImage }}'; // 'files/design/meissen.jpg';
  80.       // cityid 1
  81.       // if (typeof overlayImageUri != 'undefined' && overlayImageUri != '' && overlayImageUri != 'files/pano_data/Staedte/Frauenstein/Stadtplaene/FS_Burg_Schloss_2014.png') {
  82.       if(cityid === '1') {
  84.         var tilePath = '{{ url }}/' + overlayImageUri.substring(0, overlayImageUri.length - 4),
  85.           tileExt = '.png';
  86.         /*if (typeof webp !== 'undefined') {
  87.             tilePath = tilePath + '_webp';
  88.             tileExt = '.webp'
  89.         }*/
  91.         var mapBounds = new google.maps.LatLngBounds(
  92.           new google.maps.LatLng(overlayLat2, overlayLng2),
  93.           new google.maps.LatLng(overlayLat1, overlayLng1));
  94.         var mapMinZoom = 13;
  95.         var mapMaxZoom = 20;
  97.         var imageMapType = new google.maps.ImageMapType({
  98.           getTileUrl: function (coord, zoom) {
  99.             var proj = map.getProjection();
  100.             var z2 = Math.pow(2, zoom);
  101.             var tileXSize = 256 / z2;
  102.             var tileYSize = 256 / z2;
  103.             var tileBounds = new google.maps.LatLngBounds(
  104.               proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
  105.               proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
  106.             );
  107.             var y = coord.y;
  108.             var x = coord.x >= 0 ? coord.x : z2 + coord.x
  109.             if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
  110.               return tilePath + '/' + zoom + "/" + x + "/" + y + tileExt;
  111.             else
  112.               return tilePath + "/none.png";
  113.           }
  114.         });
  116.         map.overlayMapTypes.push(imageMapType);
  117.         actOverlayObject = imageMapType;
  119.       } else {
  121.         /* fallback frauenstein */
  122.         var imageBounds = new google.maps.LatLngBounds(
  123.           new google.maps.LatLng(overlayLat2, overlayLng2),
  124.           new google.maps.LatLng(overlayLat1, overlayLng1));
  126.         var overlayMap = new google.maps.GroundOverlay(
  127.           overlayImageUri,
  128.           imageBounds
  129.         );
  130.         overlayMap.setMap(map);
  131.         actOverlayObject = overlayMap;
  132.       }
  133.       /* for debug
  134.                           map.addListener('zoom_changed', function() {
  135.                               console.log('Zoom: ' + map.getZoom());
  136.                           });
  137.       */
  138.       if (controlPanel == 1) {
  139.         // @todo needed map.controls[google.maps.ControlPosition.TOP_LEFT].push(renderMapControlPanel());
  140.       }
  141.       ;
  143.       google.maps.event.addListenerOnce(map, 'idle', function () {
  144.         google.maps.event.trigger(map, 'resize');
  145.       });
  147.       markerClusterOptions = {
  148.         gridSize: 30,
  149.         maxZoom: 17,
  150.         styles: [
  151.           {
  152.             height: 56,
  153.             width: 55,
  154.             url: "/typo3conf/ext/arstempano_design/Resources/Public/v2/images/map/m2.png"
  155.           }
  156.         ]
  157.       };
  158.       markerCluster = new MarkerClusterer(map, [], markerClusterOptions);
  160.       // init Sidebar and MapController
  161.       Sidebar.init();
  162.     }
  164.     document.addEventListener("DOMContentLoaded", function () {
  165.       google.maps.event.addDomListener(window, 'load', initialize);
  166.     });
  167.   </script>
  169.   <div id="map_canvas" style="height:100%;weight:100%;"></div>
  170. </div>