Skip to content

Instantly share code, notes, and snippets.

@erwaller
Last active August 29, 2015 14:19
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
SeatGeek Map with Leaflet 1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
</head>
<body>
<div id="map" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px"></div>
<script src="//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
<script>
L.Projection.SeatGeek = L.extend({}, L.Projection.LonLat, {
bounds: L.bounds([0, 0], [1000, 1000])
});
L.CRS.SeatGeek = L.extend({}, L.CRS.Simple, {
projection: L.Projection.SeatGeek,
transformation: new L.Transformation(0.35, 0, 0.35, 0),
infinite: false
});
var mapId = "v3-5-9.mlb";
var map = L.map("map", {
crs: L.CRS.SeatGeek,
center: [500, 500],
zoom: 1 // Math.min(window.innerWidth, window.innerHeight) / 700
});
L.tileLayer("https://seatgeek-tiles.global.ssl.fastly.net/v3/maps/{mapId}/{z}/{x}/{y}.png", {
mapId: mapId,
tileSize: 350,
maxZoom: 4,
noWrap: true
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment