Dual mode pin-map, markers for < 2000 rows, tile overlay > 2000

frontend/src/visualizations/PinMap.jsx

@@ -64,6 +64,11 @@ export default class PinMap extends Component {
     }
 
     componentDidMount() {
+        if (typeof google === undefined) {
+            setTimeout(() => this.componentDidMount(), 500);
+            return;
+        }
+
         try {
             let element = ReactDOM.findDOMNode(this);
 
@@ -81,14 +86,31 @@ export default class PinMap extends Component {
                 scrollwheel: false
             };
 
-            let markerImageMapType = new google.maps.ImageMapType({
-                getTileUrl: this.getTileUrl.bind(this, settings),
-                tileSize: new google.maps.Size(256, 256)
-            });
-
             let map = this.map = new google.maps.Map(element, mapOptions);
 
-            map.overlayMapTypes.push(markerImageMapType);
+            if (data.rows.length < 2000) {
+                let tooltip = new google.maps.InfoWindow();
+                let latColIndex = settings.map.latitude_dataset_col_index;
+                let lonColIndex = settings.map.longitude_dataset_col_index;
+                for (let row of data.rows) {
+                    let marker = new google.maps.Marker({
+                        position: new google.maps.LatLng(row[latColIndex], row[lonColIndex]),
+                        map: map,
+                        icon: "/app/img/pin.png"
+                    });
+                    marker.addListener("click", () => {
+                        let tooltipElement = document.createElement("div");
+                        ReactDOM.render(<ObjectDetailTooltip row={row} cols={data.cols} />, tooltipElement);
+                        tooltip.setContent(tooltipElement);
+                        tooltip.open(map, marker);
+                    });
+                }
+            } else {
+                map.overlayMapTypes.push(new google.maps.ImageMapType({
+                    getTileUrl: this.getTileUrl.bind(this, settings),
+                    tileSize: new google.maps.Size(256, 256)
+                }));
+            }
 
             map.addListener("center_changed", () => {
                 let center = map.getCenter();
@@ -105,10 +127,24 @@ export default class PinMap extends Component {
     }
 
     componentDidUpdate() {
-        google.maps.event.trigger(this.map, "resize");
+        if (typeof google !== "undefined") {
+            google.maps.event.trigger(this.map, "resize");
+        }
     }
 
     render() {
         return <div {...this.props}>x</div>;
     }
 }
+
+const ObjectDetailTooltip = ({ row, cols }) =>
+    <table>
+        <tbody>
+            { cols.map((col, index) =>
+                <tr>
+                    <td>{col.display_name}</td>
+                    <td>{row[index]}</td>
+                </tr>
+            )}
+        </tbody>
+    </table>

src/metabase/api/tiles.clj

@@ -15,13 +15,10 @@
 
 (def ^:private ^:const tile-size             256.0)
 (def ^:private ^:const pixel-origin          (float (/ tile-size 2)))
-(def ^:private ^:const pin-size              2)
+(def ^:private ^:const pin-size              6)
 (def ^:private ^:const pixels-per-lon-degree (float (/ tile-size 360)))
 (def ^:private ^:const pixels-per-lon-radian (float (/ tile-size (* 2 Math/PI))))
 
-(def ^:private ^:const pin-filename          "frontend_client/app/img/pin.png")
-(def ^:private pin-image                     (ImageIO/read (io/resource pin-filename)))
-
 ;;; # ------------------------------------------------------------ UTIL FNS ------------------------------------------------------------
 
 (defn- degrees->radians ^double [^double degrees]
@@ -63,8 +60,9 @@
 (defn- ^BufferedImage create-tile [zoom points]
   (let [num-tiles (bit-shift-left 1 zoom)
         tile      (BufferedImage. tile-size tile-size (BufferedImage/TYPE_INT_ARGB))
-        graphics  (.getGraphics tile)]
-    (.setColor graphics Color/red)
+        graphics  (.getGraphics tile)
+        color-blue (new Color 76 157 230)
+        color-white (Color/white)]
     (try
       (doseq [[^double lat, ^double lon] points]
         (let [sin-y      (-> (Math/sin (degrees->radians lat))
@@ -82,7 +80,10 @@
               tile-pixel {:x (mod (map-pixel :x) tile-size)
                           :y (mod (map-pixel :y) tile-size)}]
           ;; now draw a "pin" at the given tile pixel location
-          (.drawImage graphics pin-image (- (tile-pixel :x) 14) (- (tile-pixel :y) 24) nil nil)))
+          (.setColor graphics color-white)
+          (.fillRect graphics (tile-pixel :x) (tile-pixel :y) pin-size pin-size)
+          (.setColor graphics color-blue)
+          (.fillRect graphics (+ 1 (tile-pixel :x)) (+ 1 (tile-pixel :y)) (- pin-size 2) (- pin-size 2))))
       (catch Throwable e
         (.printStackTrace e))
       (finally