fix(map): fix tile size for retina-enabled tiles

fix #109

Author: landonreed

example-config.yml

@@ -33,6 +33,7 @@ map:
       subdomains: 'abcd'
       attribution: 'Map tiles: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
       maxZoom: 20
+      hasRetinaSupport: true
     - name: Stamen Toner Lite
       url: http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png
       attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'

lib/components/map/base-layers.js

@@ -1,3 +1,4 @@
+import L from 'leaflet'
 import React, { Component } from 'react'
 import { LayersControl, TileLayer } from 'react-leaflet'
 import { connect } from 'react-redux'
@@ -8,16 +9,23 @@ class BaseLayers extends Component {
     const { BaseLayer, Overlay } = LayersControl
     return (
       <LayersControl>
-        {baseLayers && baseLayers.map((l, i) => (
-          <BaseLayer
-            name={l.name}
-            checked={i === 0}
-            key={i}>
-            <TileLayer
-              {...l}
-              detectRetina />
-          </BaseLayer>
-        ))}
+        {baseLayers && baseLayers.map((l, i) => {
+          // Fix tile size/zoom offset: https://stackoverflow.com/a/37043490/915811
+          const retinaProps = L.Browser.retina && l.hasRetinaSupport
+            ? { tileSize: 512, zoomOffset: -1 }
+            : {}
+          return (
+            <BaseLayer
+              name={l.name}
+              checked={i === 0}
+              key={i}>
+              <TileLayer
+                {...l}
+                {...retinaProps}
+                detectRetina />
+            </BaseLayer>
+          )
+        })}
         {overlays && overlays.map((l, i) => (
           <Overlay
             name={l.name}

lib/components/map/base-map.js

@@ -283,25 +283,33 @@ class BaseMap extends Component {
         {/* Create the layers control, including base map layers and any
           * user-controlled overlays. */}
         <LayersControl position='topright'>
-          { /* base layers */
-            baseLayers && baseLayers.map((l, i) => (
-              <LayersControl.BaseLayer
-                name={l.name}
-                checked={i === 0}
-                key={i}>
-                <TileLayer
-                  url={l.url}
-                  attribution={l.attribution}
-                  maxZoom={l.maxZoom}
-                  detectRetina />
-              </LayersControl.BaseLayer>
-            ))
+          {/* 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
+                ? { tileSize: 512, zoomOffset: -1 }
+                : {}
+              return (
+                <LayersControl.BaseLayer
+                  name={layer.name}
+                  checked={i === 0}
+                  key={i}>
+                  <TileLayer
+                    url={layer.url}
+                    attribution={layer.attribution}
+                    maxZoom={layer.maxZoom}
+                    {...retinaProps}
+                    detectRetina />
+                </LayersControl.BaseLayer>
+              )
+            })
           }
 
-          { /* user-controlled overlay layers (e.g., vehicle locations, stops) */
+          {/* user-controlled overlay layers (e.g., vehicle locations, stops) */
             userControlledOverlays.map((child, i) => {
               return (
-                <LayersControl.Overlay key={i}
+                <LayersControl.Overlay
+                  key={i}
                   name={child.props.name}
                   checked={child.props.visible}
                 >