TagOpenLayers

Julkiset 0.2 Android-mobiilisovellus

Julkiset on pk-seudun julkiseenliikenteeseen suunnattu mobiilipalvelu, joka toimii reittioppaan tavoin. Julkiset -sovelluksen uutena ominaisuutena on pysäkkihälytys. Julkiset-sovelluksen kehittymistä voit seurata tästä blogista tai lataamalla sovelluksen Google Play:stä.

Sovelluksen kehittäminen aloitettiin 1.12. jolloin lähdin listaamaan sovelluksessa tarvittavat toiminnot. Samalla harjoittelin myös OpenLayersin käyttöä, ja kokeilin kuinka se istuu kännykän näytölle. Tein myös muita pienempiä projekteja OpenLayersin kanssa, ja julkaisin siitä muutaman myös tänne luettavaksi.

5.12-9.12. Aloin kokoamaan osia yhteen, ja hakemaan kaikkia toimintoja. Ongelmitta ei myöskään selvitty. Ensinä heti tuli esille, etten koneeltani saanut haetuksi reittioppaan API:sta mitään. Ongelman syyksi myöhemmin selvisi Same Origin Policy, joka estää käyttäjän tehdä cross-domain pyyntöjä. PhoneGap:llä Same Policy Origin salli oletuksena kaikki yhteydet, ja niitä pystyi myös helposti hallinnoimaan whitelist:stä. Sain kuitenkin lokaalisti firefoxilla haettua dataa normaalisti, ja näin pystyttiin jatkamaan debuggaamista tietokoneelta käsin.

10.12-13.12. Aloin keskittymään hieman ulkoasuun, jotta saisin 13.12. järjestettävään sovelluksien demo-tilaisuuteen toimivan ja näyttökelpoisen version valmiiksi. Valitsin ulkoasuksi jQueryMobilen, jolla saa helposti hienoja kännykkäkäyttöliittymiä tehdyksi. Ongelmaksi kuitenkin piakkoin astui yhteensopivuus ongelma OpenLayersin kanssa. Löysin pitkän etsinnän jälkeen jonkin näköisen fiksin, kuinka tämän sai korjatuksi.

14.12-16.12. Jatkoin kehittämistä, jotta saisin sunnuntaille version jonka saisin julkaistua Google Play:hin, ja palautettua sen Terolle mobiilituotekehitys kurssin pitäjälle. Paikannuksessa tuli jotain hämäriä ongelmia, etten saanut käyttäjän sen hetkistä sijaintia millään selvitettyä. Jouduin ensimmäiseen beta-version näin ollen julkaisemaan ilman pysäkkihälytystä. Kehitys jatkuu ensi viikolla, jolloin tavoitteena on saada toimiva kunnon versio jakeluun.

Nimi: Julkiset
Kuvaus: Julkiset on pk-seudun julkiseen liikenteeseen suunnattu mobiilipalvelu, joka toimii reittioppaan tavoin. Julkiset -sovelluksen uutena ominaisuutena on pysäkkihälytys (ei toiminnassa vielä beta-vaiheessa).
Status: beta
Asennuspaketti: http://nikokiuru.com/apk/julkiset20.apk
Lähdekoodit: https://github.com/kiuru/Julkiset
Google Play: https://play.google.com/store/apps/details?id=com.nikokiuru.julkiset
Tekinen toteutus: Sovellus hakee reittitiedot hsl:n reittiopas api:sta, ja tulostaa eri välipysäkit kartalle. Ohjelma käyttää hyväkseen OpenLayerssiä, joka tulostaa näytölle OpenStreetMapin. Ulkoasu on toteutettu jQueryMobilella.
Ruutukaappaus:

Screenshot_2012-12-16-19-23-33:Screenshot_2012-12-16-19-23-53 Screenshot_2012-12-16-19-24-37 Screenshot_2012-12-16-19-24-47

How to draw lines with OpenLayers

There is example source code, how you can draw lines with OpenLayers.

Draw one line:

<!DOCTYPE html>
<html>
	<head>
		<title>DrawLine</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="map" style="top: 0; left: 0; bottom: 0; right: 0; position: fixed;"></div>
		
		<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<script type="text/javascript">
			// Initialize
			var mapnik         = new OpenLayers.Layer.OSM(); // OpenStreetMap
			var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
			var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
			var lon			   = 24.9342;
			var lat			   = 60.2017;
			var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
			var positiontwo    = new OpenLayers.LonLat(30.9342, 62.2017).transform( fromProjection, toProjection);
			var zoom           = 5; 
			
			var map = new OpenLayers.Map("map");
			map.addLayer(mapnik);
			
			// Add marker
			var markers = new OpenLayers.Layer.Markers( "Markers" );
			map.addLayer(markers);
			markers.addMarker(new OpenLayers.Marker(position));
			
			// Start and end point
			var start_point = new OpenLayers.Geometry.Point(lon, lat).transform( fromProjection, toProjection);
			var end_point = new OpenLayers.Geometry.Point(30.9342, 62.2017).transform( fromProjection, toProjection);
			
			// new vector graphic layer
			var vector = new OpenLayers.Layer.Vector();
			
			// Make line
			var line = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([start_point, end_point]));
			// Add new feature to layer named by vector
			vector.addFeatures([line]);
			// Add vector layer to map
			map.addLayers([vector]);
			
			map.setCenter(position, zoom );
		</script>
	</body>
</html>

Draw multiple lines:

<!DOCTYPE html>
<html>
	<head>
		<title>Draw MultiLines</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="map" style="top: 0; left: 0; bottom: 0; right: 0; position: fixed;"></div>

		<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<script type="text/javascript">
			// Initialize
			var mapnik         = new OpenLayers.Layer.OSM(); // OpenStreetMap
			var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
			var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
			var lon			   = 24.9342;
			var lat			   = 60.2017;
			var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
			var zoom           = 5; 
			
			var map = new OpenLayers.Map("map");
			map.addLayer(mapnik);
			
			// Add marker
			var markers = new OpenLayers.Layer.Markers( "Markers" );
			map.addLayer(markers);
			markers.addMarker(new OpenLayers.Marker(position));
			
			// Add Vector
			var vector = new OpenLayers.Layer.Vector();
			map.addLayers([vector]);
			
			// Start and end point
			var start_point = new OpenLayers.Geometry.Point(lon, lat).transform( fromProjection, toProjection);
			var end_point = new OpenLayers.Geometry.Point(30.9342, 62.2017).transform( fromProjection, toProjection);
			var line = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([start_point, end_point]));
			vector.addFeatures([line]);
			
			// Line styles
			var style = {
				strokeColor: "#00FF00",
				strokeWidth: 5,
				strokeDashstyle: "dashdot",
			};
			
			// Add second end point
			var other_end_point = new OpenLayers.Geometry.Point(10.9342, 30.2017).transform( fromProjection, toProjection);
			
			// Add second line
			var geo = new OpenLayers.Geometry.LineString([start_point, other_end_point]);
			var secondLine = new OpenLayers.Feature.Vector(geo, null, style); // Add styles what we made earlie to Vector construct
			vector.addFeatures([secondLine]);
			
			map.setCenter(position, zoom );
		</script>
	</body>
</html>

OpenLayers and OpenStreetMap for beginner

Add free map your website through this step-by-step tutorial.

No API key needed.

Source Code:

<div id="map" style="top: 0; left: 0; bottom: 0; right: 0; position: fixed;"></div>

Add div #map in your html body.

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

Add OpenLayers.js javascript library to html document end of [/body].

var lat            = 60.230506;
var lon            = 24.847194
var zoom           = 10;

Initialize variables.

var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);

Transform coordinates EPSG position.

var map = new OpenLayers.Map("map");

Add new OpenLayers map to div by id #map.

var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

Add OpenStreetMap background to layer.

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));

Add new markers to position you created.

map.setCenter(position, zoom);

And finally center map to your created position.

Whole html file looks like this:

<!DOCTYPE html>
<html>
	<head>
		<title>OpenLayers Example</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="map" style="top: 0; left: 0; bottom: 0; right: 0; position: fixed;"></div>
		<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<script>
			var lat            = 60.230506;
			var lon            = 24.847194
			var zoom           = 10;
			
			var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
			var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
			var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
			
			var map = new OpenLayers.Map("map");
			
			// Add OpenStreetMap to layer
			var mapnik         = new OpenLayers.Layer.OSM();
			map.addLayer(mapnik);
			
			// Add markers to layer
			var markers = new OpenLayers.Layer.Markers( "Markers" );
			map.addLayer(markers);
			markers.addMarker(new OpenLayers.Marker(position));
			
			map.setCenter(position, zoom);
		</script>
	</body>
</html>

Mobiilituotekehitys -kurssin oma projekti, PysäkkiHäly

Tero Karvisen vetämä mobiilituotekehitys (http://terokarvinen.com/2012/aikataulu-mobiilituotekehitys-bus4tn008-2) -kurssin omaksi projektiksi aion tehdä PysäkkiHälytyksen, joka ilmottaa käyttäjälleen milläin hänen täytyy jäädä julkisenliikenteen ajoneuvosta. Ohjelma toimii vain pääkaupunkiseudulla, koska pysäkkien sijainnit tarjoaa HSL joka on rajoittunut vain pk-seudulle. Tein pienimuotosen “Hei Maailma!” tyyppisen ohjelman OpenLayersin käytöstä.

Tämä koodi tulostaa näytölle OpenLayersin.

<!DOCTYPE HTML>
<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

Lähde: OpenLayers http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

Kilpailijakatsaus:
Reittioppaan tyyppinen kännykkäsovellus nimeltään Andropas sekä pysäkkihälytystä mainostava Droidpas ovat lähimmät kilpailukumppanit.

Minun ensimmäinen PhoneGap Android-ohjelma

Aloitin Tero Karvisen vetämän mobiilituotekehitys kurssin (Kurssin sivut), jossa harjoittelemme PhonenGapin käyttöä ja applicaatioiden tekemistä mobiililaitteille. Ensimmäisen viikon tehtäväksi saimme tehdä omavalintaisen ensimmäisen ohjelman. Ensimmäinen ohjelma tietty oli Hello World, jonka tekemiseen löytyvät ohjeet Teron kotisivuilta: http://terokarvinen.com/2012/hello-phonegap-from-xubuntu-12-04-live-cd.

Hello Worldin lisäksi kokeilin vielä kuinka näppärästi OpenStreetMapin sai näytetyksi kännykän näytölle. Alkuperänen tarkoitus oli rakentaa ohjelma, joka hyväksikäyttää TieInfon json-rajapintaa, josta olisin saanut koko Suomen kattavan sää mittauspisteiden datat. Kuitenkin monien yritysten jälkeen en saanut jostain syystä javascriptillä haettua yhtikäs mitään dataa. Ongelma ei vielä ehtinyt ratketa, mutta tulen myöhemmin päivittämään mistä se jäi kiinni.

Mutta itse OpenStreetMap ohjelman tekoon. Aluksi sinun tarvitsee hakea OpenLayer.js -kirjasto osoitteesta: http://openlayers.org/download/OpenLayers-2.12.tar.gz ja viedä se assets/www/OpenLayers-2.12 -hakemistoon. Seuraavaksi lisäät seuraavan koodin index.html.

<!DOCTYPE HTML>
<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script type="text/javascript" src="OpenLayers-2.12/OpenLayers.js">
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

Seuraavaksi voit ajaa koodin ja sinulle generoituu valmis ohjelma, joka näyttää vain OpenStreetMapin. Ohjelmaan olisi hyvin voinut lisätä vielä paikannuksen, mutta sisäoloissa en joko saanut kännykälläni gps yhteyttä taikka se ei muuten vain pelittänyt. Kokeillaan myöhemmin uudemman kerran.

Nimi: Kartta
Kuvaus: Ohjelma näyttää OpenStreetMapin
Status: alpha
Lisenssi: GPL v2
Asennuspaketti: http://myy.haaga-helia.fi/~a1102088/mobiilituotekehitys/Kartta.apk
Lähdekoodit: Näkyvissä ylhäällä
Tekinen toteutus: Ohjelma avaa OpenLayerin, joka näyttää OpenStreetMap:n kartan.

© 2017 Niko Kiuru

Theme by Anders NorenUp ↑