[OpenLayers-Commits] r11585 - sandbox/crschmidt/ovi-mobile/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Feb 28 13:58:00 EST 2011
Author: crschmidt
Date: 2011-02-28 10:57:59 -0800 (Mon, 28 Feb 2011)
New Revision: 11585
Added:
sandbox/crschmidt/ovi-mobile/examples/ovi-base.js
sandbox/crschmidt/ovi-mobile/examples/ovi-jq.html
sandbox/crschmidt/ovi-mobile/examples/ovi-jq.js
Log:
Adding ovi examples.
Added: sandbox/crschmidt/ovi-mobile/examples/ovi-base.js
===================================================================
--- sandbox/crschmidt/ovi-mobile/examples/ovi-base.js (rev 0)
+++ sandbox/crschmidt/ovi-mobile/examples/ovi-base.js 2011-02-28 18:57:59 UTC (rev 11585)
@@ -0,0 +1,86 @@
+// API key for http://openlayers.org. Please get your own at
+// http://bingmapsportal.com/ and use that instead.
+var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+
+// initialize map when page ready
+var map;
+var gg = new OpenLayers.Projection("EPSG:4326");
+var sm = new OpenLayers.Projection("EPSG:900913");
+
+var init = function () {
+
+ var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
+
+ var geolocate = new OpenLayers.Control.Geolocate({
+ id: 'locate-control',
+ geolocationOptions: {
+ enableHighAccuracy: false,
+ maximumAge: 0,
+ timeout: 7000
+ }
+ });
+ // create map
+ map = new OpenLayers.Map({
+ div: "map",
+ theme: null,
+ projection: sm,
+ units: "m",
+ numZoomLevels: 18,
+ maxResolution: 156543.0339,
+ maxExtent: new OpenLayers.Bounds(
+ -20037508.34, -20037508.34, 20037508.34, 20037508.34
+ ),
+ controls: [
+ new OpenLayers.Control.Attribution(),
+ new OpenLayers.Control.TouchNavigation({
+ dragPanOptions: {
+ interval: 100,
+ enableKinetic: true
+ }
+ }),
+ geolocate
+ ],
+ layers: [
+ new OpenLayers.Layer.XYZ("Ovi Maps", "http://maptile.maps.svc.ovi.com/maptiler/maptile/newest/normal.day/${z}/${x}/${y}/256/png8", {
+ transitionEffect: 'resize', sphericalMercator: true
+ }),
+ vector
+ ],
+ center: new OpenLayers.LonLat(0, 0),
+ zoom: 1
+ });
+
+ var style = {
+ fillOpacity: 0.1,
+ fillColor: '#000',
+ strokeColor: '#f00',
+ strokeOpacity: 0.6
+ };
+ geolocate.events.register("locationupdated",this,function(e) {
+ vector.removeAllFeatures();
+ vector.addFeatures([
+ new OpenLayers.Feature.Vector(
+ e.point,
+ {},
+ {
+ graphicName: 'cross',
+ strokeColor: '#f00',
+ strokeWidth: 2,
+ fillOpacity: 0,
+ pointRadius: 10
+ }
+ ),
+ new OpenLayers.Feature.Vector(
+ OpenLayers.Geometry.Polygon.createRegularPolygon(
+ new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+ e.position.coords.accuracy/2,
+ 50,
+ 0
+ ),
+ {},
+ style
+ )
+ ]);
+ map.zoomToExtent(vector.getDataExtent());
+ });
+};
Added: sandbox/crschmidt/ovi-mobile/examples/ovi-jq.html
===================================================================
--- sandbox/crschmidt/ovi-mobile/examples/ovi-jq.html (rev 0)
+++ sandbox/crschmidt/ovi-mobile/examples/ovi-jq.html 2011-02-28 18:57:59 UTC (rev 11585)
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <title>OpenLayers with jQuery Mobile</title>
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
+ <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
+ <link rel="stylesheet" href="style.mobile.css" type="text/css">
+ <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
+ <script src="../lib/OpenLayers.js?mobile"></script>
+ <script src="ovi-base.js"></script>
+ <script src="ovi-jq.js"></script>
+ </head>
+ <body>
+ <h1 id="title">OpenLayers with jQuery Mobile</h1>
+ <div id="tags">
+ mobile, jquery
+ </div>
+ <p id="shortdesc">
+ Using jQuery Mobile to display an OpenLayers map.
+ </p>
+
+ <div data-role="page" id="mappage">
+ <div data-role="content">
+ <div id="map"></div>
+ </div>
+
+ <div data-role="footer">
+ <a href="#searchpage" data-icon="search" data-role="button">Search</a>
+ <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
+ <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
+ </div>
+ <div id="navigation" data-role="controlgroup" data-type="vertical">
+ <a href="#" data-role="button" data-icon="plus" id="plus"
+ data-iconpos="notext"></a>
+ <a href="#" data-role="button" data-icon="minus" id="minus"
+ data-iconpos="notext"></a>
+ </div>
+ </div>
+
+ <div data-role="page" id="searchpage">
+ <div data-role="header">
+ <h1>Search</h1>
+ </div>
+ <div data-role="fieldcontain">
+ <input type="search" name="query" id="query"
+ value="" placeholder="Search for places"
+ autocomplete="off"/>
+ </div>
+ <ul data-role="listview" data-inset="true" id="search_results"></ul>
+ </div>
+
+ <div data-role="page" id="layerspage">
+ <div data-role="header">
+ <h1>Layers</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist">
+ </div>
+ </div>
+
+ <div id="popup" data-role="dialog">
+ <div data-position="inline" data-theme="d" data-role="header">
+ <h1>Details</h1>
+ </div>
+ <div data-theme="c" data-role="content">
+ <ul id="details-list" data-role="listview">
+ </ul>
+ </div>
+ </div>
+ </body>
+</html>
Added: sandbox/crschmidt/ovi-mobile/examples/ovi-jq.js
===================================================================
--- sandbox/crschmidt/ovi-mobile/examples/ovi-jq.js (rev 0)
+++ sandbox/crschmidt/ovi-mobile/examples/ovi-jq.js 2011-02-28 18:57:59 UTC (rev 11585)
@@ -0,0 +1,253 @@
+var selectedFeature = null;
+
+$(document).ready(function() {
+
+ // Start with the map page
+ if (window.location.hash && window.location.hash!='#mappage') {
+ $.mobile.changePage('mappage');
+ }
+
+ // fix height of content
+ function fixContentHeight() {
+ var footer = $("div[data-role='footer']:visible"),
+ content = $("div[data-role='content']:visible:visible"),
+ viewHeight = $(window).height(),
+ contentHeight = viewHeight - footer.outerHeight();
+
+ if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
+ contentHeight -= (content.outerHeight() - content.height());
+ content.height(contentHeight);
+ }
+ if (window.map) {
+ map.updateSize();
+ } else {
+ // initialize map
+ init();
+ }
+ }
+ $(window).bind("orientationchange resize pageshow", fixContentHeight);
+ fixContentHeight();
+ //init();
+
+ // Map zoom
+ $("#plus").click(function(){
+ map.zoomIn();
+ });
+ $("#minus").click(function(){
+ map.zoomOut();
+ });
+ var control = map.getControlsBy("id", "locate-control")[0]
+ $("#locate").click(function(){
+ var control = map.getControlsBy("id", "locate-control")[0];
+ if (control.active) {
+ control.getCurrentLocation();
+ } else {
+ control.activate();
+ }
+ });
+ var searchLayer = new OpenLayers.Layer.Vector("Search", {
+ styleMap: new OpenLayers.StyleMap({
+ 'fillColor': 'red',
+ 'fillOpacity': .8,
+ 'pointRadius': 5
+ })});
+ map.addLayer(searchLayer);
+/* var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
+ styleMap: new OpenLayers.StyleMap({
+ externalGraphic: "img/mobile-loc.png",
+ graphicOpacity: 1.0,
+ graphicWith: 16,
+ graphicHeight: 26,
+ graphicYOffset: -26
+ })
+ });
+
+ var sprinters = getFeatures();
+ sprintersLayer.addFeatures(sprinters);
+ map.addLayer(sprintersLayer);
+ */
+
+ var selectControl = new OpenLayers.Control.SelectFeature(searchLayer, {onSelect: function(feature){
+ selectedFeature = feature;
+ $.mobile.changePage($("#popup"), "pop");
+ }});
+
+ map.addControl(selectControl);
+ selectControl.activate();
+
+ $('div#popup').live('pageshow',function(event, ui){
+ var li = "";
+ for(var attr in selectedFeature.attributes){
+ li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>"
+ + selectedFeature.attributes[attr] + "</div></li>";
+ }
+ $("ul#details-list").empty().append(li).listview("refresh");
+ });
+
+ $('#searchpage').live('pageshow',function(event, ui){
+ $('#query').bind('change', function(e){
+ $('#search_results').empty();
+ if ($('#query')[0].value === '') {
+ return;
+ }
+ $.mobile.pageLoading();
+
+ // Prevent form send
+ e.preventDefault();
+
+ var center = map.getCenter().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
+ var params = {
+ 'vi': 'where',
+ 'lat': center.lat,
+ 'lon': center.lon,
+ 'la': 'eng-uk',
+ 'dv': 'oviMaps',
+ 'client': 'OpenLayers',
+ 'tr': 1,
+ 'q': $('#query')[0].value
+ }
+
+ var searchUrl = 'http://where.s2g.gate5.de/NOSe/json?' + OpenLayers.Util.getParameterString(params);
+ $.ajax(searchUrl, {
+ 'jsonp': 'cbfn',
+ 'dataType': 'jsonp',
+ 'success': function(data) {
+ searchLayer.destroyFeatures();
+ var center = map.getCenter().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
+ $.each(data.results, function() {
+ var place = this;
+ var feature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(place.properties.geoLongitude, place.properties.geoLatitude).transform(gg, sm), place.properties
+ );
+ searchLayer.addFeatures([feature]);
+ var placeCenter = new OpenLayers.LonLat(place.properties.geoLongitude, place.properties.geoLatitude);
+ var distance = OpenLayers.Util.distVincenty(center, placeCenter);
+ var title = place.properties.title;
+ var addrKeys = ['addrHouseNumber', 'addrStreetName', 'addrCityName', 'addrPostalCode', 'addrCountryName'];
+ var addr = []
+ for (var i = 0; i < addrKeys.length; i++) {
+ if (place.properties[addrKeys[i]]) {
+ addr.push(place.properties[addrKeys[i]]);
+ }
+ }
+ addr = addr.join(", ");
+
+ $('<li>')
+ .hide()
+ .append($('<h2 />', {
+ text: place.properties.title
+ }))
+ .append($('<p />', {
+ html: '<b>' + addr + '</b> ('+OpenLayers.Util.toFloat(distance,3)+'km)'
+ }))
+ .appendTo('#search_results')
+ .click(function() {
+ $.mobile.changePage('mappage');
+ map.setCenter(placeCenter.transform(gg, sm), 15);
+ })
+ .show();
+ });
+ $('#search_results').listview('refresh');
+ $.mobile.pageLoading(true);
+ }
+ });
+ });
+ // only listen to the first event triggered
+ $('#searchpage').die('pageshow', arguments.callee);
+ });
+
+ $('#layerslist').listview();
+ $('<li>', {
+ "data-role": "list-divider",
+ text: "Base Layers"
+ })
+ .appendTo('#layerslist');
+ var baseLayers = map.getLayersBy("isBaseLayer", true);
+ $.each(baseLayers, function() {
+ addLayerToList(this);
+ });
+
+ $('<li>', {
+ "data-role": "list-divider",
+ text: "Overlay Layers"
+ })
+ .appendTo('#layerslist');
+ var overlayLayers = map.getLayersBy("isBaseLayer", false);
+ $.each(overlayLayers, function() {
+ addLayerToList(this);
+ });
+ $('#layerslist').listview('refresh');
+
+ map.events.register("addlayer", this, function(e) {
+ addLayerToList(e.layer);
+ });
+});
+
+function addLayerToList(layer) {
+ var item = $('<li>', {
+ "data-icon": "check",
+ "class": layer.visibility ? "checked" : ""
+ })
+ .append($('<a />', {
+ text: layer.name
+ })
+ .click(function() {
+ $.mobile.changePage('mappage');
+ if (layer.isBaseLayer) {
+ layer.map.setBaseLayer(layer);
+ } else {
+ layer.setVisibility(!layer.getVisibility());
+ }
+ })
+ )
+ .appendTo('#layerslist');
+ layer.events.on({
+ 'visibilitychanged': function() {
+ $(item).toggleClass('checked');
+ }
+ });
+}
+
+function getFeatures(){
+ var features = {
+ "type": "FeatureCollection",
+ "features": [
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1332700, 7906300]},
+ "properties": {"Name": "Igor Tihonov", "Country":"Sweden", "City":"Gothenburg"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [790300, 6573900]},
+ "properties": {"Name": "Marc Jansen", "Country":"Germany", "City":"Bonn"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [568600, 6817300]},
+ "properties": {"Name": "Bart van den Eijnden", "Country":"Netherlands", "City":"Utrecht"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-7909900, 5215100]},
+ "properties": {"Name": "Christopher Schmidt", "Country":"United States of America", "City":"Boston"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-937400, 5093200]},
+ "properties": {"Name": "Jorge Gustavo Rocha", "Country":"Portugal", "City":"Braga"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-355300, 7547800]},
+ "properties": {"Name": "Jennie Fletcher ", "Country":"Scotland", "City":"Edinburgh"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657068.53608487, 5712321.2472725]},
+ "properties": {"Name": "Bruno Binet ", "Country":"France", "City":"Chambéry"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [667250.8958124, 5668048.6072737]},
+ "properties": {"Name": "Eric Lemoine", "Country":"France", "City":"Theys"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [653518.03606319, 5721118.5122914]},
+ "properties": {"Name": "Antoine Abt", "Country":"France", "City":"La Motte Servolex"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657985.78042416, 5711862.6251028]},
+ "properties": {"Name": "Pierre Giraud", "Country":"France", "City":"Chambéry"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [742941.93818208, 5861818.9477535]},
+ "properties": {"Name": "Stéphane Brunner", "Country":"Switzerland", "City":"Paudex"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [736082.61064069, 5908165.4649505]},
+ "properties": {"Name": "Frédéric Junod", "Country":"Switzerland", "City":"Montagny-près-Yverdon"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [771595.97057525, 5912284.7041793]},
+ "properties": {"Name": "Cédric Moullet", "Country":"Switzerland", "City":"Payerne"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [744205.23922364, 5861277.319748]},
+ "properties": {"Name": "Benoit Quartier", "Country":"Switzerland", "City":"Lutry"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1717430.147101, 5954568.7127565]},
+ "properties": {"Name": "Andreas Hocevar", "Country":"Austria", "City":"Graz"}},
+ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-12362007.067301,5729082.2365672]},
+ "properties": {"Name": "Tim Schaub", "Country":"United States of America", "City":"Bozeman"}}
+ ]
+ };
+
+ var reader = new OpenLayers.Format.GeoJSON();
+
+ return reader.read(features);
+}
More information about the Commits
mailing list