Adding Commute Time Maps to Your Real Estate Platform

One of the biggest factors in home buying decisions is commute time. In this guide, I'll show you how to add powerful commute time visualization to your real estate platform, helping your users find homes within their ideal travel time to work, schools, or any important location.

What We'll Build

We'll create a commute time overlay that lets home buyers:

Enter their workplace or important location
Set their maximum acceptable commute time
See all areas reachable within that time
Filter properties based on commute time

This feature will integrate seamlessly with your existing property listings and help buyers make more informed decisions. For background on how travel time mapping works, see our introduction to travel time mapping.

Setting Up the Dependencies

First, let's set up Google Maps for our property map:

Get a Google Maps API Key:

Go to the Google Cloud Console
Create a new project or select an existing one
Enable the Maps JavaScript API and Geocoding API
Create credentials and set up restrictions

Install Required Package:

bash
npm install @react-google-maps/api

Implementing the Commute Time Feature

Here's how to add commute time visualization to your property map:

typescript
interface CommuteTimeProps {
  properties: Property[];  // Your property listings
  onCommuteFilter: (filteredProperties: Property[]) => void;
}
 
const CommuteTimeMap: React.FC<CommuteTimeProps> = ({ properties, onCommuteFilter }) => {
  const [commuteLocation, setCommuteLocation] = useState('');
  const [maxCommuteTime, setMaxCommuteTime] = useState(30);
  const [commutePolygon, setCommutePolygon] = useState(null);
  const [loading, setLoading] = useState(false);
 
  const fetchCommuteArea = async () => {
    try {
      setLoading(true);
      
      const data = await fetch("https://radiusmapper.com/api/search", {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${process.env.RADIUS_MAPPER_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          address: commuteLocation,
          travelTimeMinutes: maxCommuteTime,
          transportMode: "driving",
          outputFormat: "geojson"
        })
      }).then(res => res.json());
 
      // Convert GeoJSON to Google Maps polygon
      const paths = data.boundaryGeojson.features[0].geometry.coordinates[0].map(
        ([lng, lat]) => ({ lat, lng })
      );
      setCommutePolygon(paths);
 
      // Filter properties within commute time
      const filteredProperties = properties.filter(property => 
        isPointInPolygon(property.coordinates, paths)
      );
      onCommuteFilter(filteredProperties);
 
    } catch (error) {
      console.error('Error fetching commute area:', error);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <div className="relative">
      <div className="absolute top-4 left-4 z-10 bg-white p-4 rounded-lg shadow-lg">
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Work Location</label>
          <Autocomplete
            onLoad={autocomplete => setAutocomplete(autocomplete)}
            onPlaceChanged={() => {
              const place = autocomplete?.getPlace();
              setCommuteLocation(place?.formatted_address || '');
            }}
          >
            <input
              type="text"
              placeholder="Enter your workplace"
              className="w-full p-2 border rounded"
            />
          </Autocomplete>
        </div>
 
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">
            Max Commute Time: {maxCommuteTime} minutes
          </label>
          <input
            type="range"
            min="5"
            max="60"
            value={maxCommuteTime}
            onChange={(e) => setMaxCommuteTime(parseInt(e.target.value))}
            className="w-full"
          />
        </div>
 
        <button
          onClick={fetchCommuteArea}
          disabled={loading || !commuteLocation}
          className="w-full bg-blue-500 text-white p-2 rounded disabled:opacity-50"
        >
          {loading ? 'Calculating...' : 'Show Commutable Areas'}
        </button>
      </div>
 
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '600px' }}
        center={defaultCenter}
        zoom={11}
      >
        {/* Property Markers */}
        {properties.map(property => (
          <Marker
            key={property.id}
            position={{
              lat: property.coordinates[1],
              lng: property.coordinates[0]
            }}
            icon={{
              url: isPropertyWithinPolygon(property, commutePolygon)
                ? '/marker-green.png'
                : '/marker-gray.png'
            }}
          />
        ))}
 
        {/* Commute Time Polygon */}
        {commutePolygon && (
          <Polygon
            paths={commutePolygon}
            options={{
              fillColor: '#3bb2d0',
              fillOpacity: 0.3,
              strokeColor: '#3bb2d0',
              strokeWeight: 2
            }}
          />
        )}
      </GoogleMap>
    </div>
  );
};

Adding Property Filtering

To make this feature truly useful for home buyers, let's add property filtering based on commute time:

typescript
const isPropertyWithinPolygon = (property: Property, polygon: LatLng[] | null) => {
  if (!polygon) return true;
  
  const point = {
    lat: property.coordinates[1],
    lng: property.coordinates[0]
  };
  
  return google.maps.geometry.poly.containsLocation(
    point,
    new google.maps.Polygon({ paths: polygon })
  );
};
 
// In your property list component:
const PropertyList: React.FC<{ properties: Property[] }> = ({ properties }) => {
  const [filteredProperties, setFilteredProperties] = useState(properties);
 
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <CommuteTimeMap
        properties={properties}
        onCommuteFilter={setFilteredProperties}
      />
      
      <div className="space-y-4">
        {filteredProperties.map(property => (
          <PropertyCard
            key={property.id}
            property={property}
          />
        ))}
      </div>
    </div>
  );
};

Performance Optimization for Real Estate

When working with large property datasets, consider these optimizations:

typescript
// Cache commute time results by location
const commuteCache = new Map<string, GeoJSON.FeatureCollection>();
 
const getCachedCommuteArea = async (location: string, time: number) => {
  const cacheKey = `${location}-${time}`;
  if (commuteCache.has(cacheKey)) {
    return commuteCache.get(cacheKey);
  }
 
  const result = await fetchCommuteArea(location, time);
  commuteCache.set(cacheKey, result);
  return result;
};
 
// Cluster property markers for better performance
const [clusters, setClusters] = useState([]);
 
useEffect(() => {
  const supercluster = new Supercluster({
    radius: 40,
    maxZoom: 16
  });
 
  supercluster.load(properties.map(property => ({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: property.coordinates
    },
    properties: { id: property.id }
  })));
 
  setClusters(supercluster.getClusters([-180, -85, 180, 85], map.getZoom()));
}, [properties, map.getZoom()]);

User Experience Enhancements

Consider adding these features to make your commute time search more useful:

Multiple Commute Locations:

typescript
const [commuteLocations, setCommuteLocations] = useState([
  { address: '', maxTime: 30 }
]);
 
// Show properties that match ALL commute requirements
const matchesAllCommutes = (property: Property) => {
  return commuteLocations.every(location =>
    isPropertyWithinPolygon(property, getCommutePolygon(location))
  );
};

Time-Based Calculations:

typescript
const [departureTime, setDepartureTime] = useState('09:00');
 
// Include departure time in API request
const params = {
  ...commuteParams,
  departureTime: departureTime
};

If you prefer Mapbox over Google Maps, check out our companion guide on building commute maps with Mapbox. For a no-code approach, you can also use RadiusMapper embeds to add interactive maps to any website.

Next Steps

To further enhance your real estate platform's commute time feature:

Add commute time estimates to property cards
Show nearby transit stations and bus stops
Include traffic pattern analysis
Add alternative transport modes (walking, cycling)
Save favorite commute searches

Best Practices for Real Estate Implementation

Clear Visualization:

Use different colors for properties within/outside commute range
Show commute time estimates on property hover
Include traffic pattern indicators

Search Integration:

Add commute time as a filter in property search
Save commute preferences in user profiles
Allow comparison of multiple properties by commute time

Mobile Optimization:

Ensure touch-friendly controls
Optimize map performance for mobile devices
Add responsive layout for filters

Check out our API docs for more details on implementing these features!

Need help implementing commute time search in your real estate platform? Feel free to reach out with questions! 🏠

Real Estate Commute Map with Google Maps and Radius Mapper API