templates/public/prayer/_map.js.twig line 1

Open in your IDE?
  1. (function ($) {
  2.     "use strict";
  4.     function mainMap(locations) {
  6.         //   Map Infoboxes end ------------------
  7.         var map = new google.maps.Map(document.getElementById('map-main'), {
  8.             zoom: 6,
  9.             scrollwheel: false,
  10.             center: new google.maps.LatLng(-18, 47),
  11.             mapTypeId: google.maps.MapTypeId.ROADMAP,
  12.             zoomControl: false,
  13.             mapTypeControl: false,
  14.             scaleControl: false,
  15.             panControl: false,
  16.             fullscreenControl: true,
  17.             navigationControl: false,
  18.             streetViewControl: false,
  19.             animation: google.maps.Animation.BOUNCE,
  20.             gestureHandling: 'cooperative',
  21.             styles: [{
  22.                 "featureType": "administrative",
  23.                 "elementType": "labels.text.fill",
  24.                 "stylers": [{
  25.                     "color": "#444444"
  26.                 }]
  27.             }]
  28.         });
  29.         var boxText = document.createElement("div");
  30.         boxText.className = 'map-box'
  31.         var currentInfobox;
  32.         var boxOptions = {
  33.             content: boxText,
  34.             disableAutoPan: true,
  35.             alignBottom: true,
  36.             maxWidth: 0,
  37.             pixelOffset: new google.maps.Size(-150, -55),
  38.             zIndex: null,
  39.             boxStyle: {
  40.                 width: "300px"
  41.             },
  42.             closeBoxMargin: "0",
  43.             closeBoxURL: "",
  44.             infoBoxClearance: new google.maps.Size(1, 1),
  45.             isHidden: false,
  46.             pane: "floatPane",
  47.             enableEventPropagation: false,
  48.         };
  51.         var markerCluster, overlay, i;
  52.         var allMarkers = [];
  54.         var clusterStyles = [
  55.             {
  56.                 textColor: 'white',
  57.                 url: '',
  58.                 height: 50,
  59.                 width: 50
  60.             }
  61.         ];
  63.         var ib = new InfoBox();
  64.         google.maps.event.addListener(ib, "domready", function () {
  65.             cardRaining();
  67.         });
  68.         var markerImg;
  69.         var markerCount;
  71.         $.each(locations, function(index, user) {
  72.             var newLocation = generateRandomCordonateInRadius({'latitude':user.latitude, 'longitude':user.longitude} , 1000) ;
  74.             var labels = '123456789';
  75.             markerImg = user.image;
  76.             markerCount = user.nb_prayings;
  77.             var overlaypositions = new google.maps.LatLng(newLocation.latitude, newLocation.longitude),
  79.                 overlay = new CustomMarker(
  80.                     overlaypositions, map,{ marker_id: index},  markerImg , markerCount
  81.                 );
  83.             allMarkers.push(overlay);
  85.             google.maps.event.addDomListener(overlay, 'click', (function(overlay, index) {
  86.                 return function() {
  87.                     ib.setOptions(boxOptions);
  88.                     boxText.innerHTML = user.popupInfo;
  89.                     ib.close();
  90.                     ib.open(map, overlay);
  91.                     currentInfobox = user.nb_prayings;
  93.                     var latLng = new google.maps.LatLng(newLocation.latitude, newLocation.longitude);
  94.                     map.panTo(latLng);
  95.                     map.panBy(0, -110);
  97.                     google.maps.event.addListener(ib,'domready',function(){
  98.                         $('.infoBox-close').click(function(e) {
  99.                             e.preventDefault();
  100.                             ib.close();
  101.                             $('.map-marker-container').removeClass('clicked infoBox-opened');
  102.                         });
  104.                     });
  106.                 }
  107.             })(overlay, i));});
  109.         var options2 = {
  110.             imagePath: '',
  111.             styles: clusterStyles,
  112.             minClusterSize: 2
  113.         };
  114.         markerCluster = new MarkerClusterer(map, allMarkers, options2);
  115.         google.maps.event.addDomListener(window, "resize", function () {
  116.             var center = map.getCenter();
  117.             google.maps.event.trigger(map, "resize");
  118.             map.setCenter(center);
  119.         });
  121.         $('.map-item').on("click", function (e) {
  122.             e.preventDefault();
  123.             map.setZoom(15);
  124.             var index = currentInfobox;
  125.             var marker_index = parseInt($(this).attr('href').split('#')[1], 10);
  126.             google.maps.event.trigger(allMarkers[marker_index-1], "click");
  127.             if ($(window).width() > 1064) {
  128.                 if ($(".map-container").hasClass("fw-map")) {
  129.                     $('html, body').animate({
  130.                         scrollTop: $(".map-container").offset().top + "-110px"
  131.                     }, 1000)
  132.                     return false;
  133.                 }
  134.             }
  135.         });
  136.         $('.nextmap-nav').on("click", function (e) {
  137.             e.preventDefault();
  138.             map.setZoom(15);
  139.             var index = currentInfobox;
  140.             if (index + 1 < allMarkers.length) {
  141.                 google.maps.event.trigger(allMarkers[index+ 1], 'click');
  142.             } else {
  143.                 google.maps.event.trigger(allMarkers[0], 'click');
  144.             }
  145.         });
  146.         $('.prevmap-nav').on("click", function (e) {
  147.             e.preventDefault();
  148.             map.setZoom(15);
  149.             if (typeof (currentInfobox) == "undefined") {
  150.                 google.maps.event.trigger(allMarkers[allMarkers.length - 1], 'click');
  151.             } else {
  152.                 var index = currentInfobox;
  153.                 if (index - 1 < 0) {
  154.                     google.maps.event.trigger(allMarkers[allMarkers.length - 1], 'click');
  155.                 } else {
  156.                     google.maps.event.trigger(allMarkers[index - 1], 'click');
  157.                 }
  158.             }
  159.         });
  160.         // Scroll enabling button
  161.         var scrollEnabling = $('.scrollContorl');
  163.         $(scrollEnabling).click(function(e){
  164.             e.preventDefault();
  165.             $(this).toggleClass("enabledsroll");
  167.             if ( $(this).is(".enabledsroll") ) {
  168.                 map.setOptions({'scrollwheel': true});
  169.             } else {
  170.                 map.setOptions({'scrollwheel': false});
  171.             }
  172.         });
  173.         var zoomControlDiv = document.createElement('div');
  174.         var zoomControl = new ZoomControl(zoomControlDiv, map);
  175.         function ZoomControl(controlDiv, map) {
  176.             zoomControlDiv.index = 1;
  177.             map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv);
  178.             controlDiv.style.padding = '5px';
  179.             var controlWrapper = document.createElement('div');
  180.             controlDiv.appendChild(controlWrapper);
  181.             var zoomInButton = document.createElement('div');
  182.             zoomInButton.className = "mapzoom-in";
  183.             controlWrapper.appendChild(zoomInButton);
  184.             var zoomOutButton = document.createElement('div');
  185.             zoomOutButton.className = "mapzoom-out";
  186.             controlWrapper.appendChild(zoomOutButton);
  187.             google.maps.event.addDomListener(zoomInButton, 'click', function () {
  188.                 map.setZoom(map.getZoom() + 1);
  189.             });
  190.             google.maps.event.addDomListener(zoomOutButton, 'click', function () {
  191.                 map.setZoom(map.getZoom() - 1);
  192.             });
  193.         }
  196.         // Geo Location Button
  197.         $(".geoLocation, .input-with-icon.location a").on("click", function (e) {
  198.             e.preventDefault();
  199.             geolocate();
  200.         });
  202.         function geolocate() {
  204.             if (navigator.geolocation) {
  205.                 navigator.geolocation.getCurrentPosition(function (position) {
  206.                     var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  207.                     map.setCenter(pos);
  208.                     map.setZoom(12);
  210.                     var avrtimg = $(".avatar-img").attr("data-srcav");
  211.                     var markerIcon3 = {
  212.                         url: avrtimg,
  213.                     }
  214.                     var marker3 = new google.maps.Marker({
  215.                         position: pos,
  216.                         map:  map,
  218.                         icon: markerIcon3,
  219.                         title: 'Your location'
  220.                     });
  221.                     var myoverlay = new google.maps.OverlayView();
  222.                     myoverlay.draw = function () {
  223.                         // add an id to the layer that includes all the markers so you can use it in CSS
  224.                         this.getPanes().markerLayer.id='markerLayer';
  225.                     };
  226.                     myoverlay.setMap(map);
  228.                 });
  229.             }
  230.         }
  231.     }
  233.     /**
  234.      * radius in meters
  235.      */
  236.     function generateRandomCordonateInRadius(position, radius) {
  237.         var y0 = position.latitude;
  238.         var x0 = position.longitude;
  240.         //1 degree = 111300 meters
  241.         // Convert Radius from meters to degrees.
  242.         var rd = radius / 111300;
  244.         var u = Math.random();
  245.         var v = Math.random();
  247.         var w = rd * Math.sqrt(u);
  248.         var t = 2 * Math.PI * v;
  249.         var x = w * Math.cos(t);
  250.         var y = w * Math.sin(t);
  252.         var xp = x / Math.cos(y0);
  254.         return {
  255.             'latitude': y + y0,
  256.             'longitude': xp + x0
  257.         };
  258.     }
  260.     // Custom Map Marker
  261.     // ----------------------------------------------- //
  263.     function CustomMarker(latlng, map, args, markerImg, markerCount) {
  264.         this.latlng = latlng;
  265.         this.args = args;
  267.         this.markerImg = markerImg;
  268.         this.markerCount = markerCount;
  269.         this.setMap(map);
  270.     }
  272.     CustomMarker.prototype = new google.maps.OverlayView();
  274.     CustomMarker.prototype.draw = function () {
  276.         var self = this;
  278.         var div = this.div;
  280.         if (!div) {
  281.             var markerimage = "{{ url('asset_url', {'path': '/images/logo.png', 'w':'60' }) }}";
  282.             div = this.div = document.createElement('div');
  283.             div.className = 'map-marker-container';
  285.             {#'<span class="marker-count">' + self.markerCount + '</span>' +#}
  286.             div.innerHTML = '<div class="marker-container">' +
  287.                 '<div class="marker-card">' +
  288.                 '<div class="marker-holder"><img src="' + markerimage + '" alt=""></div>' +
  289.                 '</div>' +
  290.                 '</div>'
  293.             // Clicked marker highlight
  294.             google.maps.event.addDomListener(div, "click", function (event) {
  295.                 $('.map-marker-container').removeClass('clicked infoBox-opened');
  296.                 google.maps.event.trigger(self, "click");
  297.                 $(this).addClass('clicked infoBox-opened');
  298.             });
  301.             if (typeof (self.args.marker_id) !== 'undefined') {
  302.                 div.dataset.marker_id = self.args.marker_id;
  303.             }
  305.             var panes = this.getPanes();
  306.             panes.overlayImage.appendChild(div);
  307.         }
  309.         var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
  311.         if (point) {
  312.             div.style.left = (point.x) + 'px';
  313.             div.style.top = (point.y) + 'px';
  314.         }
  315.     };
  317.     CustomMarker.prototype.remove = function () {
  318.         if (this.div) {
  319.             this.div.parentNode.removeChild(this.div);
  320.             this.div = null;
  321.             $(this).removeClass('clicked');
  322.         }
  323.     };
  325.     CustomMarker.prototype.getPosition = function () {
  326.         return this.latlng;
  327.     };
  329.     // -------------- Custom Map Marker / End -------------- //
  332.     var head = document.getElementsByTagName('head')[0];
  334. // Save the original method
  335.     var insertBefore = head.insertBefore;
  337. // Replace it!
  338.     head.insertBefore = function (newElement, referenceElement) {
  340.         if (newElement.href && newElement.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) {
  341.             return;
  342.         }
  344.         insertBefore.call(head, newElement, referenceElement);
  345.     };
  347.     var map = document.getElementById('map-main');
  349.     if (typeof (map) != 'undefined' && map != null) {
  350.         google.maps.event.addDomListener(window, 'load', function () {
  351.             $.ajax({
  352.                 url: "{{ path('praying_users') }}",
  353.                 type: "GET",
  354.                 success: function (users) {
  355.                     mainMap(users);
  356.                 }
  357.             })
  358.         });
  359.     }
  360. })(this.jQuery);