初めてのJS
OpenStreetMap上でごにょごにょしたくなったので、Mapboxで遊ぶことにしました。
ということで、さっそくMapbox.jsの公式サンプルコードRotating and controllable markerを覗いてみたのですが、ちょっと弄れそうな気がしませんでした。
……いや、私がJavaScript知らないだけなんですが、ぱっと遊んでみるにはプロトタイプとかの学習コスト高そうだったので、せっかくならと今時のAltJSも触ってみることにしました。
となれば噂のScala.js……をいきなり触る勇気はなかったので、静的型付けでメジャーらしいTypeScriptを選びかけたのですが、残念ながらDefinitelyTypedにあるMapbox.jsの型定義ファイルが古く、自作するのは気合が入りそうだったので、ひとまず諦めました。
そこで無難っぽいCoffeeScriptを選んで、JavaScriptのサンプルコードを適当に移植してみました。とても見通しが良くなったので、これなら気楽にコード弄って遊べそうです！
移植コード
app.coffee
L.mapbox.accessToken = '<your access token here>'
# MIT-licensed code by Benjamin Becquet
# https://github.com/bbecquet/Leaflet.PolylineDecorator
class L.RotatedMarker extends L.Marker
constructor: (pos, options) ->
super(pos, options)
@angle = 0
_setPos: (pos) ->
super(pos)
if L.DomUtil.TRANSFORM
# use the CSS transform rule if available
@_icon.style[L.DomUtil.TRANSFORM] += " rotate(#{@angle}deg)"
else if L.Browser.ie
# fallback for IE6, IE7, IE8
rad = @angle * L.LatLng.DEG_TO_RAD
costheta = Math.cos(rad)
sintheta = Math.sin(rad)
@_icon.style.filter += " progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" +
"#{costheta}, M12=#{-sintheta}, M21=#{sintheta}, M22=#{costheta})"
return
L.rotatedMarker = (pos, options) ->
new L.RotatedMarker(pos, options)
map = L.mapbox.map(
'map'
'examples.map-h67hf2ic'
keyboard: false)
map.setView([37.9, - 77], 4)
marker = L.rotatedMarker(
new L.LatLng(37.9, - 77)
icon: L.icon(
iconUrl: 'https://www.mapbox.com/maki/renders/airport-24@2x.png'
iconSize: [24, 24])
draggable: true)
marker.addTo(map)
direction = 0
manual = false
window.setInterval(
->
ll = marker.getLatLng()
ll.lat += Math.cos(direction) / 100
ll.lng += Math.sin(direction) / 100
marker.angle = direction * (180 / Math.PI)
marker.setLatLng(ll)
if !manual && Math.random() > 0.95
direction += (Math.random() - 0.5) / 2
return
10)
# Add manual control of the airplane with left and right arrow keys, just because
document.body.addEventListener(
'keydown'
(e) ->
switch e.which
when 37
direction -= 0.1
manual = true
when 39
direction += 0.1
manual = true
return
true)
珈琲おいしい
JavaScript何それおいしいの？状態でAltJS触るのも無謀かと思ったのですが、Build InsiderのCoffeeScript入門（前編）（後編）のみ横目にしながら、「このあたりは冗長ぽいから省略してしまおう」「クラスは普通に書けばいいんだよね」というノリで、さくっと移植できました。
CoffeeScript、宗教的な理由で静的な型がないと不安にはなりますが、この気軽さは素敵ですね。コンパイル結果を見比べることで、JavaScriptも読めるようになってきました。
実行環境
coffee -c app.coffee
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Rotating and controllable marker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script src='app.js'></script>
</body>
</html>