<commit_before>console.log("Loading homepage JS.")

var GoogleMapsLoader = require('google-maps'); // only for common js environments
GoogleMapsLoader.KEY = '<KEY>';

var myLatLng = {lat: -25.363, lng: 131.044};

GoogleMapsLoader.load(function(google) {
  var map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 4,
    center: myLatLng,
    disableDefaultUI: true,
    fullscreenControl: true,
    zoomControl: true,
    animation: google.maps.Animation.DROP
  });

  var bounds = new google.maps.LatLngBounds();

  var markers = $.parseJSON($("#markers").text())

  $.each(markers, function(index, marker) {

    var info = new google.maps.InfoWindow({
      content: '<a href="' + marker.href + '"><h6 class="poi-name">' + marker.name + '</h6></a>',
      maxWidth: 300
    });

    var pos = new google.maps.LatLng(marker.position.lat, marker.position.lon)
    bounds.extend(pos);

    var marker = new google.maps.Marker({
      position: pos,
      map: map,
    });

    marker.addListener('click', function(){
      info.open(map, marker);
    });
  });

  map.fitBounds(bounds);



  var styledMapType = new google.maps.StyledMapType([
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');

});

import './frontend.css'<commit_msg>Reworked map markers and added custers<commit_after>console.log("Loading homepage JS.")

// For map clustering
import "js-marker-clusterer"

var GoogleMapsLoader = require('google-maps'); // only for common js environments
GoogleMapsLoader.KEY = '<KEY>';

var myLatLng = {lat: -25.363, lng: 131.044};

GoogleMapsLoader.load(function(google) {
  var map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 4,
    center: myLatLng,
    disableDefaultUI: true,
    fullscreenControl: true,
    zoomControl: true,
  });


  // Bounds, in page markers and empty array
  var bounds = new google.maps.LatLngBounds();    // Bounds for auto bounding map
  var markers = $.parseJSON($("#markers").text()) // Markers in DOM (JSON in div)
  var markersArr = [];                            // Marker objects array

  // For each marker in page
  $.each(markers, function(index, marker) {

    // Set position
    var pos = new google.maps.LatLng(marker.position.lat, marker.position.lon)

    // Create the marker on the map
    var gMarker = new google.maps.Marker({position: pos, map: map,});

    // Create the info bubble
    var info = new google.maps.InfoWindow({content: '<a href="'+ marker.href +'"><img src="'+ marker.img +'" style="max-width:100%;" class="rounded"><h6 class="my-1">' + marker.name + '</h6></a>', maxWidth: 300,});

    // Listener on click on marker
    gMarker.addListener('click', function(){info.open(map, gMarker);});

    // Extends bounds and push marker
    bounds.extend(pos);
    markersArr.push(gMarker);

  });


  var styledMapType = new google.maps.StyledMapType([
    {
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "administrative.land_parcel",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "administrative.neighborhood",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    }
  ]);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');

  // Auto fit bounds
  map.fitBounds(bounds);

  // Marker clustering
  console.log(markersArr)
  var mcOptions = {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'};
  var mc = new MarkerClusterer(map, markersArr, mcOptions);

});

import './frontend.css'
{'fraction_non_alphanumeric': 0.15968586387434555, 'fraction_numerical': 0.0076520338300443014, 'mean_word_length': 2.444521497919556, 'pattern_counts': {'":': 38, '<': 14, '<?xml version=': 0, '>': 14, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7203812', 'n_tokens_mistral': 1700, 'n_tokens_neox': 1621, 'n_words': 339}