Add Custom Layers to Ride with GPS

index.js

// ==UserScript==
// @name         Ride with GPS Custom Layers
// @namespace    http://tampermonkey.net/
// @version      0.1
// @author       https://reuben.science
// @match        https://ridewithgps.com/**/*
// @grant        none
// ==/UserScript==

const layers = [{
    id: 'rwgps2',
    name: 'RWGPS 2',
    maxZoom: 18,
    minZoom: 1,
    enabled: true,
    type: 'osm',
    url: '//tile-{s}.ridewithgps.com/rwgps/',
    routingService: 'rwgps',
    attribution: '© OpenStreetMap contributors'
  },
  {
    id: 'osm2',
    name: 'OSM 2',
    maxZoom: 18,
    minZoom: 3,
    enabled: true,
    type: 'osm',
    url: '//{s}.tile.openstreetmap.org/',
    routingService: 'rwgps',
    attribution: '© OpenStreetMap contributors'
  },
  {
    id: 'osmCycle2',
    name: 'OSM Cycle 2',
    key: 'a1f31ce03c41486894ffd9ed393ec1ea',
    maxZoom: 18,
    minZoom: 3,
    enabled: true,
    type: 'osm',
    url: '//{s}.tile.thunderforest.com/cycle/',
    routingService: 'rwgps',
    attribution: 'Maps © Thunderforest, Data © OpenStreetMap contributors'
  }
]

const heatmap = {
  id: 'heatMap',
  name: 'Heatmap',
  maxZoom: 19,
  minZoom: 3,
  enabled: true,
  type: 'osm',
  url: '//heatmap.ridewithgps.com/normalized/'
}

const inject = () => {
  const ids = layers.map(layer => {
    const newOverlay = new window.rwgps.Overlay(layer)
    window.Routes.activeMap.overlays[newOverlay.opts.id] = newOverlay
    window.Routes.activeMap.gmap.mapTypes.set(newOverlay.opts.id, newOverlay.getOverlayObj())

    return newOverlay.opts.id
  })

  window.Routes.activeMap.onOverlayChanged(false)
  window.Routes.activeMap.gmap.setOptions({
    disableDefaultUI: true
  })

  window.Routes.activeMap.gmap.mapTypeControlOptions.mapTypeIds.unshift(...ids)

  window.Routes.activeMap.gmap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: window.Routes.activeMap.gmap.mapTypeControlOptions
  })

  document.head.insertAdjacentHTML('beforeend', `<style>[class^="OverlayPicker-"]{display:none!important}</style>`)
}

window.addEventListener('load', () => {
  inject()

  window.Routes.activeMap.initializeHeatLayer = function() {
    this.heatLayer = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        return heatmap.url + zoom + '/' + coord.x + '/' + coord.y + '.png'
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: true,
      alt: heatmap.alt,
      name: heatmap.name,
      maxZoom: heatmap.maxZoom
    })
    this.heatLayer.setOpacity(0.7)
  }

  window.Routes.activeMap.hideHeatLayer = function() {
    this.heatLayer = undefined
    this.gmap.overlayMapTypes.setAt(0, null)
    _.defer(() => {
      this.drawCoursePointIcons(this.activeRoute.coursePoints())
    })
  }

  $('[class^=HeatLayerToggle]')[0].addEventListener('click', event => {
    window.Routes.activeMap.heatLayer
      ? window.Routes.activeMap.hideHeatLayer() 
      : window.Routes.activeMap.showHeatLayer()
    event.preventDefault()
    event.stopPropagation()

    return false
  })
}, false)