I am using the Openlayers.mobile.js library to embed an OSM in an Android application.
PROBLEM OF SCREEN DIMENSIONS
The first problem that I have is that when I zoom to level 0, for example in portrait, instead of showing the whole planet map and fill in black the extra top and bottom of the screen, it looks like it does the opposite: zoom to max extent vertically and cut the extra horizontal sides of the map.
If I set a maxExtent(-180,-90,180,90) the map has the same relative position to the screen and it doesn't let me move the map, so the two extra sides are not accessible.
Is like if it is considering the screen dimensions to be the inverse, but if I do it in landscape, I get just a center piece of the map in the screen.
My ideal desire would be to have all the map in the screen and filling with black all the extra screen. In both cases, landscape and portrait.
PROBLEM OF REPETITION
Since I cannot fix correctly the maxExtent of the map, it starts repeating itself when panning horizontally. I use vector layers that draw polygons dynamically. When the user moves the map, sometimes it moves some points of the polygon to x+360º and, therefore, when closes the polygon it shows a strange shape. (It closes the polygon with a mix of x-points and x+360 points.
Is there a way to tell the vector layer that I want all the points to be the closest ones and then he can decide if the whole polygon should be at x or x+360? Is there a way to block map repetition or to repeat the vector layer the same way the map is repeating (allowing to show the same country/polygon in two places of the map (x and x+360º)?
NOTE: the points are just moved when the polygon lies between two maps, if not is the whole polygon that is moved. I need to tell the constructor Polygon that the polygon is closed by proximity not by points in a single map. So, the points p1=(-179,0) and p2=(179,0) should be closed without passing by the point (0,0) but passing by the point (180,0)=(-180,0).
SOME CODE
Mobile.js:
// initialize map when page ready
var map;
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);
var init = function () {
// create map
map = new OpenLayers.Map({
div: "map",
theme: null,
numZoomLevels: 18,
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
})
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
})
],
center: new OpenLayers.LonLat(0, 0),
zoom: 0
});
};
index.html->periodic drawing function:
//Stations
if(Math.abs(sc_altitude-sc_altitude_tmp)>sc_altitude_step){
stations_area_layer.removeAllFeatures();
for (var arrayIndex in station_areas){
/*
var radius = Rt*Math.sin(Math.acos(Rt/(Rt+sc_altitude-stations[arrayIndex].ellipsoid_elevation)));
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(stations[arrayIndex].longitude, stations[arrayIndex].latitude).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
radius,
30
);
//circle.transform(new OpenLayers.Projection("EPSG:4258"), map.getProjectionObject());
var station_feature = new OpenLayers.Feature.Vector(circle, null, station_area_style);
stations_area_layer.addFeatures([station_feature]);
*/
var areaPoints = [];
for (var i in station_areas[arrayIndex].points) {
var coord = station_areas[arrayIndex].points[i];
var point = new OpenLayers.Geometry.Point(coord.longitude, coord.latitude);
// transform from WGS 1984 to Spherical Mercator
point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
areaPoints.push(point);
}
areaPoints.push(areaPoints[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(areaPoints);
var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
var polygonFeature = new OpenLayers.Feature.Vector(geometry, null, station_area_style);
stations_area_layer.addFeatures([polygonFeature]);
}
sc_altitude_tmp = sc_altitude;
}
index.html->head:
<head>
<title>OpenLayers Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="theme/default/style.css" type="text/css">
<link rel="stylesheet" href="theme/default/style.mobile.css" type="text/css">
<script type='text/javascript' src="interface.js"></script>
<!--<script src="http://www.openlayers.org/api/OpenLayers.js"></script>-->
<script src="OpenLayers.mobile.js"></script>
<script src="mobile.js"></script>
<script type="text/javascript" src="proj4js/proj4.js"></script>
<script type="text/javascript" src="greatCircle.js"></script>
<script type="text/javascript" src="greatcirclemod.js"></script>
<SCRIPT type="text/javascript" src="proj4js/data/tmerc.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/merc.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/EPSG31466.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/EPSG31467.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/EPSG900913.js"></SCRIPT>
<!--<script type="text/javascript" src="javascript/counter_orthodrome.js"></script>-->
<style>
html, body {
margin : 0;
padding : 0;
height : 100%;
width : 100%;
}
@media only screen and (max-width: 600px) {
html, body {
height : 117%;
}
}
#map {
width : 100%;
position : absolute;
height : 100%;
}
.olControlAttribution {
position : absolute;
font-size : 10px;
bottom : 0 !important;
right : 0 !important;
background : rgba(0,0,0,0.1);
font-family : Arial;
padding : 2px 4px;
border-radius : 5px 0 0 0;
}
#title, #tags, #shortdesc {
display: none;
}
</style>
</head>
