Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Mobile full screen example #632

Merged
merged 2 commits into from

5 participants

@twpayne

This PR adds a full screen example suitable for devices that don't support the Full Screen API, e.g. mobile devices and IE.

@marcjansen
Collaborator

Hi @twpayne, this looks good and can be merged.

I would have preferred a separate PR for the geolocation changes as these aren't directly related. Feel free to merge this, though.

@elemoine
Owner

Looks good to me.

Personal opinion: it's more important to have separate commits than separate PRs.

@twpayne

I would have preferred a separate PR for the geolocation changes as these aren't directly related. Feel free to merge this, though.

I would as well. The changes are related because ddb295c depends on be7228f (link). Trying to maintain separate PRs gets really complicated really quickly. If you don't mind commits taking 2 days (or more) instead of 2 minutes to be reviewed then it's OK that development should be slowed down by 2 * 24 * 60 / 2 = 1440 times. We all have years to spare, right? At least separating commits means that the changes are clear and we can still merge the non-controversial improvements.

@ahocevar
Owner

If you don't mind commits taking 2 days (or more) instead of 2 minutes to be reviewed then it's OK that development should be slowed down by 2 * 24 * 60 / 2 = 1440 times.

This comment is not really encouraging to reviewers. One thing I've learned in 6 years of OpenSource community work is that patience is a virtue when it comes to waiting for code to get reviewed. And sometime the code changes and improves while waiting, because of the extra time you get to think about it. Not all bad.

@twpayne twpayne merged commit e6f354c into openlayers:master
@twpayne twpayne deleted the twpayne:mobile-full-screen-example branch
@fredj
Owner

The geolocation recenter does not work on http://ol3js.org/ol3/master/examples/mobile-full-screen.html
geolocation.exports needs to include ol.GeolocationOptions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
27 examples/mobile-full-screen.html
@@ -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>
View
35 examples/mobile-full-screen.js
@@ -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);
+});
View
7 src/objectliterals.jsdoc
@@ -1,4 +1,11 @@
/**
+ * @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
* @property {Array.<ol.control.Control>|undefined} controls Controls initially
View
18 src/ol/geolocation.js
@@ -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);
Something went wrong with that request. Please try again.