Optimizing Map Load Times

1. Implement Lazy Loading

Lazy loading defers the loading of non-critical resources until they're needed. This dramatically reduces initial page load time.

<!-- Standard embed -->
<iframe src="https://mapembed.com/map/abc123"></iframe>

<!-- Lazy-loaded embed -->
<iframe 
  data-src="https://mapembed.com/map/abc123" 
  loading="lazy"
  class="lazy-map">
</iframe>

<script>
  // Load map when it enters viewport
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const iframe = entry.target;
        iframe.src = iframe.dataset.src;
        observer.unobserve(iframe);
      }
    });
  });
  
  document.querySelectorAll('.lazy-map').forEach(map => {
    observer.observe(map);
  });
</script>

2. Optimize Marker Data

Sending thousands of markers on initial load is a performance killer. Here's how to optimize:

Strategies for Large Datasets:

• Clustering: Group nearby markers into clusters (reduces 10,000 markers to ~50 clusters)
• Server-side filtering: Only fetch markers in current viewport
• Progressive loading: Load high-priority markers first, then fill in details
• Data compression: Use compressed JSON or binary formats

// Fetch only visible markers
const loadVisibleMarkers = async (bounds) => {
  const response = await fetch(
    `https://api.mapembed.com/markers?` +
    `sw=${bounds.southwest.lat},${bounds.southwest.lng}&` +
    `ne=${bounds.northeast.lat},${bounds.northeast.lng}`
  );
  const markers = await response.json();
  map.addMarkers(markers);
};

// Update on map movement
map.on('moveend', () => {
  loadVisibleMarkers(map.getBounds());
});

3. Minimize Asset Sizes

Every kilobyte counts. Optimize all map-related assets:

4. Leverage CDNs and Caching

Content Delivery Networks (CDNs) serve your map assets from servers geographically close to your users, dramatically reducing latency.

MapEmbed's Built-in CDN

All MapEmbed embeds automatically use our global CDN with 200+ edge locations. No configuration needed!

# .htaccess - Cache static map assets
<FilesMatch "\.(jpg|jpeg|png|gif|svg|webp|ico)$">
  Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

<FilesMatch "\.(js|css)$">
  Header set Cache-Control "max-age=86400, public"
</FilesMatch>

5. Implement Code Splitting

Don't load advanced map features until users actually need them.

// Load 3D rendering only when user enables 3D mode
document.getElementById('enable3D').addEventListener('click', async () => {
  // Dynamically import 3D module (only loads when clicked)
  const { init3DView } = await import('./3d-renderer.js');
  init3DView(map);
});

// Load drawing tools only when needed
const enableDrawing = async () => {
  const { DrawingManager } = await import('./drawing-tools.js');
  new DrawingManager(map);
};

6. Monitor Real-World Performance

Optimization is an ongoing process. Track these key metrics: