Static assets

.gitignore

@@ -12,3 +12,5 @@ key.pem
 .DS_Store
 npm-debug.log
 secrets.txt
+
+.env

.travis.yml

@@ -1,15 +1,3 @@
 language: node_js
 node_js:
   - "6"
-before_deploy: npm run build
-deploy:
-  provider: s3
-  access_key_id: $S3_ACCESS_KEY_ID
-  secret_access_key: $S3_SECRET_KEY
-  bucket: "digidem-staging"
-  skip_cleanup: true
-  upload-dir: ${TRAVIS_REPO_SLUG}/${TRAVIS_BRANCH}
-  local_dir: build
-  detect_encoding: true
-  on:
-    all_branches: true

bin/build_style.js

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+
+const request = require('request')
+const traverse = require('traverse')
+const uniq = require('lodash/uniq')
+const urlencode = require('urlencode')
+const fs = require('fs')
+const path = require('path')
+const pump = require('pump')
+const rimraf = require('rimraf')
+const mkdirp = require('mkdirp')
+
+const CONFIG = require('../config.json')
+const markerColors = CONFIG.colors
+markerColors.push(CONFIG.defaultColor)
+
+const markerPath = path.join(__dirname, '..', 'svg')
+const marker = fs.readFileSync(path.join(markerPath, 'marker.svg'), 'utf8')
+const markerHover = fs.readFileSync(path.join(markerPath, 'marker-hover.svg'), 'utf8')
+
+require('dotenv').config()
+
+const MAPBOX_TOKEN = process.env.MAPBOX_TOKEN
+const outputDir = path.join(process.cwd(), process.argv[2])
+rimraf.sync(outputDir)
+mkdirp.sync(outputDir)
+
+const mapStyle = CONFIG.defaultMapStyle
+const mapStyleBaseUrl = mapStyle.replace(/^mapbox:\/\/styles\//, 'https://api.mapbox.com/styles/v1/')
+const mapStyleUrl = mapStyleBaseUrl + '?access_token=' + MAPBOX_TOKEN
+
+const RANGES = ['0-255', '65280-65535', '65024-65279', '12288-12543', '65024-65279']
+
+let pending = markerColors.length * 2
+markerColors.forEach(function (color) {
+  const markerBaseName = 'marker-' + color.replace('#', '')
+  const coloredMarker = marker.replace('{{fillColor}}', color)
+  const coloredMarkerHover = markerHover.replace('{{fillColor}}', color)
+  request.put({
+    url: mapStyleBaseUrl + '/sprite/' + markerBaseName + '?access_token=' + MAPBOX_TOKEN,
+    body: coloredMarker
+  }, done)
+  request.put({
+    url: mapStyleBaseUrl + '/sprite/' + markerBaseName + '-hover?access_token=' + MAPBOX_TOKEN,
+    body: coloredMarkerHover
+  }, done)
+})
+
+function done (err, res, body) {
+  if (err) return console.error(err)
+  if (--pending === 0) {
+    request(mapStyleUrl, onStyle)
+  }
+}
+
+function onStyle (err, res, body) {
+  if (err) return console.error(err)
+  const style = JSON.parse(body)
+  const fonts = []
+  traverse(style).forEach(function (x) {
+    if (this.key === 'text-font') {
+      if (Array.isArray(x)) {
+        fonts.push.apply(fonts, x)
+      } else if (typeof x === 'string') {
+        fonts.push(x)
+      } else {
+        traverse(x).forEach(fontsFromStops)
+      }
+    }
+  })
+  function fontsFromStops (x) {
+    if (typeof x === 'string') {
+      fonts.push(x)
+    }
+  }
+  const fontStack = uniq(fonts).map(s => urlencode(s)).join(',')
+  style.glyphs = 'mapfilter://fonts/{range}.pbf?stack={fontstack}'
+  const originalSprite = style.sprite
+  style.sprite = 'mapfilter://sprites/sprite'
+  fs.writeFileSync(path.join(outputDir, 'style.json'), JSON.stringify(style, null, 4))
+  downloadFonts(fontStack, done)
+  downloadSprites(originalSprite, done)
+  function done () {
+    console.log('DONE!')
+  }
+}
+
+function downloadFonts (fontStack, cb) {
+  mkdirp.sync(path.join(outputDir, 'fonts'))
+  let pending = RANGES.length
+  RANGES.forEach(function (range) {
+    const url = 'https://api.mapbox.com/fonts/v1/gmaclennan/' +
+      fontStack + '/' + range + '.pbf' + '?access_token=' + MAPBOX_TOKEN
+    const filepath = path.join(outputDir, 'fonts', range + '.pbf')
+    const req = request({
+      url: url,
+      gzip: true
+    })
+    pump(req, fs.createWriteStream(filepath), done)
+  })
+  function done (err) {
+    if (err) return console.error(err)
+    if (--pending === 0) cb(err)
+  }
+}
+
+function downloadSprites (sprite, cb) {
+  mkdirp.sync(path.join(outputDir, 'sprites'))
+  const postfixes = ['.png', '.json', '@2x.png', '@2x.json']
+  let pending = postfixes.length
+  postfixes.forEach(function (postfix) {
+    const url = sprite.replace(/^mapbox:\/\/sprites\//, 'https://api.mapbox.com/styles/v1/') +
+      '/sprite' + postfix + '?access_token=' + MAPBOX_TOKEN + '&cacheBust=' + Date.now()
+    const filepath = path.join(outputDir, 'sprites', 'sprite' + postfix)
+    pump(request(url), fs.createWriteStream(filepath), done)
+  })
+  function done (err) {
+    if (err) return console.error(err)
+    if (--pending === 0) cb(err)
+  }
+}

config.json

@@ -9,6 +9,7 @@
     "zoom": 10
   },
   "mapboxToken": "pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg",
+  "defaultMapStyle": "mapbox://styles/gmaclennan/cio7mcryg0015akm9b6wur5ic",
   "templates": [],
   "colors": [
     "#1f78b4",