Posts avec le tag "osm"

Premiers pas OpenLayers & OpenStreetMap

Ajouté le 09.05.2010 - 21:24 dans  •  Commentaires (0)
Tags: openlayers osm javascript

Dans le cadre d'un petit projet, je devais mettre en place une carte statique, et permettre à des clients de modifier cette image en ligne. Le but était qu'ils mettent des traits dessus signifiant à peu près la distance parcourue par des personnes.
Basique, mais surtout très moche. Je me suis dit que je pourrais proposer mieux.

Après avoir posé 2-3 questions, je suis arrivé à une solution simple et pratique :
utiliser les cartes d'OSM, les afficher avec OpenLayers, et tracer dessus un cercles représentant ladite distance.

Résultat ? bin un truc dynamique, qui marche bien, assez rapide, et surtout ne demandant aucune maintenance.

Le petit bout de code qui me permet de faire cela :
<script type="text/javascript" src="[url]http://openlayers.org/api/OpenLayers.js[/url]"></script>
    <script type="text/javascript">
      var map, layer;
      var proj_4326 = new OpenLayers.Projection("EPSG:4326");
      var proj_900913 = new OpenLayers.Projection("EPSG:900913");
      var steps = 90000;
      var distance = steps*0.75;

      function init() {
        origin = new OpenLayers.Geometry.Point(6.60, 46.56);
        origin.transform(proj_4326, proj_900913);

        map = new OpenLayers.Map('map', {displayProjection: proj_4326, controls:[new OpenLayers.Control.Navigation] } );
        //map = new OpenLayers.Map('map', {displayProjection: proj_4326, controls:[] } );
        layer = new OpenLayers.Layer.OSM();
        map.addLayer(layer);
        //map.setCenter(new OpenLayers.LonLat(7.59, 46.66).transform(proj_4326, proj_900913), 7);
        map.setCenter(new OpenLayers.LonLat(6.60, 46.56).transform(proj_4326, proj_900913), 7);

        createCircle();


        map.events.on({zoomend: createCircle });
      }

      function createCircle() {
        map.setCenter(new OpenLayers.LonLat(6.60, 46.56).transform(proj_4326, proj_900913));
        var radius = distance/map.resolution;
        var myStyles = new OpenLayers.StyleMap({
          "default": new OpenLayers.Style({
            pointRadius: radius,
            fillColor: "#ffcc66",
            fillOpacity: 0.3,
            strokeColor: "#ff9933",
            strokeWidth: 2,
            graphicZIndex: 1
          })
        });

        var circus = new OpenLayers.Layer.Vector("Points", {
            styleMap: myStyles
        });

        circus.addFeatures(new OpenLayers.Feature.Vector(origin));
        map.addLayer(circus);
      }
    </script>


On obtient un bout de carte de chez OSM, centré sur Lausanne, avec un cercle représentant env. 67.5km. Pour le moment, c'est pas encore 100% dynamique, j'attends la validation... Mais sur le principe, c'est vraiment easy.

Bon, certes, j'ai pas fait ce truc juste du premier coup, et j'avais des collègues connaissant le système autour de moi (ils rigolaient un peu d'ailleurs) pour me filer un coup de main :).

Pour le moment, le démonstrateur statique est ici : http://demo.itnux.ch/map-example.html
Y a plus qu'à :D

++

Tengu

Lire plus

Proxyfions un peu OSM

Ajouté le 11.05.2010 - 18:46 dans  •  Commentaires (0)
Tags: nginx osm cache tiles

Suite à mon post précédent sur OpenLayers et OSM, j'ai continué de jouer un petit peu.
Maintenant, les tiles OSM sont mises en cache sur mon serveur, ce qui permet à l'application d'être très rapide, et de surtout décharger un tout petit peu les serveurs OSM.
Pas que je pense que mon appli va les faire sauter, mais j'me dis que c'est la moindre des choses, vu que tout est gratuit.

Bref. Au début, je pensais prendre un tilecache... Puis j'ai vu qu'il me fallait mapnik et tout le reste, ce qui n'est pas trop possible actuellement (manque de ressources et de place sur le serveur).
Ensuite je suis parti sur un varnish. Et là, je me suis soudain foutu une baffe : nginx fait très bien proxy cache, tout seul comme un grand !

Donc... Un peu de lecture saine, et voici une petite config pas trop moche :

proxy_cache_path  /home/tilecache  levels=1:2:2   keys_zone=tilecache:1536m;

server {
  listen 94.23.198.39:80;
  server_name toto.internux.ch;

  access_log  /var/log/nginx/tiles_access.log main;
  error_log   /var/log/nginx/tiles_error.log info;

  keepalive_timeout 15;
  proxy_ignore_client_abort on;
  proxy_set_header  X-Real-IP  $remote_addr;
  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_set_header "ENABLE_X_ACCEL_REDIRECT" "true";

  location / {
    proxy_pass        [url]http://tile.openstreetmap.org/[/url] ;
    proxy_cache       tilecache;
    proxy_cache_key "$scheme$host$request_uri";
    proxy_cache_valid  200 302  7d;
    proxy_cache_valid  404      1m;
  }
}


Ajouter à cela une petite modification à OpenLayers.js pour faire pointer l'url OSM non pas sur tile.openstreetmap.org mais sur toto.internux.ch... et hop. C'est tout bon !

Je suis assez content, l'application tourne vite et bien. C'est agréable à utiliser là. Vraiment :)

Allez, happy coding !

T.

Lire plus

Photo et GPS

Ajouté le 25.07.2010 - 18:26 dans  •  Commentaires (2)
Tags: photo nikon gps exif osm openlayers

Après pas mal d'hésitations, de calcules, de "oui mais bon est-ce utile" et autres trucs du même style, j'ai fini par craquer.
Je me suis acheté un module GPS pour mon D90!

Pour la petite histoire, j'avais repéré dès son achat la prise "GPS" sur le côté gauche du boîtier, et m'étais renseigné sur le prix de la chose. Urk, plus de 200CHF pour la version Nikon.

Heureusement, après quelques temps à laisser reposer le projet, et quelques recherches sur ebay, j'ai fini par trouver un récepteur GPS pour mon D90 à moitié prix. Certes, c'est pas un Nikon, c'est du Made in China, mais sachant que l'original est aussi Made in China|Thailand|Japan|..., c'est pas grave.
Et comme petit avantage, il a un déclancheur :D.

Alors voilà. J'ai mon module, j'suis allé prendre quelques photos au bord du lac, et j'ai regardé comment avoir ces infos.

Et là, c'est le drame. Exiftool, pourtant si pratique et tout, semble ne pas pouvoir mettre la main sur ces infos !
Après avoir regardé si les infos étaient bien enregistrées (merci Wine et les outils Nikon), je suis allé farfouiller dans la liste des applications supportant les informations Exif. Et je suis tombé sur exiftags. Il est bien, ce petit, il trie pas et balance toutes les infos.

Et donc, voici le genre de choses que j'arrive à obtenir:
(...)
Latitude: N 46° 27' 28.82
Longitude: E 6° 51' 13.76
Altitude: 4294967248.00 m
(...)


Hmmm. Altitude... ?!!??!!
Ok, on dirait qu'il y a un léger problème, sans doute une conversion d'unité qui merde assez sec. L'altitude réelle à laquelle je me trouvais était d'env. 386m (d'après map.geo.admin.ch).

Quant à l'emplacement proprement dit, Google Map me place env. 250m à côté... Faudra que je contrôle avec d'autres moyens.

En parlant de cela, je compte me faire une petite interface web exploitant les données GPS des photos.
Je me baserai bien entendu sur les cartes d'OSM et la librairie OpenLayers.

Bref. Je vais bien jouer ;).

++

Tengu

Lire plus

Nouvelle galerie

Ajouté le 07.08.2010 - 22:38 dans  •  Commentaires (0)
Tags: photo openlayers osm gps nikon

Depuis mon poste sur le module GPS de mon D90, je m'étais donc mis en tête de faire une galerie supportant ces tags, et qui affiche une carte avec le point d'où les photos ont été prises.

C'est maintenant chose faite. Photomap est une petite application Pylons employant les cartes d'OpenStreetMap.
Je suis en train de migrer gentiment mes photos de mon ancienne galerie à la nouvelle.

Actuellement, seules les photos de mon petit séjour au Japon ont été déplacées. Il reste env. 130 photos à intégrer à la nouvelle, ça devrait être fait dans quelques jous :).

Evidemment, les vieilles photos n'ont pas de données GPS (dommage pour le Japon), mais je m'arrangerai pour en mettre quelques unes prochainement, histoire de montrer que sisi, ça marche :).

Ça me permettra de voir si le module GPS a un décallage constant, ou si c'est aléatoire.
Si c'est constant, je pourrai assez facilement corriger. Si c'est alétoire, par contre, je crains devoir afficher des cartes fausses :'(.

'fin voilà quoi. Je me suis amusé un peu ;).

Le code source sera accessible dans quelques jours sur github - il faut que je passe un peu la brosse dans le code et ajoute quelques fonctionnalités à mon """api""".
Un prochain poste décrira ce que cette API peut faire.

Allez, sur ce, Bonne Nuit!

T.

Lire plus