davblog: webdev and stuff http://www.d-mueller.de/blog jeden Tag ein bisschen besser Mon, 31 Oct 2011 22:35:37 +0000 en hourly 1 http://wordpress.org/?v=3.3 PHP WTF #7 http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/F1wU_LxO8kQ/ http://www.d-mueller.de/blog/php-wtf-7/#comments Mon, 31 Oct 2011 22:35:37 +0000 david http://www.d-mueller.de/blog/?p=623 Weiterlesen →]]> Direkt entliehen von hier und ein schönes Beispiel für PHPs Handling mit Unicode-Zeichen:

1
2
3
4
5
<meta charset="utf8">
<?php
$a = 'äa';
echo "with space: " . $a[0] . " " . $a[1] . "<br />";  //� �
echo "without space: " . $a[0] . $a[1] . "<br />"; //ä

bzw. analog dazu:

1
2
3
4
5
<meta charset="utf8">
<?php
$a = 'äa';
echo "substr 0,1: " . substr($a, 0, 1) . "<br />"; //�
echo "substr 0,2: " . substr($a, 0, 2) . "<br />"; //ä

Klar: Das ä belegt 2 Byte:

1
2
3
4
<?php
$a = 'äa';
echo "strlen: " . strlen($a) . "<br />"; //3
echo "mb_strlen: " . mb_strlen($a, "UTF-8") . "<br />"; //2

Schon besser:

1
2
3
4
5
<meta charset="utf8">
<?php
$a = 'äa';
echo "mb_substr 0,1: " . mb_substr($a, 0, 1, "UTF-8") . "<br />"; //ä
echo "mb_substr 0,2: " . mb_substr($a, 0, 2, "UTF-8") . "<br />"; //äa

Mir war das zwar im Prinzip schon alles klar, durch so ein Beispiel wird aber nochmal deutlich, dass man die nicht-mb_* – Funktionen partout meiden sollte.Weitere Posts:

]]> http://www.d-mueller.de/blog/php-wtf-7/feed/ 3 http://www.d-mueller.de/blog/php-wtf-7/ Best-of-the-Web 10 http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/tbvH3dMbiZY/ http://www.d-mueller.de/blog/best-of-the-web-10/#comments Mon, 24 Oct 2011 09:18:32 +0000 david http://www.d-mueller.de/blog/?p=622 Weiterlesen →]]> Neue Linkwelle!

Weitere Posts:

]]> http://www.d-mueller.de/blog/best-of-the-web-10/feed/ 0 http://www.d-mueller.de/blog/best-of-the-web-10/ Umkreissuche: Lat/Long und der Radius http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/Q5bNqb9gh1U/ http://www.d-mueller.de/blog/umkreissuche-latlong-und-der-radius/#comments Mon, 17 Oct 2011 17:11:58 +0000 david http://www.d-mueller.de/blog/?p=617 Weiterlesen →]]> Aufgabenstellung: Ich weiß, wo ich mich befinde (Lat / Long, ist ja aus den Smartphones easy herauszubekommen) und habe einen Radius in km, in dem ich POI’s mit der Open Streemap API suchen möchte.

Problem: Die OSM API bietet keine (mir bekannte) Möglichkeit, um meinen aktuellen Standort herum eine Radius-Suche in km auszuführen, sondern hätte gern eine Bounding Box angegeben, die die Ecken der Box als Geo-Koordinaten angibt – siehe hier:

1
http://www.overpass-api.de/api/xapi?node[bbox=8.62,49.85,8.68,49.89][amenity=fast_food|pub][@meta]

Dabei spezifiziert der Parameter bbox die Lat/Long-Koordinaten in der Reihenfolge links, oben, rechts, unten.

Dazu erstmal zum Verständnis:

  • Der Breitengrad (Latitude) gibt die Nord-Südachse an, “50″ ist nördlicher als “49″
  • Der Längengrad (Longitude) gibt die Ost-Westachse an, “5″ ist westlicher als “6″

Berechnung

Nun haben wir also den eigenen Standort, wissen über Lat/Long Bescheid und wollen die Eckpunkte für die oben angesprochene Bounding Box errechnen. Aufbauend auf diesem Artikel habe ich folgende PHP-Funktion gebaut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$lat = 49.869059;
$lon = 8.645318;
$radius = 1.5;

/**
 * lat (breitengrad = nord -> sued): 50 ist noerdlicher als 49
 * lon (längengrad = west -> ost): 5 ist westlicher als 6  
 */
function getBoundingBox($lat, $lon, $radius)
{
    $earth_radius = 6371;
    $maxLat = $lat + rad2deg($radius/$earth_radius);
    $minLat = $lat - rad2deg($radius/$earth_radius);
    $maxLon = $lon + rad2deg($radius/$earth_radius/cos(deg2rad($lat)));
    $minLon = $lon - rad2deg($radius/$earth_radius/cos(deg2rad($lat)));
   
    return array
    (
        "center" => array("lat" => $lat, "lon" => $lon),
        "nw" => array("lat" => $maxLat, "lon" => $minLon),
        "ne" => array("lat" => $maxLat, "lon" => $maxLon),
        "sw" => array("lat" => $minLat, "lon" => $minLon),
        "se" => array("lat" => $minLat, "lon" => $maxLon)
    );
}

$coords = getBoundingBox($lat, $lon, $radius);

print_r($coords);
/*

Array
(
    [center] => Array
        (
            [lat] => 49.869059
            [lon] => 8.645318
        )

    [nw] => Array
        (
            [lat] => 49.882548824089
            [lon] => 8.6243885076019
        )

    [ne] => Array
        (
            [lat] => 49.882548824089
            [lon] => 8.6662474923981
        )

    [sw] => Array
        (
            [lat] => 49.855569175911
            [lon] => 8.6243885076019
        )

    [se] => Array
        (
            [lat] => 49.855569175911
            [lon] => 8.6662474923981
        )

)
*/

Somit haben wir schonmal die Eckpunkte für den Radius 1,5km um unseren Mittelpunkt ausgerechnet.

Darstellen der Eckpunkte auf einer Google Map

Zur Verifikation der errechneten Eckpunkte muss Quick&Dirty eine googlemap herhalten (inspiriert von hier).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function init()
    {
        var markers = [];

        <?php
        foreach ($coords as $desc => $latlong)
        {
        ?>
            markers.push({
                'lat' : <?php echo $latlong['lat']; ?>,
                'lon' : <?php echo $latlong['lon']; ?>,
                'desc' : "<?php echo $desc; ?>"
            });
        <?php
        }
        ?>

        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 11,
            center: new google.maps.LatLng(<?php echo $coords['center']['lat'] . "," . $coords['center']['lon']; ?>),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        for (var i = 0; i < markers.length; i++) {
            new google.maps.Marker({
                position: new google.maps.LatLng(markers[i].lat, markers[i].lon),
                map: map,
                title: markers[i].desc
            });  
        }
    }
 
 window.onload = init;
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>
radius

radius

Sieht doch gut aus. Somit haben wir unsere Bounding Box Koordinaten auch visuell dargestellt und können die OSM API damit füttern.

Und hier nochmal der komplette Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?php
$lat = 49.869059;
$lon = 8.645318;
$radius = 1.5;

/**
 * lat (breitengrad = nord -> sued): 50 ist noerdlicher als 49
 * lon (längengrad = west -> ost): 5 ist westlicher als 6  
 */
function getBoundingBox($lat, $lon, $radius)
{
    $earth_radius = 6371;
    $maxLat = $lat + rad2deg($radius/$earth_radius);
    $minLat = $lat - rad2deg($radius/$earth_radius);
    $maxLon = $lon + rad2deg($radius/$earth_radius/cos(deg2rad($lat)));
    $minLon = $lon - rad2deg($radius/$earth_radius/cos(deg2rad($lat)));
   
    return array
    (
        "center" => array("lat" => $lat, "lon" => $lon),
        "nw" => array("lat" => $maxLat, "lon" => $minLon),
        "ne" => array("lat" => $maxLat, "lon" => $maxLon),
        "sw" => array("lat" => $minLat, "lon" => $minLon),
        "se" => array("lat" => $minLat, "lon" => $maxLon)
    );
}

$coords = getBoundingBox($lat, $lon, $radius);
?>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function init()
    {
        var markers = [];

        <?php
        foreach ($coords as $desc => $latlong)
        {
        ?>
            markers.push({
                'lat' : <?php echo $latlong['lat']; ?>,
                'lon' : <?php echo $latlong['lon']; ?>,
                'desc' : "<?php echo $desc; ?>"
            });
        <?php
        }
        ?>

        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 11,
            center: new google.maps.LatLng(<?php echo $coords['center']['lat'] . "," . $coords['center']['lon']; ?>),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        for (var i = 0; i < markers.length; i++) {
            new google.maps.Marker({
                position: new google.maps.LatLng(markers[i].lat, markers[i].lon),
                map: map,
                title: markers[i].desc
            });  
        }
    }
 
  window.onload = init;
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

Weitere Posts:

]]> http://www.d-mueller.de/blog/umkreissuche-latlong-und-der-radius/feed/ 1 http://www.d-mueller.de/blog/umkreissuche-latlong-und-der-radius/ Open Streetmap API Tutorial: Umkreissuche http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/zoaOodytwPM/ http://www.d-mueller.de/blog/open-streetmap-api-tutorial-umkreissuche/#comments Mon, 17 Oct 2011 16:51:17 +0000 david http://www.d-mueller.de/blog/?p=616 Weiterlesen →]]> Für ein Hochschulprojekt (“Ortsbezogene Freizeitgestaltung”) gilt es, die Open Streetmap API zum finden von POI’s in der Umgebung zu verwenden. In Darmstadt ist auf der OSM fast jede Parkbank kategorisiert. Also frisch ans Werk!

API Overflow! – Kurzvorstellung der einzelnen APIs

  • Die eigentliche OSM-Api (aktuell: v0.6) fokussiert sich eher auf das Erstellen, Bearbeiten und Auslesen von speziellen Punkten. Weniger hilfreich für den Zweck der Umkreissuche.
  • Die Overpass (X)API macht uns schon glücklicher. Per REST geben wir den Typ der zu suchenden Punkte in einem einzugrenzenden Bereich an. Beispiele folgen.
  • Die Nominatim API ist am simpelsten zu verwenden: Einfach als Query-Parameter “Pub, Darmstadt” angehangen und los gehts. Auch dazu gleich mehr.

Die Noninatim API

Alle Cafes in Darmstadt gesucht?

1
http://nominatim.openstreetmap.org/search?q=cafe+darmstadt&format=xml&polygon=0&addressdetails=1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<searchresults timestamp="Mon, 17 Oct 11 12:20:28 -0400" attribution="Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0." querystring="cafe darmstadt" polygon="false" exclude_place_ids="6854404,1531978,7020825,8296635,12289661,4985586,7174479,5407915,4156862,1062456" more_url="http://open.mapquestapi.com/nominatim/v1/search?format=xml&exclude_place_ids=6854404,1531978,7020825,8296635,12289661,4985586,7174479,5407915,4156862,1062456&accept-language=de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4&addressdetails=1&q=cafe+darmstadt">
    <place place_id="6854404" osm_type="node" osm_id="634426402" place_rank="30" boundingbox="50.0020887756,50.0220925903,8.57511543274,8.59511638641" lat="50.0120924" lon="8.5851157" display_name="cafe, Aschaffenburger Straße, Walldorf, Mörfelden-Walldorf, Groß-Gerau, Regierungsbezirk Darmstadt, Hessen, 64546, Bundesrepublik Deutschland (Landmasse)" class="amenity" type="cafe" icon="http://open.mapquestapi.com/nominatim/v1/images/mapicons/food_cafe.p.20.png">
        <cafe>cafe</cafe>
        <road>Aschaffenburger Straße</road>
        <suburb>Walldorf</suburb>
        <city>Mörfelden-Walldorf</city>
        <county>Groß-Gerau</county>
        <state_district>Regierungsbezirk Darmstadt</state_district>
        <state>Hessen</state>
        <boundary>64546</boundary>
        <country>Bundesrepublik Deutschland (Landmasse)</country>
        <country_code>de</country_code>
    </place>
    <place place_id="1531978" osm_type="node" osm_id="307367574" place_rank="30" boundingbox="49.8644659424,49.8844697571,8.65217708588,8.67217803955" lat="49.8744697" lon="8.6621778" display_name="Pueblo, 5-7, Erbacher Straße, Mathildenhöhe, Darmstadt, Darmstadt, Stadt, Regierungsbezirk Darmstadt, Hessen, 64283, Bundesrepublik Deutschland (Landmasse)" class="amenity" type="pub" icon="http://open.mapquestapi.com/nominatim/v1/images/mapicons/food_pub.p.20.png">
        <pub>Pueblo</pub>
        <house_number>5-7</house_number>
        <road>Erbacher Straße</road>
        <suburb>Mathildenhöhe</suburb>
        <city>Darmstadt</city>
        <county>Darmstadt, Stadt</county>
        <state_district>Regierungsbezirk Darmstadt</state_district>
        <state>Hessen</state>
        <postcode>64283</postcode>
        <boundary>64287</boundary>
        <country>Bundesrepublik Deutschland (Landmasse)</country>
        <country_code>de</country_code>
    </place>
    ...
</searchresults>

Auf der Wiki-Seite zu Nominatim finden sich alle Parameter.

Noch ein Beispiel: Wir suchen alle Cafes und Pubs im Bereich 8.62 , 49.85 , 8.68 , 49.89 (Parameter viewbox = left,top,right,bottom)

1
http://nominatim.openstreetmap.org/search?viewbox=8.62,49.85,8.68,49.89&bounded=1&format=xml&polygon=0&addressdetails=1&q=[cafe][,pub]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<searchresults timestamp="Mon, 17 Oct 11 12:28:03 -0400" attribution="Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0." querystring=" [,pub]" polygon="false" exclude_place_ids="8064325,1531978,1542766,7020825,1562941,5484206,8296635,3710437,4985586,1545901" more_url="http://open.mapquestapi.com/nominatim/v1/search?format=xml&exclude_place_ids=8064325,1531978,1542766,7020825,1562941,5484206,8296635,3710437,4985586,1545901&accept-language=de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4&addressdetails=1&viewbox=8.62%2C49.85%2C8.68%2C49.89&q=+%5B%2Cpub%5D">
    <place place_id="8064325" osm_type="node" osm_id="769080882" place_rank="30" boundingbox="49.8722135925,49.8922174072,8.64747070313,8.6674716568" lat="49.8822173" lon="8.6574715" display_name="Weinstube Osttangente, Arheilger Straße, Martinsviertel-West, Darmstadt, Stadt, Regierungsbezirk Darmstadt, Hessen, 64289, Bundesrepublik Deutschland (Landmasse)" class="amenity" type="pub" icon="http://open.mapquestapi.com/nominatim/v1/images/mapicons/food_pub.p.20.png">
        <pub>Weinstube Osttangente</pub>
        <road>Arheilger Straße</road>
        <suburb>Martinsviertel-West</suburb>
        <place>Martinsviertel-West</place>
        <county>Darmstadt, Stadt</county>
        <state_district>Regierungsbezirk Darmstadt</state_district>
        <state>Hessen</state>
        <boundary>64289</boundary>
        <country>Bundesrepublik Deutschland (Landmasse)</country>
        <country_code>de</country_code>
    </place>
    <place place_id="1542766" osm_type="node" osm_id="310264485" place_rank="30" boundingbox="49.864874115,49.8848779297,8.64108585358,8.66108680725" lat="49.8748742" lon="8.6510865" display_name="Cafe Espenschied, Mathildenplatz, Stadtzentrum, Darmstadt, Darmstadt, Stadt, Regierungsbezirk Darmstadt, Hessen, 64283, Bundesrepublik Deutschland (Landmasse)" class="amenity" type="cafe" icon="http://open.mapquestapi.com/nominatim/v1/images/mapicons/food_cafe.p.20.png">
        <cafe>Cafe Espenschied</cafe>
        <road>Mathildenplatz</road>
        <suburb>Stadtzentrum</suburb>
        <city>Darmstadt</city>
        <county>Darmstadt, Stadt</county>
        <state_district>Regierungsbezirk Darmstadt</state_district>
        <state>Hessen</state>
        <boundary>64283</boundary>
        <country>Bundesrepublik Deutschland (Landmasse)</country>
        <country_code>de</country_code>
    </place>
    ...
</searchresults>

Diese Anfrage hat den Vorteil, dass wir nicht den Ortsnamen kennen müssen, sondern einfach die Koordinaten reinstecken können.

Ähnlich zur hier vorgestellten Yahoo Placefinder API lassen sich mit Nominatim auch noch Geo-Lookups betreiben:

1
http://nominatim.openstreetmap.org/reverse?format=xml&lat=49.869074&lon=8.645331&zoom=18&addressdetails=1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<reversegeocode timestamp="Mon, 17 Oct 11 12:32:36 -0400" attribution="Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0." querystring="format=xml&lat=49.869074&lon=8.645331&zoom=18&addressdetails=1">
    <result place_id="53116836" osm_type="way" osm_id="54818914" lat="49.8689123945855" lon="8.64516022575963">
    Studentenwohnheim Neckarstraße, Elisabethenstraße, Rheintor/Grafenstraße, Darmstadt, Darmstadt, Stadt, Regierungsbezirk Darmstadt, Hessen, 64283, Bundesrepublik Deutschland (Landmasse)
    </result>
    <addressparts>
        <building>Studentenwohnheim Neckarstraße</building>
        <road>Elisabethenstraße</road>
        <suburb>Rheintor/Grafenstraße</suburb>
        <city>Darmstadt</city>
        <county>Darmstadt, Stadt</county>
        <state_district>Regierungsbezirk Darmstadt</state_district>
        <state>Hessen</state>
        <boundary>64283</boundary>
        <country>Bundesrepublik Deutschland (Landmasse)</country>
        <country_code>de</country_code>
    </addressparts>
</reversegeocode>

Overpass (X)API

Noch etwas feingranular können wir unsere Anfrage mit der Overpass (X)API gestalten, die ebenfalls per REST zu befeuern ist (siehe ergänzend auch die Doku zur XAPI).

Wir wollen alle Pubs und Fast-Food-Lokale in der Box 8.62 , 49.85 , 8.68 , 49.89 haben? Kein Problem!

1
http://www.overpass-api.de/api/xapi?node[bbox=8.62,49.85,8.68,49.89][amenity=fast_food|pub][@meta]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<osm version="0.6" generator="Overpass API">
<note>The data included in this document is from www.openstreetmap.org. It has there been collected by a large group of contributors. For individual attribution of each item please refer to http://www.openstreetmap.org/api/0.6/[node|way|relation]/#id/history </note>
<meta osm_base="2011-10-17T16\:36\:02Z"/>
  <node id="24924135" lat="49.8800621" lon="8.6453454" version="11" timestamp="2011-06-13T19:02:36Z" changeset="8424331" uid="290680" user="wheelmap_visitor">
    <tag k="addr:city" v="Darmstadt"/>
    <tag k="addr:housenumber" v="41"/>
    <tag k="addr:postcode" v="64293"/>
    <tag k="addr:street" v="Kahlertstraße"/>
    <tag k="amenity" v="pub"/>
    <tag k="name" v="Kneipe 41"/>
    <tag k="note" v="DaLUG Meeting (4st Friday of month 19:30)"/>
    <tag k="smoking" v="no"/>
    <tag k="website" v="http://www.kneipe41.de/"/>
    <tag k="wheelchair" v="limited"/>
  </node>
  <node id="203582455" lat="49.8716253" lon="8.6393520" version="5" timestamp="2011-06-13T19:04:38Z" changeset="8424331" uid="290680" user="wheelmap_visitor">
    <tag k="addr:city" v="Darmstadt"/>
    <tag k="addr:country" v="DE"/>
    <tag k="addr:housenumber" v="69"/>
    <tag k="addr:postcode" v="64295"/>
    <tag k="addr:street" v="Rheinstraße"/>
    <tag k="amenity" v="fast_food"/>
    <tag k="cuisine" v="burger"/>
    <tag k="name" v="McDonald's"/>
    <tag k="website" v="http://www.mcdonalds.com/"/>
    <tag k="wheelchair" v="yes"/>
  </node>
  ...
</osm>

Dabei gibt es offensichtlich noch sehr informative Nebenangaben über die Rollstuhltauglichkeit und allerlei anderer Sachen. Für eine vollständige Angabe aller suchbaren Einrichtungen (“Amenity”) sei hierauf verwiesen: Vom Kino über den Mülleimer gibts alles, was das Herz begehrt. Auch auf die Spezialphrasen sei noch verwiesen.

Die native API

Da wir keine Plätze anlegen möchten, sondern nur Daten von OSM beziehen wollen, bietet die native OSM API nur ein nützliches Feature für uns: Die Location-Suche nach ID. Wenn wir also zu einer oder mehreren Platz-IDs (wie sie bspw. von der Overpass API bzw. Nominatim in der Antwort geliefert werden) nähere Informationen erhalten möchten, kann folgende Query hilfreich sein:

1
http://api.openstreetmap.org/api/0.6/nodes?nodes=307367745,24924135
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<osm version="0.6" generator="OpenStreetMap server">
    <node id="24924135" lat="49.8800621" lon="8.6453454" version="11" changeset="8424331" user="wheelmap_visitor" uid="290680" visible="true" timestamp="2011-06-13T19:02:36Z">
        <tag k="name" v="Kneipe 41"/>
        <tag k="wheelchair" v="limited"/>
        <tag k="addr:postcode" v="64293"/>
        <tag k="addr:housenumber" v="41"/>
        <tag k="addr:city" v="Darmstadt"/>
        <tag k="smoking" v="no"/>
        <tag k="addr:street" v="Kahlertstraße"/>
        <tag k="amenity" v="pub"/>
        <tag k="website" v="http://www.kneipe41.de/"/>
        <tag k="note" v="DaLUG Meeting (4st Friday of month 19:30)"/>
    </node>
    <node id="307367745" lat="49.8702344" lon="8.6507902" version="7" changeset="6121669" user="wheelmap_visitor" uid="290680" visible="true" timestamp="2010-10-21T07:33:35Z">
        <tag k="name" v="Subway"/>
        <tag k="wheelchair" v="yes"/>
        <tag k="addr:postcode" v="64283"/>
        <tag k="addr:housenumber" v="21"/>
        <tag k="addr:city" v="Darmstadt"/>
        <tag k="addr:street" v="Elisabethenstraße"/>
        <tag k="amenity" v="fast_food"/>
        <tag k="addr:country" v="DE"/>
        <tag k="website" v="http://www.subway.com/"/>
        <tag k="cuisine" v="sandwich"/>
    </node>
</osm>

Das war’s vorerst

Wenn ich im Verlaufe des Projekts noch bahnbrechende, neue Erkenntnisse über die OSM API erlangen sollte, gibt es einen Follow-Up Post. So far.

Update: Artikel zur Transformierung von Längenangaben in Geo-Koordinaten ist fertig – Umkreissuche: Lat/Long und der Radius.

Weitere Posts:

]]> http://www.d-mueller.de/blog/open-streetmap-api-tutorial-umkreissuche/feed/ 2 http://www.d-mueller.de/blog/open-streetmap-api-tutorial-umkreissuche/ Javascript String Replace ohne Regex http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/J905nHEPt1U/ http://www.d-mueller.de/blog/javascript-string-replace-ohne-regex/#comments Mon, 17 Oct 2011 16:07:04 +0000 david http://www.d-mueller.de/blog/?p=615 Weiterlesen →]]> Wer eine einfache Variante zum String Replacement benötigt, kann entweder den Regex-Weg gehen (siehe Nachbildung der PHP-Funktion str_replace), oder einen schnuckeligen Trick anwenden:

1
alert("Finde mich".split("Finde").join("Replace"));

Den String zum Array am Suchwort zerlegen und dann mit dem Ersatz das Array wieder zusammenfügen. Brauchte letztens eine Quick&Dirty-Lösung, um Zahlen des Formats

1
600.000,54

in das Javascript geläufige Zahlenformat

1
600000.54

zu überführen, also Dezimalpunkte raus und Komma durch Punkt ersetzen. Gemacht habe ich es so:

1
var num = "600.000,54".split(".").join("").split(",").join(".");

Gewinnt sicher keinen Schönheitspreis, die innovative Verwendung von join und split gefielen mir dann aber doch zu gut ;).Weitere Posts:

]]> http://www.d-mueller.de/blog/javascript-string-replace-ohne-regex/feed/ 3 http://www.d-mueller.de/blog/javascript-string-replace-ohne-regex/ Appentwicklung mit Webtechniken – Appcelerator Titanium http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/HPNxHE_G60A/ http://www.d-mueller.de/blog/appentwicklung-webtechniken-mit-appcelerator-titanium/#comments Sun, 18 Sep 2011 20:18:34 +0000 david http://www.d-mueller.de/blog/?p=593 Weiterlesen →]]> Apps sind zur Zeit in aller Munde. Bekanntlich gibt es mit Android und iOS mal mindestens 2 ernst zu nehmende Plattformen, auf denen man in der Regel vertreten sein möchte. Heißt: Zwei mal dasselbe programmieren, einmal in Java und einmal in Objective C. Das muss nicht sein. Mit dem Cross Platform Framework Appcelerator Titanium wird die Entwicklung in Javascript vorgenommen – nebst Zugriff auf die Gerät-APIs wie Kamera, Beschleunigungsmesser, GPS und allem Klimbim. Nur am Rande: Titanium ist kein kleines Nebenprojekt eines gelangweilten Studenten. Ein paar Millionen Apps sind damit schon erstellt worden, u.a. auch das fies gehypte Wunderlist.

Das, was am Ende dabei rauskommt ist eine vollwertige, native App welche selbst in Apples App-Store Bestand hat. Soweit, wie ich das verstanden haben, wird der von euch geschriebene Javascript-Code im Beispielfalle Android von Titanium in natives Java verwandelt. Ergebnis ist eine verhältnismäßig performante App, gegen die ein Browser ohne UI wie beispielsweise Phonegap abstinkt.

Da die Installation von Titanium allerdings recht komplex ist und man viel falsch machen kann, möchte ich das hier mal Step-by-Step durchziehen. Nicht zuletzt, um es für mich in Stein zu meißeln.

Schritt 1: Java deinstallieren

Titanium ist pingelig. Nach Kompatibilitäts-Matrix muss sich das JDK 1.6 auf dem Rechner befinden. Das Java Runtime Environment (JRE), was die meisten durch Netbeans / Eclipse sowieso schon auf der Kiste haben werden, reicht nicht. Auch neuere Versionen als 1.6 verschmäht Titanium. Wenn ihr nun nicht grade das JDK 1.6 inklusive JRE auf dem Rechner haben solltet: Runter damit.

Java weghauen

Java weghauen

Schritt 2: JDK 1.6 installieren

Downloadlink zum JDK bei Oracle. Die Java DB könnt ihr euch schenken, der Rest muss drauf. Verzeichnis ist dabei egal.

JDK installieren

JDK installieren

Direkt danach wird das JRE noch draufgemacht.

JRE draufmachen

JRE draufmachen

Schritt 3: Java zum PATH hinzufügen

So gehts. Pfad zu eurem \bin – Folder des JDK mit ; an den PATH anfügen.

Java PATH

Java PATH

Schritt 4: Java prüfen

Konsole aufmachen.

1
java -version && javac -version
Java Version Check

Java Version Check

Sowohl java, wie auch javac (Java Compiler) müssen in der gleichen Version 1.6X vorliegen.

Schritt 5: Android SDK installieren

Download hier. Es könnte nun passieren, dass euch das Android SDK beim installieren trotz korrekt eingerichtetem Java folgendes erzählen möchte:

Android SDK: Java not found

Android SDK: Java not found

Ich hab verdutzt 3mal Java neu draufgemacht, eh mich stackoverflow erleuchtete:

Press Back when you get the notification and then Next. This time it will find the JDK.

(I don’t know why, but it works on Windows 7 x64.)

Also zurück, wieder vor und siehe da:

Android SDK: Also doch...

Android SDK: Also doch...

Wichtig: Das Android SDK unbedingt an einen Ort installieren, der keine Leerzeichen im Pfad hat. Am Besten C:\Android. Das Titanium Manual sagt dazu:

Be aware that there is a bug in Revision 12 of the Android SDK Tools package for Windows that prevents applications from being launched if spaces exist in the filesystem path to the Android SDK (ie C:\Program Files (x86)\Android

Allerdings scheint sich das Problem nach meinen Erkenntnissen nicht nur auf die API Version 12 zu beziehen, sondern Titanium generell so sehr zu verwirren, dass das Android SDK nicht mehr gefunden werden kann. Also einfach auf C:\ gekloppt. Wenn ihrs doch schon wo anders hin installiert habt, kann mans auch einfach umkopieren. Scheint portabel zu sein.

Schritt 6: Die richtige API Auswahl

Nun werdet ihr mit allen API-Versionen konfrontiert, die es so im Android Ökosystem gibt. Sieh hierzu: Verbreitung der Android Versionen (Stand: 5.9.2011). Hier lieber zu viel als zu wenig auswählen. Ich habe mich für folgende Konfiguration entschieden:

API Auswahl

API Auswahl

Wichtig: Unbedingt die API Version 7 (Android 2.1) auswählen, sonst mag Titanium das SDK später nicht finden. Die Samples können getrost ignoriert werden, wir wollen ja nicht mit Java sondern mit Titanium entwickeln. Ob ihr Android 3.X mit dabei haben wollt (aktuell noch kaum verbreitet, eher für Tablets geschaffen) bleibt euch überlassen. Nachinstallieren ist übrigens jederzeit möglich.

Die Google API-Versionen scheinen die normalen API’s mit ein paar Erweiterungen für die Google Dienste – aka maps und Konsorten – zu sein. Kann also nicht schaden, die auch noch mit zu installieren.

Der Spaß kann jetzt eine ganze Weile dauern.

Geschafft!

Geschafft!

Schritt 7: Umgebungsvariablen fürs Android SDK

Zum Path hinzuzufügen:

1
C:\Android\android-sdk\platform-tools;C:\Android\android-sdk\tools

Sowie unter der neu zu erstellenden Variablen ANDROID_SDK:

1
C:\Android\android-sdk\
Android SDK Umgebungsvariable

Android SDK Umgebungsvariable

Schritt 8: Ausprobieren

Jetzt testen wir, ob adb (android debug bridge) das Handy findet. Dazu muss euer Android Handy erstmal entsprechend konfiguriert werden. Dazu klaue ich frei von hier:

  1. Set up your device to allow installation of non-Market applications. On the device, go to Settings > Applications and enable Unknown sources.
  2. Turn on “USB Debugging” on your device. On the device, go to Settings > Applications > Development and enable USB debugging.

Nun testen wir das. Konsole auf, und adb devices eingeben. ADB wird von Titanium genutzt und sollte direkt gefunden werden, da es sich unter C:\Android\android-sdk\platform-tools und damit ja im PATH befindet.

Ohne angeschlossenes Handy:

ADB Devides ohne Handy

ADB Devices ohne Handy

Mit angeschlossenem Handy:

ADB Devices mit Handy

ADB Devices mit Handy

Sollte ADB euer Gerät nicht fressen wollen, liegt es an Treiberproblemen. Wenn Windows euer Handy als Massenspeichergerät erkennt und mit seinen Default-Treibern zu Werke geht, findet ADB das Gerät nicht mehr. In diesem Fall: Alles aus dem Gerätemanager kicken, was nach Handy aussieht und dann mit eurem Hersteller USB-Treiber neu versuchen. Ihr seid nicht allein.

Übrigens: Der im Android SDK auswählbare USB Treiber wird euch nicht helfen, er ist nur für die Google Nexus Geräte.

Schritt 9: Titanium selbst installieren

Vorarbeit geschafft! Titanium Account erstellen (kostenlos, wie das Programm selbst) und dann Titanium herunterladen. Aktuell (18.9.2011) ist die Version 1.72. Das Titanium Studio basiert übrigens auf Aptana und damit auf Eclipse.

Titanium Installation

Titanium Installation

Auch hier solltet ihr ein Verzeichnis wählen, welches bestenfalls keine Leerzeichen im Pfad hat. Dies gilt auch für den Workspace:

Titanium Workspace

Titanium Workspace

Jetzt verlangt Titanium noch GIT, bietet euch aber – sofern es nicht installiert und von Titanium gefunden wurde – die Option, Portable Git zu installieren und verwenden.

Portable Git

Portable Git

Schlussendlich muss noch das Android SDK in Titanium verlinkt werden. Dazu unter Window -> Preferences den Pfad zum SDK auswählen und eure gewünschte API Version als Default setzen:

SDK in Titanium

SDK in Titanium

Schritt 10: Ready to go.

Nun ist alles eingerichtet. Wir klicken beschwingt auf “create project”:

Neues Projekt

Neues Projekt

Den “new project wizard” stellen wir so zufrieden:

Projekt-Wizard

Projekt-Wizard

Und ab dafür. Auf den grünen Startpfeil geklickt und dann erstmal nen Kaffee machen. Android läuft nämlich in einem Emulator, der beim ersten Kaltstart gern mal 3 Minuten braucht.

Emulator startet

Emulator startet

Nach dem vollständigen Start und dem Entriegeln des Emulators sollte eure Hello World – App automatisch starten.

Links oben im Screenshot markiert ist der Start-Button für den Emulator. Alternativ kann auch der gewohnte, grüne Pfeil oben genommen werden. Rechts unten ist der Button zum Umschalten zur anderen Konsole markiert. Fehler beim Build gibt Titanium in Rot aus, in der Regel wird man aber nach kurzer google Suche schnell fündig – es gibt noch einige Kinderkrankheiten.

Hello, World

Hello, World

Eventuell kommt beim Start des Emulators eine Dosbox hoch, in der “Error loading Preferences” steht. Das soll euch aber keine Gedanken bereiten, scheint beim Android Emulator zum guten Ton zu gehören.

Schritt 11: Fastdev!

Einmal gestartet, den Emulator bloß nicht wieder schließen! Titanium Studio verfügt standardmäßig über die Eigenschaft fastdev, welche es euch ermöglicht, ohne erneuten Emulatorstart Änderungen an der App vorzunehmen. Dazu einfach im Codefenster die app.js manipulieren (Tabtitel umbenennen bspw.) und erneut bei laufendem Emulator auf den Startknopf drücken. Sollte nun viel flotter gehen. Alternativ kann die App auch manuell geschlossen werden (nur die App, nicht den Emulator). Beim Neustart der App sind eure Änderungen dann auch bereits berücksichtigt.

Schritt 12: Einstieg in die Entwicklung

Titanium bietet das wunderbare Spielplatzprojekt Kitchen Sink an, in dem so gut wie alle Features von Titanium mal vorgestellt werden. Durch einfaches Copy und Paste kommt man so recht schnell zu brauchbaren Ergebnissen. Kitchensink findet sich als Musterprojekt bei Github. Ich muss dazusagen, dass Kitchen Sink ein Spielplatz ist und nicht immer funktionieren muss. Da scheint so ziemlich jeder dran herumbasteln zu dürfen, weswegen nicht unbedingt garantiert ist, dass die App immer funktioniert. Bei mir kam bspw. gern der Fehler Could not find shared library. Achja, Kitchen Sink sollte mit den Google API’s ausprobiert werden, da u.a. von google maps Gebrauch gemacht wird.

Schritt 13: Deployen aufs Gerät

Das oben erwähnte USB-Debugging auf dem Handy anschalten und auch “nicht vertrauenswürdigen Quellen” vertrauen, Handy anstöpseln und mit adb devices bestätigen lassen, dass das Handy gefunden wurde. Dann nur noch in Titanium auf “Android Device” – der Rest geht wie von Geisterhand.

Run on Device

Run on Device

Und was ist mit iOS?

Wie uns die Kompatibilitätsmatrix verrät, wird für die App-Entwicklung unter iOS zwingend ein Mac benötigt, deswegen kann ich dazu aktuell noch nichts sagen.

Weitere Ressourcen

Weitere Posts:

]]> http://www.d-mueller.de/blog/appentwicklung-webtechniken-mit-appcelerator-titanium/feed/ 4 http://www.d-mueller.de/blog/appentwicklung-webtechniken-mit-appcelerator-titanium/ Eine Ode an das Qualitätsbewusstsein! http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/5zvH6t7O1wU/ http://www.d-mueller.de/blog/eine-ode-an-das-qualitaetsbewusstsein/#comments Wed, 14 Sep 2011 21:34:47 +0000 david http://www.d-mueller.de/blog/?p=590 Weiterlesen →]]> Disclaimer: Hier wird Dampf abgelassen. Tiefgründige Ergüsse sind nicht zu erwarten.

Vorgeschichte

In der letzten Zeit häuft sichs: Dreiste Fehler in ausgewachsener Software. Vielleicht hatte ich auch viel Pech bei der Auswahl, tut aber nichts zur Sache. In der offiziellen Version 1.7.2. des millionenfach verwendeten Cross-Platform-Mobile-Application-Frameworks ™ Appcelerator Titanium ist auf einmal die Build-Funktion für Apps so hart kaputt, dass man ohne manuellen Eingriff in das Build-Script nichts mehr in den App-Store / Android Market bekommen wird.

Evaluation anständiger UI-Frameworks, um auf Smartphones simple Apps mit Webtechniken zu schreiben: Ein Graus. Beim stark gefeierten Sencha Touch werden wilde Javascript-Abtenteuer abgezogen, um eine simple Liste durchzuscrollen. Resultat: 1,2 GHz Dual Core auf dem Smartphone reichen nur noch für Zeitlupenruckelscrollen. Gern stürzt z.B. bei Dojo Mobile nach dem Laden von megabyteweise Javascript auch das Handy einfach mal unvermittelt ab. Ganz zu schweigen von jqTouch, was mit fiesen Darstellungsfehlern aufwartet.

Des Jammerns genug – man kriegt fast das Gefühl, die Leute machen das um einen zu ärgern. Mein eigentlicher Punkt: Wie schafft es solche Software in den Release? Die wollen doch Geld damit verdienen oder sich zumindest nicht bis aufs Blut blamieren. Kann ich denn mit total zerstörtem, halbfertigen Mist beim Kunde antanzen und auch noch Props dafür kriegen? Anscheinend muss mans nur dreist genug betreiben, dann stört sich auch keiner mehr dran.

Weitere Posts:

]]> http://www.d-mueller.de/blog/eine-ode-an-das-qualitaetsbewusstsein/feed/ 0 http://www.d-mueller.de/blog/eine-ode-an-das-qualitaetsbewusstsein/ Erwartete Exceptions richtig testen http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/7UX_NJnXLf4/ http://www.d-mueller.de/blog/erwartete-exceptions-richtig-testen/#comments Wed, 14 Sep 2011 21:14:15 +0000 david http://www.d-mueller.de/blog/?p=589 Weiterlesen →]]> Der klassische Ablauf beim Testen von Code, der eine Exception werfen soll, ist der Folgende (PHPUnit):

1
2
3
4
5
6
7
/**
 * @expectedException InvalidArgumentException
 */
public function testException()
{
   throw new InvalidArgumentException();
}

Problem dabei: Wir haben nicht spezifiziert, an welcher Stelle die Exception geworfen werden soll. Außerdem können wir nicht prüfen, ob die geworfene Exception genau die erwartete oder nur igendeine war.

Jetzt lässt sich das noch aufbohren:

1
2
3
4
5
6
7
8
/**
 * @expectedException        InvalidArgumentException
 * @expectedExceptionMessage Right Message
 */
public function testExceptionHasRightMessage()
{
    throw new InvalidArgumentException('Right Message');
}

Auch damit werde ich nicht glücklich. Wenn ich jetzt z.B. mehrere Exceptions in einem Test prüfen möchte (guter Stil hin oder her) stößt man an die Grenzen diesen Ansatzes.

Etwas feingranularer ist das Handling mit der nachfolgend vorstellten Methode setExpectedException.

Alternative Methode

1
2
3
4
5
6
7
8
public function testExceptionHasRightMessage()
{
    $this->setExpectedException(
      'InvalidArgumentException', 'Right Message'
    );
   
    throw new InvalidArgumentException('Right Message');
}

Macht letztlich einen entscheidenden Unterschied verglichen mit der Variante per Annotation: Ich kann den Zeitpunkt selbst bestimmen, ab dem ich eine Exception erwarte. Die Annotation greift direkt ab der ersten Zeile der Methode, in der ich vielleicht noch garkeine Exception haben möchte.

Weils so schön simpel ist: Das macht setExpectedException under the hood:

1
2
3
4
5
6
7
8
9
10
11
12
13
public function setExpectedException($exceptionName, $exceptionMessage = '', $exceptionCode = 0)
{
    if ($exceptionName == 'Exception') {
    throw new InvalidArgumentException(
      'You must not expect the generic exception class.'
    );
    }

    $this->expectedException        = $exceptionName;
    $this->expectedExceptionMessage = $exceptionMessage;
    $this->expectedExceptionCode    = $exceptionCode;
    $this->expectedExceptionTrace   = debug_backtrace();
}

… und wenn dann eine Exception fliegt, prüft das PHP Unit folgendermaßen ab:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
try {
    $testResult = $method->invokeArgs(
          $this, array_merge($this->data, $this->dependencyInput)
    );
}

catch (Exception $e) {
    if (!$e instanceof PHPUnit_Framework_IncompleteTest &&
        !$e instanceof PHPUnit_Framework_SkippedTest &&
        is_string($this->expectedException) &&
        $e instanceof $this->expectedException) {
        if (is_string($this->expectedExceptionMessage) &&
            !empty($this->expectedExceptionMessage)) {
            $this->assertContains(
              $this->expectedExceptionMessage,
              $e->getMessage()
            );
        }
       // ...
}

Volle Kontrolle!

Auch wenn das Testen mehrerer Exceptions in einer Methode durchaus umstritten ist, gibt es nun noch ein weiteres, gern genutztes Pattern, das eben dies ermöglicht:

1
2
3
4
5
6
7
8
9
10
11
12
13
try
{
    code();
    $this->fail("No Exception was thrown");
}
catch (InvalidArgumentException $ex)
{
    $this->assertEquals($ex->getMessage(), "Expected Exception-Text", "Wrong exceptiontext...");
}
catch (Exception $ex)
{
    $this->fail("Wrong Exception was thrown");
}

Muss natürlich für maximalen Komfort noch ausgebaut werden, ihr versteht worauf ich hinauswill.

Um das etwas komfortabler und wiederholungsfreier zu gestalten, hat dieser Herr eine Erweiterung zu PHPUnit geschrieben, womit uns seine Methode assertThrowsException die Arbeit abnimmt und den zu testenden Code in einer anonymen Funktion kapselt. Fühlt sich für mich am sympathischsten an.

1
2
3
4
5
6
7
8
9
<?php
public function testSomeImportantMethod() {
    $someClass = new SomeClass();

    $this->assertThrowsException('InvalidArgumentException', function () use($someClass) {
            $someClass->someMethod();
        }
    );
}

Update: Danke an Thomas für eine Richtigstellung, habe den Artikel entsprechend angepasst.Weitere Posts:

]]> http://www.d-mueller.de/blog/erwartete-exceptions-richtig-testen/feed/ 3 http://www.d-mueller.de/blog/erwartete-exceptions-richtig-testen/ MySQL “SHOW PROFILE” http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/QREVcbC2FaA/ http://www.d-mueller.de/blog/mysql-show-profile/#comments Mon, 05 Sep 2011 20:02:02 +0000 david http://www.d-mueller.de/blog/?p=587 Weiterlesen →]]> Hab heute in meiner favorisierten Datenbank-GUI HeidiSQL den Query Profiler entdeckt, hinter dem sich bei genauer Recherche das MySQL-Kommando SHOW PROFILE verbirgt – nur grafisch aufgehübscht.

query-profiling

query-profiling

Eine sinnvolle Ergänzung zu EXPLAIN – grade die temporären Tabellen oder unerwartet auffällige Sortierungen fallen hier schnell auf.
Weitere Posts:

]]> http://www.d-mueller.de/blog/mysql-show-profile/feed/ 0 http://www.d-mueller.de/blog/mysql-show-profile/ Schriftartempfehlung: Consolas http://feedproxy.google.com/~r/davblog-webdevandstuff/~3/gOXxtK1yoCY/ http://www.d-mueller.de/blog/schriftartempfehlung-consolas/#comments Mon, 29 Aug 2011 09:04:37 +0000 david http://www.d-mueller.de/blog/?p=584 Weiterlesen →]]> Ein geschätzter Arbeitskollege gab mir neulich den Tipp, es mal mit der von Microsoft speziell für Programmierung entwickelten Schrift Consolas zu versuchen. Ich hab einen Schriftwechsel erst als unnötig abgestempelt, war dann aber doch froh, es getan zu haben.

Meine favorisierte IDE Netbeans kommt standardmäßig mit der Schriftart Monospaced daher. Sieht so aus:

monospaced

monospaced

Enter Consolas

Heruntergeladen und in Netbeans als Standardfont in Größe 14 eingestellt (12 finde ich zu klein). Resultat:

consolas

consolas

Finde ich dann doch deutlich angenehmer. Weitere Posts:

]]> http://www.d-mueller.de/blog/schriftartempfehlung-consolas/feed/ 8 http://www.d-mueller.de/blog/schriftartempfehlung-consolas/