Last active
August 29, 2015 14:17
-
-
Save piyo7/7cdb80bc253a2e3fc022 to your computer and use it in GitHub Desktop.
CoffeeScriptでMapboxことはじめ ref: http://qiita.com/piyo7/items/dd5dcc7d750d5b3b6507
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/[email protected]' | |
| 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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| coffee -c app.coffee |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment