Skip to content

Instantly share code, notes, and snippets.

@jbeezley

jbeezley/index.html

Created March 27, 2015 14:44
Show Gist options
  • Save jbeezley/293fadb136d82b836583 to your computer and use it in GitHub Desktop.
Save jbeezley/293fadb136d82b836583 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin GeoJS with different tile sets // source http://jsbin.com/mubuqo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<meta name="description" content="GeoJS with different tile sets">
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://opengeoscience.github.io/geojs/js/v0.4.1/geo.ext.min.js"></script>
<script src="https://opengeoscience.github.io/geojs/js/v0.4.1/geo.min.js"></script>
<style id="jsbin-css">
html, body, #map {
width: 100%;
height: 100%;
}
#layer-controls {
position: absolute;
right: 30px;
top: 30px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="layer-controls">
<label for="tileset">Select a tile set</label>
<select name="tileset" id="tileset">
<option selected="selected" value="http://tile.openstreetmap.org/">default</option>
<option value="http://otile1.mqcdn.com/tiles/1.0.0/map/">osm</option>
<option value="http://tile.stamen.com/toner/">toner</option>
<option value="http://a.basemaps.cartocdn.com/light_all/">CartoDB light</option>
<option value="http://a.basemaps.cartocdn.com/dark_all/">CartoDB dark</option>
<option value="http://b.tile.thunderforest.com/transport">transport</option>
</select>
</div>
<script id="jsbin-javascript">
// create the default map
var map = geo.map({node: '#map'});
var osm = map.createLayer('osm');
// attach tile set change event
$('#tileset')
.change(function () {
osm.updateBaseUrl(
$('#tileset option:selected').val()
);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<meta name="description" content="GeoJS with different tile sets">
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://opengeoscience.github.io/geojs/js/v0.4.1/geo.ext.min.js"><\/script>
<script src="https://opengeoscience.github.io/geojs/js/v0.4.1/geo.min.js"><\/script>
</head>
<body>
<div id="map"></div>
<div id="layer-controls">
<label for="tileset">Select a tile set</label>
<select name="tileset" id="tileset">
<option selected="selected" value="http://tile.openstreetmap.org/">default</option>
<option value="http://otile1.mqcdn.com/tiles/1.0.0/map/">osm</option>
<option value="http://tile.stamen.com/toner/">toner</option>
<option value="http://a.basemaps.cartocdn.com/light_all/">CartoDB light</option>
<option value="http://a.basemaps.cartocdn.com/dark_all/">CartoDB dark</option>
<option value="http://b.tile.thunderforest.com/transport">transport</option>
</select>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html, body, #map {
width: 100%;
height: 100%;
}
#layer-controls {
position: absolute;
right: 30px;
top: 30px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
// create the default map
var map = geo.map({node: '#map'});
var osm = map.createLayer('osm');
// attach tile set change event
$('#tileset')
.change(function () {
osm.updateBaseUrl(
$('#tileset option:selected').val()
);
});</script></body>
</html>
Raw
jsbin.mubuqo.css
html, body, #map {
width: 100%;
height: 100%;
}
#layer-controls {
position: absolute;
right: 30px;
top: 30px;
}
Raw
jsbin.mubuqo.js
// create the default map
var map = geo.map({node: '#map'});
var osm = map.createLayer('osm');
// attach tile set change event
$('#tileset')
.change(function () {
osm.updateBaseUrl(
$('#tileset option:selected').val()
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment