Find Your Park and Some Rock ‘N’ Roll with Greta Van Fleet

Featuring special guests Mapbox and Foursquare

Image for post
Image for post

Finding Your Park

Video created using Mock
let post = userMarker._poslet features = this.map.queryRenderedFeatures(
[pos.x, pos.y], {
filter: ['==', 'class', 'park']
}
)
if (features.length != 0) {
// Park!
}
request({
url: 'https://api.foursquare.com/v2/venues/search',
method: 'GET',
qs: {
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET',
ll: `${latitude},${longitude}`,
categoryId: '4bf58dd8d48988d163941735',
v: '20181002',
limit: 10,
intent: 'browse',
radius: 10000
}
}, function(error, response, body) {
if (error) {
// do something
} else {
// parks!
}
})
fetch(`https://api.mapbox.com/directions/v5/mapbox/walking/${userLon},${userLat};${parkLon},${parkLat}?geometries=geojson&access_token=YOUR_ACCESS_TOKEN`)
.then(response => {
return response.json()
})
.then(data => {
let route = data.routes[0].geometry.coordinates
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': route,
}
}
})
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'paint': {
'line-color': '#65926B',
'line-width': 3
}
})
})

Design

Image for post
Image for post
Early Figma screens

Marketing

Image for post
Image for post
You get a map! You get a map! You get a map!
https://api.mapbox.com/styles/v1/USERNAME/STYLE_ID/static/${parkLng},${parkLat},16/1080x1080?access_token=YOUR_ACCESS_TOKEN

Thanks

Image for post
Image for post
Thanks to the fans who weren’t afraid to head outside

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store