How large is the LHC

My newest project is titled HowLargeIsTheLHC.com. Its centerpiece is a Google Maps instance with an overlay of the shape of the Large Hadron Collider. The site tries to answer the stated question: How large is the Large Hadron Collider by showing it on a map. The key here is that the user can drag the map and thus move the collider overlay to any point on earth.

This is my first experience with the Google Maps API. Since I intend to build the app with React, I used the google-maps-react NPM package. The package nicely handles update events and the life-cycle of the map object. Me, as a user of the library, can work with plain React. However, during my development, I discovered two issues with the library.

1. onChanged events

The React component Map accepts a couple of callback properties, such as onClick or onDragstart. There is a group of callback properties that are called when map attributes change: onBounds_changed, onCenter_changed, onHeading_change, onMaptypeid_changed, onProjection_changed, onTilt_changed, and onZoom_changed.

The issue is that the documentation lists them as onAbcChanged instead of onAbc_changed. Using the correct property name in my code solves the problem. There is a pull request addressing the naming issue. By the time this article is published, the issue might already be fixed.

2. Map not updated on mapType property change

The second issue is that when the mapType property of the Map component is updated, the map is not actually changed. The mapType controls the type of the map: roadmap, terrain, satellite, hybrid. The reason is that the componentDidUpdate method does not detect changes to the mapType property.

I’m about the submit a pull request to add this feature to the google-maps-react library. In the meantime, one can extend the Map component:

class MyMap extends Map {
  componentDidUpdate(prevProps, prevState) {
    // Handle all other updates
    super.componentDidUpdate(prevProps, prevState);

    // Handle mapType
    if (this.props.mapType !== prevProps.mapType) {
      this.map.setMapTypeId(this.props.mapType);
    }

  }
}