react-native-maps – React Native Mapview component for iOS + Android

On a React Native project I’m currently working on, I’m implementing native (vector) mapviews. Gladly there’s react-native-maps by AirBnB to handle it all.

import React, { Component } from 'react';
import MapView from 'react-native-maps';

class MapViewExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
      markers: [
      ],
    };
  }

  onRegionChange = (region) => {
    this.setState({ region });
  }

  onMapPress = (e) => {
    this.setState({
      markers: [
        ...this.state.markers,
        {
          coordinate: e.nativeEvent.coordinate,
          key: `marker_${this.state.markers.length}`,
        },
      ],
    });
  }

  render() {
    return (
      <MapView
        region={this.state.region}
        onRegionChange={this.onRegionChange}
        onPress={this.onMapPress}
      >
        {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
            key={marker.key}
          />
        ))}
      </MapView>
    );
  }

}

By default uses Mapkit on iOS, and Google Maps on Android. It’s also possible to use Google Maps on iOS.

react-native-maps

MapSCII – ASCII Map Renderer for the Console

Color me impressed:

MapSCII is a Braille & ASCII map renderer for your console.

There’s a live version accessible via telnet on mapscii.me:

$ telnet mapscii.me

Panning and zooming using the mouse is supported.

At the base is a vector tileset (from OpenMapTiles), with a Node app on top (written in CoffeeScript) sporting an ASCII renderer. The source of it all is available on GitHub.

MapSCII (GitHub) →

A New Kind of Map: It’s About Time

The Mapbox Team:

Recently, we’ve been thinking of a visualization that cuts directly to the way in which people make decisions about where to go: what would a map look like if we swept the physical world away completely, in favor of the time needed to move around it?

We’ve been prototyping a simple discovery tool on this idea. We take search results from the Foursquare API and array them around the user at the center

And yes, that prototype is publicly available 🙂

A New Kind of Map: It’s About Time →
TimeMap Prototype →

Upgrades for Google Maps Street View

Google is rolling out upgraded cars with upgraded camera rigs to capture Street View imagery.

The new camera rig will help capture photos that are clearer, higher in resolution, and more vivid in color. Like the old design, the rig will attach to a vehicle’s roof, but the smaller ball on top now features just seven cameras (down from 15) fitted with 20 megapixel sensors. The rig also plays host to two cameras that take still HD photos, and two LIDARs.

For comparision, here’s the evolution of the Google Street View cars:

(via)

Sidenote: Check out “Address is Approximate”. Even 6 years later this video still gives me goosebumps.

Create interactive SVG maps in React with react-simple-maps

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson.

react-simple-maps

Whilst looking further I’ve stumbled upon these two Medium posts detailing an implementation:

D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information.

D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser.

D3 in Depth: Rendering Geographic Information →

Uber Visualization Nights: deck.gl

During the first “Uber Visualization Night” on June 20, 2017, Nicolas Belmonte from Uber’s Data Visualization team gave a nice introduction to the aforementioned deck.gl:

Every Solar Eclipse Happening in your Lifetime

The Washington Post has created a nice article on the upcoming solar eclipse that will cross the United States

On Aug. 21, a total solar eclipse will be visible from the contiguous United States. It’ll be the first to traverse coast to coast in nearly a century. There will be 69 total solar eclipses visible from somewhere on the planet in the next 100 years, but only a few will be visible from North America. See how many total solar eclipses are left in your lifetime

The article also contains some a very neat visualisation of all upcoming eclipses across the glove.

Here’s every total solar eclipse happening in your lifetime →

Sidenote: VOX have created a nice piece on why a total solar eclipse, like the upcoming one, is such a big deal: