aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/css/mobile.css26
-rw-r--r--www/frontpage-map.html75
-rw-r--r--www/js/fixmystreet.js20
-rw-r--r--www/js/map-OpenLayers.js43
4 files changed, 134 insertions, 30 deletions
diff --git a/www/css/mobile.css b/www/css/mobile.css
index 0cabbe5..e684d66 100644
--- a/www/css/mobile.css
+++ b/www/css/mobile.css
@@ -138,6 +138,32 @@ input.green-btn:hover {
border-right: #BCEF58;
}
+#mark-here {
+ font-size: 1.2em;
+ -moz-border-radius: 0.25em;
+ -webkit-border-radius: 0.25em;
+ -o-border-radius: 0.25em;
+ -ms-border-radius: 0.25em;
+ -khtml-border-radius: 0.25em;
+ border-radius: 0.25em;
+ margin-top: 0.5em;
+ background: #9fde23;
+ border-top: #CAEF80;
+ border-left: #BCEF58;
+ border-right: #BCEF58;
+
+ position: absolute;
+ top: 360px;
+ left: 60px;
+ z-index: 2000;
+ display: block;
+ padding: 10px;
+}
+
+#OpenLayers_Control_Crosshairs_crosshairs {
+ pointer-events: none
+}
+
#loadingSpinner {
display: none;
}
diff --git a/www/frontpage-map.html b/www/frontpage-map.html
index 2af30ce..3346b15 100644
--- a/www/frontpage-map.html
+++ b/www/frontpage-map.html
@@ -19,22 +19,39 @@
<script type="text/javascript" src="js/geo.min.js"></script>
<script type="text/javascript" src="js/fixmystreet.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
+ <script type="text/javascript" src="js/OpenLayers.fixmystreet.js"></script>
+ <script type="text/javascript" src="js/map-OpenLayers.js"></script>
+ <script type="text/javascript" src="js/map-bing-ol.js"></script>
+ <script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
+ var fixmystreet = {
+ 'page': 'around',
+ 'area': '',
+ 'all_pins': '',
+ 'latitude': localStorage.latitude,
+ 'longitude': localStorage.longitude,
+ 'zoom': 2,
+ 'numZoomLevels': 5,
+ 'zoomOffset': 13,
+ 'map_type': "",
+ 'pins': [ ]
+ };
+
+ $('#fixmystreet\\.latitude').val( localStorage.latitude );
+ $('#fixmystreet\\.longitude').val( localStorage.longitude );
+ $('#pc').val( localStorage.pc );
+
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function gotPosition(position) {
- var element = document.getElementById('geolocation');
- element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
- 'Longitude: ' + position.coords.longitude + '<br />' +
- '<hr />' + element.innerHTML;
-
-
-
-
+ localStorage.latitude = position.coords.latitude;
+ localStorage.longitude = position.coords.longitude;
+ localStorage.pc = '';
+ $(window).resize();
}
function positionError(error) {
@@ -74,35 +91,33 @@
</head>
<body id="container" class="frontpage fullwidthpage" onload="onLoad()" ontouchmove="touchmove(event);">
- <div id="map_box">
- <div id="map"></div>
+ <div class="wrapper">
+
+ <header id="site-header" role="banner">
+ <div class="container">
+ <span id="site-logo"></span>
+ </div>
+ </header>
+
+ <a id="mark-here">
+ Mark this point
+ </a>
+
+ <div class="container">
+ <div class="content" role="main">
+
+ <div id="map_box">
+ <div id="map"></div>
<p id="sub_map_links">
<a id="hide_pins_link" rel="nofollow" href="">Hide pins</a>
<a id="all_pins_link" rel="nofollow" href="">Show old</a>
</p>
</div>
+ </div>
+ </div>
- <div id="side">
-
- <h1 class="big-green-banner">Click map to report a problem</h1>
-
- <section class="full-width">
- <menu id="problems-nav" class="tab-nav">
- <ul>
- <li><a href="#current">Problems on the map</a></li>
- <li><a href="#current_near">Problems nearby</a></li>
- </ul>
- </menu>
- <ul id="current" class="issue-list-a tab">
- <li><p>No problems have been reported yet.</p></li>
- </ul>
- <ul id="current_near" class="issue-list-a tab">
- <li><p>No problems found.</p></li>
- </ul>
- </section>
- </div>
- </div>
+ </div>
</body>
diff --git a/www/js/fixmystreet.js b/www/js/fixmystreet.js
index 29de3ef..9b8708f 100644
--- a/www/js/fixmystreet.js
+++ b/www/js/fixmystreet.js
@@ -88,6 +88,26 @@ $(function(){
var last_type;
$(window).resize(function(){
+
+ var crosshairsControls, i, markHere, newX, newY;
+
+ if (typeof fixmystreet.map !== "undefined") {
+ // Update the position of any crosshairs controls:
+ crosshairsControls = fixmystreet.map.getControlsByClass(
+ "OpenLayers.Control.Crosshairs");
+ for (i = 0; i < crosshairsControls.length; ++i) {
+ crosshairsControls[i].reposition();
+ }
+ // Also reposition the "Tap here to mark this point" button:
+ markHere = $('#mark-here');
+ newX = $(window).width() / 2 - markHere.width() / 2;
+ newY = $(window).height() * 4 / 5 - markHere.height() / 2;
+ markHere.css({
+ left: newX + "px",
+ top: newY + "px"
+ });
+ }
+
var type = $('#site-header').css('borderTopWidth');
if (type == '4px') {
type = 'mobile';
diff --git a/www/js/map-OpenLayers.js b/www/js/map-OpenLayers.js
index e64ff55..c845978 100644
--- a/www/js/map-OpenLayers.js
+++ b/www/js/map-OpenLayers.js
@@ -206,6 +206,7 @@ function fixmystreet_onload() {
}
});
+ fixmystreet.map.addControl( new OpenLayers.Control.Crosshairs(null) );
}
$(function(){
@@ -309,6 +310,48 @@ $(function(){
}
});
+OpenLayers.Control.Crosshairs = OpenLayers.Class.create();
+OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE = 100;
+OpenLayers.Control.Crosshairs.DIV_ID = "OpenLayers_Control_Crosshairs_crosshairs";
+OpenLayers.Control.Crosshairs.prototype =
+ OpenLayers.Class.inherit( OpenLayers.Control, {
+ element: null,
+ position: null,
+
+ initialize: function(element) {
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ this.element = OpenLayers.Util.getElement(element);
+ this.imageSize = new OpenLayers.Size(OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE,
+ OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE);
+ },
+
+ draw: function() {
+ var position;
+ OpenLayers.Control.prototype.draw.apply(this, arguments);
+ position = this.getIdealPosition();
+ this.buttons = new Array();
+ var imgLocation = OpenLayers.Util.getImagesLocation() + "crosshairs-100.png";
+ return OpenLayers.Util.createAlphaImageDiv(OpenLayers.Control.Crosshairs.DIV_ID,
+ position, this.imageSize, imgLocation, "absolute");
+ },
+
+ getIdealPosition: function() {
+ this.map.updateSize();
+ var mapSize = this.map.getSize();
+ return new OpenLayers.Pixel((mapSize.w / 2) - (this.imageSize.w / 2),
+ (2 * mapSize.h / 5) - (this.imageSize.h / 2));
+ },
+
+ reposition: function() {
+ var position = this.getIdealPosition();
+ $('#' + OpenLayers.Control.Crosshairs.DIV_ID).css({
+ left: position.x,
+ top: position.y});
+ },
+
+ CLASS_NAME: "OpenLayers.Control.Crosshairs"
+});
+
/* Overridding the buttonDown function of PanZoom so that it does
zoomTo(0) rather than zoomToMaxExtent()
*/
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-02 11:46:42 +0000