client/locations-list-map.js
/**
 * Sets up map on initial page load.
 *
 * TODO (patricknelson): Should the initMap() function only be responsible for initializing the
 * map and then have the caller handle position/zoom/bounds etc?
 */
Sets up map on initial page load.
Sets up map on initial page load .
function initMap(data, filters) {
  const element = document.getElementById('map');
  if (!element) {
    return;
  }
  gMap = new google.maps.Map(element, { fullscreenControl: false, mapTypeControl: false });
  gSecondaryCluster = new MarkerClusterer(gMap, [], {
    clusterClass: 'secondarycluster',
    imagePath: '/images/markercluster/m',
    minimumClusterSize: 5,
    zIndex: 1,
  });
  gPrimaryCluster = new MarkerClusterer(
    gMap,
    [],
    {
      imagePath: '/images/markercluster/m',
      minimumClusterSize: 5,
      zIndex: 2,
    }
  );
  gPrimaryCluster.addListener('click', () => {
    sendEvent('map', 'click', 'primaryCluster');
  });
  gSecondaryCluster.addListener('click', () => {
    sendEvent('map', 'click', 'secondaryCluster');
  });
  google.maps.event.addListener(gMap, 'bounds_changed', () => {
    const mapBounds = gMap.getBounds();
    if (mapBounds && gCurrentViewportCenter) {
      const currentLat = mapBounds.getCenter().lat();
      const currentLng = mapBounds.getCenter().lng();
      refreshList(data, filters);
      gCurrentViewportCenter = {
        lat: currentLat,
        lng: currentLng,
      };
      updateStats(); 
    }
  });
  const mapBounds = gMap.getBounds();
  if (mapBounds) {
    const mapCenter = mapBounds.getCenter();
    gCurrentViewportCenter = {
      lat: mapCenter.lat(),
      lng: mapCenter.lng(),
    };
  }
  showMarkers(data, filters);
  initMapSearch(data, filters);
  loadOtherCountries();
  const onChange = (dataset, event) => {
    const { checked } = event.target;
    dataset.checked = checked;
    if (checked) {
      if (datasetData[dataset.key]) {
        gSecondaryMarkers.push(
          ...datasetData[dataset.key].markers
        );
        updateClusters(null, gSecondaryCluster);
      } else {
        $.getJSON(
          getDatasetFilename(dataset.key, gCountryCode),
          (result) => {
            const markerOptions = {
              icon: getIcon(gDatasetMarkers[dataset.key].standard),
              opacity: 1,
              datasetKey: dataset.key,
            };
            const formattedDataset = toDataByLocation(result, dataset.key);
            Object.assign(
              datasetData,
              {
                [dataset.key]: {
                  formattedDataset,
                  markers: getMarkers(formattedDataset, {}, null, markerOptions).outOfFilters,
                },
              }
            );
            gSecondaryMarkers.push(
              ...datasetData[dataset.key].markers
            );
            gSecondaryCluster.setClusterClass('');
            updateClusters(null, gSecondaryCluster);
          }
        );
      }
    } else {
      gSecondaryMarkers = gSecondaryMarkers.filter((marker) => (
        !datasetData[dataset.key].markers.includes(marker)
      ));
      gSecondaryCluster.setClusterClass('secondarycluster');
      updateClusters(null, gSecondaryCluster);
    }
  };
  const legend = generateGMapDatasetLegend(onChange);
  gMap.controls[google.maps.ControlPosition.TOP_LEFT].push(legend);
  if (!isEmbed) {
    gMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('customFullscreenButton'));
    $('#customFullscreenButton').on('click', () => {
      if (document.fullscreenElement) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { 
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { 
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { 
          document.msExitFullscreen();
        }
      } else {
        const elem = document.documentElement;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { 
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { 
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { 
          elem.msRequestFullscreen();
        }
      }
    });
    document.documentElement.onfullscreenchange = () => {
      if (document.fullscreenElement) {
        $('#filter-div').hide();
        $('#locations-div').hide();
        $('#map-div').width('100vw');
        $('#map').width('100vw');
        $('#customFullscreenImage').attr('src', '/images/icons/shrinkMap.svg');
      } else {
        $('#filter-div').show();
        $('#locations-div').show();
        $('#map').width('100%');
        $('#customFullscreenImage').attr('src', '/images/icons/growMap.svg');
      }
    };
  }
}
function initMap ( data , filters ) { const element = document . getElementById ( 'map' ) ; if ( ! element ) { return ; } gMap = new google . maps . Map ( element , { fullscreenControl : false , mapTypeControl : false } ) ; gSecondaryCluster = new MarkerClusterer ( gMap , [ ] , { clusterClass : 'secondarycluster' , imagePath : '/images/markercluster/m' , minimumClusterSize : 5 , zIndex : 1 , } ) ; gPrimaryCluster = new MarkerClusterer ( gMap , [ ] , { imagePath : '/images/markercluster/m' , minimumClusterSize : 5 , zIndex : 2 , } ) ; gPrimaryCluster . addListener ( 'click' , ( ) => { sendEvent ( 'map' , 'click' , 'primaryCluster' ) ; } ) ; gSecondaryCluster . addListener ( 'click' , ( ) => { sendEvent ( 'map' , 'click' , 'secondaryCluster' ) ; } ) ; google . maps . event . addListener ( gMap , 'bounds_changed' , ( ) => { const mapBounds = gMap . getBounds ( ) ; if ( mapBounds && gCurrentViewportCenter ) { const currentLat = mapBounds . getCenter ( ) . lat ( ) ; const currentLng = mapBounds . getCenter ( ) . lng ( ) ; refreshList ( data , filters ) ; gCurrentViewportCenter = { lat : currentLat , lng : currentLng , } ; updateStats ( ) ; } } ) ; const mapBounds = gMap . getBounds ( ) ; if ( mapBounds ) { const mapCenter = mapBounds . getCenter ( ) ; gCurrentViewportCenter = { lat : mapCenter . lat ( ) , lng : mapCenter . lng ( ) , } ; } showMarkers ( data , filters ) ; initMapSearch ( data , filters ) ; loadOtherCountries ( ) ; const onChange = ( dataset , event ) => { const { checked } = event . target ; dataset . checked = checked ; if ( checked ) { if ( datasetData [ dataset . key ] ) { gSecondaryMarkers . push ( ... datasetData [ dataset . key ] . markers ) ; updateClusters ( null , gSecondaryCluster ) ; } else { $ . getJSON ( getDatasetFilename ( dataset . key , gCountryCode ) , ( result ) => { const markerOptions = { icon : getIcon ( gDatasetMarkers [ dataset . key ] . standard ) , opacity : 1 , datasetKey : dataset . key , } ; const formattedDataset = toDataByLocation ( result , dataset . key ) ; Object . assign ( datasetData , { [ dataset . key ] : { formattedDataset , markers : getMarkers ( formattedDataset , { } , null , markerOptions ) . outOfFilters , } , } ) ; gSecondaryMarkers . push ( ... datasetData [ dataset . key ] . markers ) ; gSecondaryCluster . setClusterClass ( '' ) ; updateClusters ( null , gSecondaryCluster ) ; } ) ; } } else { gSecondaryMarkers = gSecondaryMarkers . filter ( ( marker ) => ( ! datasetData [ dataset . key ] . markers . includes ( marker ) ) ) ; gSecondaryCluster . setClusterClass ( 'secondarycluster' ) ; updateClusters ( null , gSecondaryCluster ) ; } } ; const legend = generateGMapDatasetLegend ( onChange ) ; gMap . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( legend ) ; if ( ! isEmbed ) { gMap . controls [ google . maps . ControlPosition . TOP_RIGHT ] . push ( document . getElementById ( 'customFullscreenButton' ) ) ; $ ( '#customFullscreenButton' ) . on ( 'click' , ( ) => { if ( document . fullscreenElement ) { if ( document . exitFullscreen ) { document . exitFullscreen ( ) ; } else if ( document . mozCancelFullScreen ) { document . mozCancelFullScreen ( ) ; } else if ( document . webkitExitFullscreen ) { document . webkitExitFullscreen ( ) ; } else if ( document . msExitFullscreen ) { document . msExitFullscreen ( ) ; } } else { const elem = document . documentElement ; if ( elem . requestFullscreen ) { elem . requestFullscreen ( ) ; } else if ( elem . mozRequestFullScreen ) { elem . mozRequestFullScreen ( ) ; } else if ( elem . webkitRequestFullscreen ) { elem . webkitRequestFullscreen ( ) ; } else if ( elem . msRequestFullscreen ) { elem . msRequestFullscreen ( ) ; } } } ) ; document . documentElement . onfullscreenchange = ( ) => { if ( document . fullscreenElement ) { $ ( '#filter-div' ) . hide ( ) ; $ ( '#locations-div' ) . hide ( ) ; $ ( '#map-div' ) . width ( '100vw' ) ; $ ( '#map' ) . width ( '100vw' ) ; $ ( '#customFullscreenImage' ) . attr ( 'src' , '/images/icons/shrinkMap.svg' ) ; } else { $ ( '#filter-div' ) . show ( ) ; $ ( '#locations-div' ) . show ( ) ; $ ( '#map' ) . width ( '100%' ) ; $ ( '#customFullscreenImage' ) . attr ( 'src' , '/images/icons/growMap.svg' ) ; } } ; } }
Sets up map on initial page load.
Sets up map on initial page load .
// Event listener for when we zoom/move the maps which causes the bounds to change. // Re-sync locations list with new map bounds. // number of markers in map bounds has (probably) changed // On initialization, set global variable gCurrentViewportCenter to current center of map. // Initialize autosuggest/search field above the map. // Add map control for adding additional datasets. // Checking additional layers in the google maps legend will fetch and process the related data (if it does not exist // in datasetData) and push it to the secondary marker set for it to be visible. // Append the newly created legend with its event listener to top left of google Maps. // Add map control for custom fullscreen behavior. // (Regular fullsceen behavior of Google maps messes up Bootstrap modals, popovers, etc.) // From https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen2 /* Firefox */ /* Chrome, Safari and Opera */ /* IE/Edge */ /* Firefox */ /* Chrome, Safari and Opera */ /* IE/Edge */ // When browser goes full screen, show only nav bar and map. // When browser leaves full screen, show everything.