fix(overlay): Fix conflict between stops-layer rendering and transitive overlay

Author: David Emory

lib/components/map/stops-overlay.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { FeatureGroup, MapLayer, Marker, Popup } from 'react-leaflet'
+import { FeatureGroup, MapLayer, Popup, CircleMarker } from 'react-leaflet'
 import { Button, ButtonGroup } from 'react-bootstrap'
 import { divIcon } from 'leaflet'
 
@@ -28,7 +28,7 @@ class StopsOverlay extends MapLayer {
 
   _refreshStops () {
     if (this.context.map.getZoom() < this.props.minZoom) {
-      this.props.clearStops()
+      this.forceUpdate()
       return
     }
 
@@ -39,7 +39,7 @@ class StopsOverlay extends MapLayer {
       minLon: bounds.getWest(),
       maxLon: bounds.getEast()
     }
-    this.props.refreshStops(params)
+    setTimeout(() => { this.props.refreshStops(params) }, 300)
   }
 
   createLeafletElement () {
@@ -57,24 +57,17 @@ class StopsOverlay extends MapLayer {
     return (
       <FeatureGroup>
         {stops.map((stop) => {
-          const icon = divIcon({
-            iconSize: [20, 20],
-            iconAnchor: [12, 15],
-            popupAnchor: [1, -6],
-            html: `<span class="fa-stack" style="opacity: 1.0" style={{ background: #00f }}>
-                    <i class="fa fa-circle fa-stack-1x" style="color: #ffffff"></i>
-                    <i class="fa fa-circle-o fa-stack-1x" style="color: #000000"></i>
-                  </span>`,
-            className: ''
-          })
-
           const idArr = stop.id.split(':')
 
           return (
-            <Marker
-              icon={icon}
+            <CircleMarker
               key={stop.id}
-              position={[stop.lat, stop.lon]}
+              center={[stop.lat, stop.lon]}
+              radius={4}
+              fillOpacity={1}
+              fillColor='#fff'
+              color='#000'
+              weight={1.5}
             >
               <Popup>
                 <div>
@@ -103,7 +96,7 @@ class StopsOverlay extends MapLayer {
                   </div>
                 </div>
               </Popup>
-            </Marker>
+            </CircleMarker>
           )
         })}
       </FeatureGroup>