@deck.gl/google-maps

What is @deck.gl/google-maps?

@deck.gl/google-maps is a package that integrates Deck.gl visualizations with Google Maps. It allows developers to create high-performance, WebGL-powered visualizations on top of Google Maps, leveraging the rich feature set of Deck.gl for rendering large-scale data sets.

What are @deck.gl/google-maps's main functionalities?

Overlay Deck.gl Layers on Google Maps

This feature allows you to overlay Deck.gl layers, such as a ScatterplotLayer, on a Google Map. The code sample demonstrates how to create a Google Maps instance and overlay a scatterplot layer on it.

const {GoogleMapsOverlay} = require('@deck.gl/google-maps');
const {ScatterplotLayer} = require('@deck.gl/layers');

const overlay = new GoogleMapsOverlay({
  layers: [
    new ScatterplotLayer({
      id: 'scatterplot-layer',
      data: [
        {position: [-122.45, 37.78], size: 100},
        {position: [-122.46, 37.76], size: 200}
      ],
      getPosition: d => d.position,
      getRadius: d => d.size,
      getColor: [255, 0, 0]
    })
  ]
});

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.78, lng: -122.45},
  zoom: 12
});

overlay.setMap(map);

Interactive Data Visualization

This feature enables interactive data visualization on Google Maps using Deck.gl layers. The code sample shows how to create a HexagonLayer that visualizes data with interactive tooltips on hover.

const {GoogleMapsOverlay} = require('@deck.gl/google-maps');
const {HexagonLayer} = require('@deck.gl/aggregation-layers');

const overlay = new GoogleMapsOverlay({
  layers: [
    new HexagonLayer({
      id: 'hexagon-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      getPosition: d => d.COORDINATES,
      radius: 1000,
      elevationScale: 4,
      extruded: true,
      pickable: true,
      onHover: ({object, x, y}) => {
        const tooltip = `${object.position.join(', ')}
Count: ${object.points.length}`;
        /* Show tooltip at (x, y) */
      }
    })
  ]
});

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.78, lng: -122.45},
  zoom: 12
});

overlay.setMap(map);

Other packages similar to @deck.gl/google-maps

react-google-maps

react-google-maps is a library for integrating Google Maps into React applications. It provides a set of React components for Google Maps, but it does not offer the advanced WebGL-powered visualizations that @deck.gl/google-maps does.

google-maps-react

google-maps-react is another library for integrating Google Maps with React. It offers a simple way to embed Google Maps in React applications and provides basic map functionalities. However, it lacks the high-performance, large-scale data visualization capabilities of @deck.gl/google-maps.

mapbox-gl

mapbox-gl is a powerful library for interactive, customizable maps using WebGL. While it offers advanced visualization capabilities similar to Deck.gl, it is designed for use with Mapbox maps rather than Google Maps.

README

@deck.gl/google-maps

Use deck.gl as a custom Google Maps overlay.

See deck.gl for documentation.

Changelog

deck.gl [8.9.0-beta.2] - Feb 17 2023

• DeckRenderer to TypeScript (#7656)
• Fix autoHighlight crash when TileLayer is used as a sub layer (#7650)
• TypeScript: fix some TS erros (#7652)
• chore: bump loaders.gl to 3.3.1 (#7658)
• IconManager preserve aspect ratio when auto packing (#7651)
• Move core bundle source into src directory (#7645)