Some of us at Mapzen begrudgingly accept that a lot of the 1990s happened 20 years ago, and today it seems almost quaint that things went viral before the Internet was widespread. However, it’s not particularly surprising that the old-school Pokémon cards and video games of the mid-90s made the jump to augmented reality and virality in big way.

Combining AR games and check-in apps with a cultural touchstone seems obvious. But beyond the game play, what do you need to make the map in the style of Pokemon Go? In short, vector map data, map display tools, geolocation, and lots of points of interest.

(Thanks for colors, Patricio!)
Click to tilt and zoom in NYC!
Click to see SF

So what’s going on in this map? You can take a look in Tangram Play.

import

import:
    - https://tangrams.github.io/blocks/global.yaml
    - https://tangrams.github.io/blocks/geometry/tilt.yaml
    - https://tangrams.github.io/blocks/geometry/rotation.yaml
    - https://tangrams.github.io/blocks/lines/glow.yaml
    - https://tangrams.github.io/blocks/points/glow.yaml
    - https://tangrams.github.io/blocks/polygons/pixelate.yaml

Here we’re importing blocks of functionality. You can read more about Tangram Blocks here, but the goal is to import interesting modules and keep your scene file from getting huge and complicated. You can also import an existing scene file, like Refill or Zinc and draw things on top of it – more details are available in the Tangram docs.

textures

textures:
    pois:
        url: https://raw.githubusercontent.com/tangrams/refill-style-more-labels/gh-pages/images/poi_icons_18%402x.png
        filtering: mipmap
        sprites:
            # define sprites: [x origin, y origin, width, height]
            airport: [870, 0, 38, 38]
            aquarium: [732, 168, 38, 38]
            art-gallery: [640, 168, 38, 38]
            athletics-sports: [184, 168, 38, 38]
            atm: [918, 126, 38, 38]
            automotive-shop: [0, 168, 38, 38]
            bakery: [548, 168, 38, 38]
            bank: [964, 126, 38, 38]
            bar: [230, 168, 38, 38]

Tangram can work with images as well as vectors. (Remember sphere maps?) Textures and materials are cool and crazy – you can learn more about them in the documentation – but in this case we are cropping POI icons out of a larger image in one of the Mapzen house styles.

styles

Styles is where you tell polygons, lines, points, text what to do.

    water:
        base: polygons
        mix: [geometry-rotation, geometry-tilt, polygons-pixelate]
    earth:
        base: polygons
        mix: [geometry-rotation, geometry-tilt, polygons-pixelate]
    buildings:
        base: polygons
        mix: [geometry-rotation, geometry-tilt]
    buildings_outline:
        base: lines
        mix: [geometry-rotation, geometry-tilt, lines-glow]
    points:
        base: points
        mix: [geometry-rotation, geometry-tilt]
    icons:
        base: points
        texture: pois
        interactive: True
        mix: [geometry-rotation, geometry-tilt, points-glow]

Remember the import section? Here we are referencing them to make the polygons, lines and points do fun things like tilt, rotate, pulse and/or have a cool pixellated appearance. (If you comment out the mix line in roads, you’ll quickly see them stop rotating and tilting and, um, depixellate.)

We can also manipulate shaders here – in the geometry-tilt and geometry-rotation blocks, we are telling WebGL to tell your graphics card rotate and tilt between certain map zoom levels. You can more shader instructions in the geometry-rotation Tangram block – we could have added this into the scene file, but pulling it in as a block keeps the scene file less cluttered.

layers

layers:
    water:
        data: { source: mapzen }
        draw:
            polygons:
                style: water
                order: global.order
                color: [0.000, 0.651, 0.760]

    earth:
        data: { source: mapzen }
        draw:
            polygons:
                style: earth
                order: global.order
                color: [0.367, 0.610, 0.514]

    landuse:
        data: { source: mapzen }
        draw:
            polygons:
                style: landuse
                order: global.order
                color: [0.022, 0.755, 0.426]

Here we’re telling Tangram where to get the data from (in this case, the vector tiles, though this could also be your own un-tiled geojson files), what colors things should be, and what order they should be in. Much much more about layers here.

The pois and beer section is an interesting one. We are filtering out points from the vector tiles and looking for the ones that have names.

    pois:
        data: { source: mapzen}
        filter: { $geometry: [point], not: { kind: [pub, bar] } }
        has-name:
            filter: { name: true }
            # match 1:1 correlations between data and sprite name
            direct-match:
                filter: { area: false }
                draw:
                    icons:
                        color: [0.255,0.976,1.000]
                        sprite: function() { return feature.kind; }

    beer:
        data: { source: mapzen, layer: pois }
        filter: { kind: [pub, bar] }
        draw:
            beer-icons:
                #color: red
                color: [.5.,0.9,0.400]
                sprite: function() { return feature.kind; }

We’re referencing that icons style (which references that pois texture) to draw the icons, color them, and in the case of one that are bars, make the icons pulse.

Niantic seems to be using Google map data for streets and building geometry, and points of interest (POIs) that they collected from their previous games. However, there are issues with this data: Some of the POIs are already out of date, and coverage is spotty in rural areas. Open map data could make an AR game like Pokémon even better. OpenStreetMap and our Who’s On First gazetteer would allow an endless supply of POIs that could be updated more readily, and maintain the novelty of discovery within any AR game.

We used OSM POIs in this map, but we could have easily pulled in other information. Opening the data could expand the game and the user base: imagine using GTFS transit data to assign pokémon to bus stops, requiring that you had to take any eggs on bus rides to hatch. You could even use routing tools to determine the best paths between pokéstops and gyms.

We will leave it to you to come up with viral content, but rest assured that the mapping technology and POI data behind any AR app is well within your reach!