refactor(base-map): handle non-retina displays

Author: landonreed

Diff for: lib/components/map/base-map.js

@@ -298,20 +298,29 @@ class BaseMap extends Component {
         <LayersControl position='topright'>
           {/* base layers */
             baseLayers && baseLayers.map((layer, i) => {
-              // Fix tile size/zoom offset: https://stackoverflow.com/a/37043490/915811
-              const retinaProps = L.Browser.retina && layer.hasRetinaSupport
+              // If layer supports retina tiles, set tileSize and zoomOffset
+              // (see https://stackoverflow.com/a/37043490/915811).
+              // Otherwise, use detectRetina to request more tiles (scaled down):
+              // https://leafletjs.com/reference-1.6.0.html#tilelayer-detectretina
+              const retinaProps = layer.hasRetinaSupport
                 ? { tileSize: 512, zoomOffset: -1 }
-                : {}
+                : { detectRetina: true }
+              // If Browser doesn't support retina, remove @2x from URL so that
+              // retina tiles are not requested.
+              const url = L.Browser.retina
+                ? layer.url
+                : layer.url.replace('@2x', '')
               return (
                 <LayersControl.BaseLayer
                   name={layer.name}
                   checked={i === 0}
                   key={i}>
                   <TileLayer
-                    url={layer.url}
+                    url={url}
                     attribution={layer.attribution}
                     maxZoom={layer.maxZoom}
-                    {...retinaProps} />
+                    {...retinaProps}
+                  />
                 </LayersControl.BaseLayer>
               )
             })