Skip to content

Instantly share code, notes, and snippets.

@lxbarth

lxbarth/index.html

Created February 28, 2015 11:03
Show Gist options
  • Save lxbarth/2ff3717b1dcd6fb04271 to your computer and use it in GitHub Desktop.
Save lxbarth/2ff3717b1dcd6fb04271 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</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.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.4.0/turf.min.js'></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibHhiYXJ0aCIsImEiOiJFVXdYcUlvIn0.bbaHTEWlnAwGgyVwJngMdQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
.setView([19.624, -74.921], 8)
.addControl(L.mapbox.geocoderControl('mapbox.places', {autocomplete: true}));
var hash = L.hash(map);
var line = {
"type": "Feature",
"properties": {
"stroke": "#000"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-76.091308, 18.427501],
[-76.695556, 18.729501],
[-76.552734, 19.40443],
[-74.61914, 19.134789],
[-73.652343, 20.07657],
[-73.157958, 20.210656]
]
}
};
var curved = turf.bezier(line);
curved.properties = {
stroke: "red"
};
var result = {
'type': 'FeatureCollection',
'features': [line, curved]
};
var featureLayer = L.mapbox.featureLayer(result).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment