Skip to content

Instantly share code, notes, and snippets.

@johnhamelink

johnhamelink/index-demo.html

Created March 2, 2016 19:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save johnhamelink/c46d8d2104809aa8c62e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save johnhamelink/c46d8d2104809aa8c62e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index-demo.html
<!DOCTYPE html>
<html>
<head>
<title>My Tangram Refill Style Map</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.css" />
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- 3rd party libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.js"></script>
<!-- bog-standard leaflet URL hash -->
<script>!function(t){L.Hash=function(t){t&&this.init(t)},L.Hash.parseHash=function(t){0===t.indexOf("#")&&(t=t.substr(1));var i=t.split("/");if(3==i.length){var s=parseInt(i[0],10),a=parseFloat(i[1]),n=parseFloat(i[2]);return isNaN(s)||isNaN(a)||isNaN(n)?!1:{center:new L.LatLng(a,n),zoom:s}}return!1},L.Hash.formatHash=function(t){var i=t.getCenter(),s=t.getZoom(),a=Math.max(0,Math.ceil(Math.log(s)/Math.LN2));return"#"+[parseFloat(s.toFixed(5)),i.lat.toFixed(a),i.lng.toFixed(a)].join("/")},L.Hash.prototype={map:null,lastHash:null,parseHash:L.Hash.parseHash,formatHash:L.Hash.formatHash,init:function(t){this.map=t,this.lastHash=null,this.isListening||this.startListening()},removeFrom:function(t){this.changeTimeout&&clearTimeout(this.changeTimeout),this.isListening&&this.stopListening(),this.map=null},changeDefer:250,changeTimeout:null,onMapMove:function(){if(this.movingMap||!this.map._loaded)return!1;var i=this.formatHash(this.map);if(this.lastHash!=i&&(this.lastHash=i),!this.changeTimeout){var s=this;this.changeTimeout=setTimeout(function(){t.location.replace(i),s.changeTimeout=null},this.changeDefer)}},movingMap:!1,isListening:!1,startListening:function(){this.map.on("moveend",this.onMapMove,this),this.isListening=!0},stopListening:function(){this.map.off("moveend",this.onMapMove,this),this.isListening=!1}},L.hash=function(t){return new L.Hash(t)},L.Map.prototype.addHash=function(){this._hash=L.hash(this)},L.Map.prototype.removeHash=function(){this._hash.removeFrom()}}(window);</script>
<!-- Main tangram library -->
<script src="https://mapzen.com/tangram/tangram.min.js"></script>
<script>
var map = L.map('map');
var layer = Tangram.leafletLayer({
scene: 'https://raw.githubusercontent.com/tangrams/refill-style/gh-pages/refill-style.yaml',
attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | <a href="http://www.openstreetmap.org/about" target="_blank">&copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>',
});
// GeoJSON Points go here:
var geojson = {"type":"MultiPoint","coordinates":[[-2.8008684,54.0661392],[-1.9594204053301,52.305676275913],[-2.2779485,53.5508926],[-1.7731779,51.558497],[-2.35444664027718,53.4796407825513],[-0.1334904,51.459111],[-3.0221521,53.3759307],[0.7051076,51.2358441],[-1.7758951,52.4842357],[-5.96647588417213,54.5805588405568],[-6.03927413933542,54.5339597203345],[-2.1612565,57.1722486],[-1.1499059,52.9570148],[-0.162479905983086,51.173232127347],[-2.2675412,53.4658949],[-0.522776031867156,51.8804009724892],[-1.21911029873679,52.5219058227653],[-2.10379413649127,57.1448219665253],[-0.737746870145889,51.2430463359237],[-5.9459221,54.6852278],[-8.49466583692328,51.8948640721402],[0.503890481786105,51.5800591909046],[-0.290008051151115,51.0733030521183],[-2.78526000390984,57.4484261029625],[-2.5127821,53.0798543],[-1.005156,52.5874179],[-2.9414572,56.2152691],[-4.2326705809722,57.4769175891368],[-7.0887532,52.2659763],[-1.6134732,55.0087617],[-2.128262,52.595659],[-3.91339008497505,51.6595777874967],[-0.3782272,51.5025108],[-1.23033536518186,52.7857005224752],[4.636813,43.7850261],[-2.39613582495595,52.1220910622394],[-0.7147667,51.2509244],[-1.4290024,51.4644093],[-4.4586281,50.4591471],[-3.0523932,53.5537568],[-3.1718715,51.487281],[-3.0961435,53.3756614],[0.2680604,51.1329825],[-5.6925839,54.5965579]]};
L.geoJson(geojson).addTo(map);
layer.addTo(map);
// Center the map on the UK
map.setView([54.470037612805754, -2.30712890625], 6);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment