Merge pull request #632 from twpayne/mobile-full-screen-example
Mobile full screen example
This commit is contained in:
27
examples/mobile-full-screen.html
Normal file
27
examples/mobile-full-screen.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<title>Mobile full screen example</title>
|
||||
<style type="text/css">
|
||||
html, body, .map {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="map"></div>
|
||||
<script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="title">Mobile full screen example</div>
|
||||
<div id="shortdesc">Example of a full screen map.</div>
|
||||
<div id="tags">fullscreen, bing, geolocation, mobile</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
examples/mobile-full-screen.js
Normal file
35
examples/mobile-full-screen.js
Normal file
@@ -0,0 +1,35 @@
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var view = new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
|
||||
style: 'Road'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
|
||||
var geolocation = new ol.Geolocation({
|
||||
tracking: true
|
||||
});
|
||||
geolocation.bindTo('projection', view);
|
||||
geolocation.on('position_changed', function() {
|
||||
view.setCenter(geolocation.getPosition());
|
||||
view.setResolution(2.388657133911758);
|
||||
});
|
||||
@@ -1,3 +1,10 @@
|
||||
/**
|
||||
* @typedef {Object} ol.GeolocationOptions
|
||||
* @property {boolean|undefined} tracking Tracking.
|
||||
* @property {GeolocationPositionOptions|undefined} trackingOptions Tracking options.
|
||||
* @property {ol.ProjectionLike} projection Projection.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Object literal with config options for the map.
|
||||
* @typedef {Object} ol.MapOptions
|
||||
|
||||
@@ -33,11 +33,14 @@ ol.GeolocationProperty = {
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.Object}
|
||||
* @param {ol.GeolocationOptions=} opt_options Options.
|
||||
*/
|
||||
ol.Geolocation = function() {
|
||||
ol.Geolocation = function(opt_options) {
|
||||
|
||||
goog.base(this);
|
||||
|
||||
var options = goog.isDef(opt_options) ? opt_options : {};
|
||||
|
||||
/**
|
||||
* The unprojected (EPSG:4326) device position.
|
||||
* @private
|
||||
@@ -51,14 +54,23 @@ ol.Geolocation = function() {
|
||||
*/
|
||||
this.watchId_ = undefined;
|
||||
|
||||
this.setTracking(false);
|
||||
|
||||
goog.events.listen(
|
||||
this, ol.Object.getChangedEventType(ol.GeolocationProperty.PROJECTION),
|
||||
this.handleProjectionChanged_, false, this);
|
||||
goog.events.listen(
|
||||
this, ol.Object.getChangedEventType(ol.GeolocationProperty.TRACKING),
|
||||
this.handleTrackingChanged_, false, this);
|
||||
|
||||
if (goog.isDef(options.projection)) {
|
||||
this.setProjection(ol.projection.get(options.projection));
|
||||
}
|
||||
if (goog.isDef(options.trackingOptions)) {
|
||||
this.setTrackingOptions(options.trackingOptions);
|
||||
}
|
||||
if (goog.isDef(options.tracking)) {
|
||||
this.setTracking(options.tracking);
|
||||
}
|
||||
|
||||
};
|
||||
goog.inherits(ol.Geolocation, ol.Object);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user