Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #163 from adamw523/osm_next

OSM Map into next branch
  • Loading branch information...
commit cc1109e7ecb40af1968dd88495d959a376c979e9 2 parents ad10586 + 307acbf
@dansilivestru dansilivestru authored
View
3  .jshintrc
@@ -63,7 +63,8 @@
"Draw",
"sinon",
"setInterval", "clearInterval", "setTimeout", "clearTimeout",
- "require", "Contact", "Position", "Coordinates", "Node"
+ "require", "Contact", "Position", "Coordinates", "Node",
+ "OpenLayers"
],
"node" : true,
View
3  build/build/conf.js
@@ -38,6 +38,7 @@ module.exports = {
"jXHR.js",
"3d.js",
"draw.js",
- "jWorkflow/jworkflow-min-0.4.0.js"
+ "jWorkflow/jworkflow-min-0.4.0.js",
+ "OpenLayers.js"
]
};
View
BIN  ext/assets/images/arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
17 ext/assets/ripple.css
@@ -573,6 +573,12 @@ section.left { left: 0; }
overflow: hidden;
}
+#geo-map-container {
+ width: 316px;
+ height: 316px;
+ z-index: 0;
+}
+
#geo-map-img {
top: -80px;
left: -80px;
@@ -589,6 +595,7 @@ section.left { left: 0; }
#geo-map-direction-label {
margin-left: 35px;
+ z-index: 800;
}
#geo-map-direction {
@@ -604,15 +611,17 @@ section.left { left: 0; }
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
+ z-index: 800;
}
#geo-map-marker {
position: absolute;
top: 158px;
- left: 148px;
- background: url(images/circle.png);
- width: 20px;
- height: 20px;
+ left: 143px;
+ background: url(../images/arrow.png);
+ width: 22px;
+ height: 30px;
+ z-index: 800;
}
.geo-map-zoom-btn {
View
6 lib/ripple/constants.js
@@ -39,7 +39,6 @@ module.exports = {
"STORAGE_TABLE_BODY_CLASS": "preferences-list-body",
"STORAGE_COUNT_CONTAINER_ID": "preferences-count",
"GEO_MAP_CONTAINER_ID": "geo-map",
- "GEO_MAP_IMAGE_ID": "geo-map-img",
"FILESYSTEM_UPDATE_BUTTON_ID_WITH_HASH": "#update-filesystem-button",
"USER_AGENT_DEFAULT": "default",
"APPLICATIONS_CONTAINER_ID": "widget-applications-content",
@@ -104,7 +103,10 @@ module.exports = {
"HEADING_LABEL" : "geo-heading-label",
"HEADING_MAP_LABEL" : "geo-map-direction-label",
"IMAGE" : "geo-map-img",
- "TIMEOUT" : "geo-timeout"
+ "MAP_MARKER" : "geo-map-marker",
+ "MAP_CONTAINER" : "geo-map-container",
+ "TIMEOUT" : "geo-timeout",
+
},
"MAP_ZOOM_MAX": 21,
"MAP_ZOOM_MIN": 0,
View
3  lib/ripple/geo.js
@@ -89,5 +89,6 @@ self = module.exports = {
},
timeout: false,
- delay: 0
+ delay: 0,
+ map: {}
};
View
2  lib/ripple/ui.js
@@ -218,7 +218,7 @@ function _initializeUI() {
if (isOpen) {
pNode.removeClass("ui-box-open");
}
- event.trigger("ApplicationState");
+ event.trigger("ApplicationState", [pNode]);
uiBoxToggleEngaged = false;
});
}
View
77 lib/ripple/ui/plugins/geoView.js
@@ -23,15 +23,18 @@ var constants = require('ripple/constants'),
function _updateGpsMap() {
var positionInfo = geo.getPositionInfo(),
- geoImageDiv = document.getElementById(constants.COMMON.GEO_MAP_IMAGE_ID),
+ mapContainer = document.getElementById(constants.GEO.OPTIONS.MAP_CONTAINER),
geoZoomValue = document.getElementById(constants.GEO.MAP_ZOOM_LEVEL_CONTAINER);
- if (geoImageDiv) {
- geoImageDiv.setAttribute("src", constants.SERVICES.GOOGLE_MAPS_URI +
- "&center=" +
- positionInfo.latitude + "," + positionInfo.longitude + "&sensor=false&zoom=" +
- _gpsMapZoomLevel.toString() + "&key=" +
- constants.SERVICES.GOOGLE_MAPS_API_KEY);
+ if (mapContainer && jQuery(mapContainer).is(':visible')) {
+ geo.map.setCenter(new OpenLayers.LonLat(positionInfo.longitude, positionInfo.latitude) // Center of the map
+ .transform(
+ new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
+ new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
+ ),
+ _gpsMapZoomLevel,
+ true // don't trigger dragging events
+ );
}
if (geoZoomValue) {
@@ -110,7 +113,9 @@ module.exports = {
headingLabel = document.getElementById(GEO_OPTIONS.HEADING_LABEL),
headingMapLabel = document.getElementById(GEO_OPTIONS.HEADING_MAP_LABEL),
timeout = document.getElementById(GEO_OPTIONS.TIMEOUT),
- geoImage = document.getElementById(GEO_OPTIONS.IMAGE);
+ mapMarker = document.getElementById(GEO_OPTIONS.MAP_MARKER),
+ mapContainer = document.getElementById(GEO_OPTIONS.MAP_CONTAINER),
+ map = null;
function updateGeo() {
@@ -135,7 +140,16 @@ module.exports = {
headingLabel.innerText = headingText;
headingMapLabel.innerHTML = headingText + "</br>" + headingDeg + "&deg;";
- geoImage.setAttribute("style", "-webkit-transform: rotate(-" + headingDeg + "deg);");
+ mapMarker.setAttribute("style", "-webkit-transform: rotate(" + headingDeg + "deg);");
+ }
+
+ function updateValsFromMap() {
+ var center = geo.map.getCenter().transform(
+ new OpenLayers.Projection("EPSG:900913"),
+ new OpenLayers.Projection("EPSG:4326"));
+ longitude.value = center.lon;
+ latitude.value = center.lat;
+ updateGeo();
}
function initializeValues() {
@@ -152,6 +166,49 @@ module.exports = {
updateHeadingValues();
}
+ function initMap() {
+ // override image location so we don't have to include image assets
+ OpenLayers.ImgPath = 'http://openlayers.org/api/img/';
+
+ // init map
+ geo.map = new OpenLayers.Map(mapContainer, { controls: [] });
+
+ // add controls and OSM map layer
+ geo.map.addLayer(new OpenLayers.Layer.OSM());
+ geo.map.addControl(new OpenLayers.Control.Navigation());
+
+ // override behaviour of click to pan and double click to zoom in
+ var clickHandler = new OpenLayers.Handler.Click(
+ this,
+ {
+ click: function (e) {
+ var lonlat = geo.map.getLonLatFromViewPortPx(e.xy);
+ geo.map.panTo(new OpenLayers.LonLat(lonlat.lon, lonlat.lat), _gpsMapZoomLevel);
+ },
+
+ dblclick: function (e) {
+ _updateGpsMapZoom(true);
+ }
+ },
+ {double: true}
+ );
+
+ // add click handler to map
+ clickHandler.setMap(geo.map);
+ clickHandler.activate();
+
+ // update long and lat when map is panned
+ geo.map.events.register("moveend", map, function (e) {
+ updateValsFromMap();
+ });
+
+ event.on("ApplicationState", function (obj) {
+ if (obj && obj[0].id === 'gps-container' && obj.hasClass('ui-box-open')) {
+ _updateGpsMap();
+ }
+ });
+ }
+
// HACK: see techdebt http://www.pivotaltracker.com/story/show/5478847 (double HACK!!!)
if (platform.current().id === 'phonegap' || platform.current().id === 'webworks') {
// make the fields visible
@@ -201,6 +258,8 @@ module.exports = {
speed.value = positionInfo.speed;
}
+ initMap();
+
initializeValues();
event.on(positionEvent, function () {
View
2  lib/ripple/ui/plugins/geoView/panel.html
@@ -79,7 +79,7 @@
</table>
<div id="geo-map">
- <img id="geo-map-img">
+ <div id="geo-map-container"></div>
<div id="geo-map-marker"></div>
<div id="geo-map-direction">
<div id="geo-map-arrow"></div>
View
2,553 thirdparty/OpenLayers.js
2,553 additions, 0 deletions not shown
Please sign in to comment.
Something went wrong with that request. Please try again.