Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created August 16, 2014 17:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/e46c66a184d5d2bf0a5c to your computer and use it in GitHub Desktop.
Save tmcw/e46c66a184d5d2bf0a5c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>KML Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoic3VtbWl0amFzZSIsImEiOiJEbmFGNXNVIn0.OP5tr72Mrmi4bYANd9OBUQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio');
// omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The file must either be on the same domain as the page that requests it,
// or both the server it is requested from and the user's browser must
// support CORS.
// Internally this uses the toGeoJSON library to decode the KML file
// into GeoJSON
var runLayer = omnivore.kml('line.kml')
.on('ready', function () {
map.fitBounds(runLayer.getBounds());
})
.addTo(map);
</script>
</body>
</html>
Raw
line.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>LineString.kml</name>
<open>1</open>
<LookAt>
<longitude>-122.36415</longitude>
<latitude>37.824553</latitude>
<altitude>0</altitude>
<range>150</range>
<tilt>50</tilt>
<heading>0</heading>
</LookAt>
<Placemark>
<name>unextruded</name>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<coordinates>
-122.364383,37.824664,0 -122.364152,37.824322,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>extruded</name>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>relativeToGround</altitudeMode>
<coordinates>
-122.364167,37.824787,50 -122.363917,37.824423,50
</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment