Ex1A - create a first map with a WMS layer

d'ID //map// est la cible de visualisation (la vue cartographique) * C'est la position et la taille de cette div qui déterminent comment la vue s'intègre dans l'interface * OpenLayers est accompagné de nombreuses prédéfinitions de déclarations CSS __TODO__ - Où sont-elles décrites ? - Trouvez celles qui habillent les boutons zoomin/zoomout ! - Ajoutez le code HTML ci-dessous __avant la div__ ainsi que le CSS (voir [[http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Control/Zoom-js.html|OpenLayers.Control.Zoom]])


.zoomHover:hover {
   background: lightskyblue;
}

=== Initialisation de la carte === * L'objet //[[http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Map-js.html|OpenLayers.Map]]// est associé à l'ID de la cible de visualisation * Un objet //OpenLayers.Layer// est défini pour chaque couche à ajouter à la carte * L'objet //[[http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Layer/WMS-js.html|OpenLayers.Layer.WMS]]// permet de définir les paramètres d'une requête WMS pour obtenir une couche servie par un serveur cartographique conforme au standard OGC WMS (http://www.opengeospatial.org/standards/wms) * La méthode //zoomToMaxExtent// termine l'initialisation en définissant l'enveloppe géographique de visualisation (par défaut tout le globe) __TODO__ - Remplacer map.zoomToMaxExtent comme suit (voir [[http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.zoomToExtent|zoomToExtent]])


//map.zoomToMaxExtent();
map.zoomToExtent([-18,38,38,55]);
console.log(map.getProjection());

- Quelle différence en modifiant comme suit l'option //singleTile// de la définition //OpenLayers.Layer.WMS// ?

//singleTile: true
singleTile: false

- Rendre visible la grille régulière des tuiles en plaçant l'instruction CSS ci-dessous au bon endroit


border: 1px solid red;

- Rechercher et tester d'autres couches de serveurs cartographiques WMS (par exemple de celui-ci : http://maps.opengeo.org/geowebcache/service/wms?request=GetCapabilities) ===== 2. Cache de tuiles ===== Avec singleTile à false, le client contrôle la grille de tuiles qu'il peut garder en cache. Néanmoins, à chaque requête initiale de tuile, tout le processus de rendu cartographique se fait. Mais puisqu'une couche de tuiles fait des requêtes d'images selon une grille régulière, il est possible pour le serveur de préparer un cache de ces images. Le service cartographique WMS permettant une grande flexibilité en terme de ce que le client peut demander. Côté serveur, cela rend difficile la mise en cache. A l'extrême opposé, un service peut aussi offrir des tuiles pour un ensemble prédéfini de niveaux de zoom et pour une grille régulière prédéfinie. On parle de couches de tuiles avec une source XYZ - avec X et Y indiquant la colonne et la rangée de la grille et Z le niveau de zoom. Il faut voir cela comme une [[http://georezo.net/wiki/_media/main/standards/tilematrixset.png|pyramide de tuiles]]. ==== Ex2A : OpenLayers.Layer.OSM ====



    
        Ex2A - webmap with tiled layer

__TODO__ - Modifier le centrage de la carte comme suit :


//map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(6.15,46.2).transform("EPSG:4326","EPSG:3857"), 10);

* Notez bien : on centre selon un point LonLat transformé de sa définition en coordonnées géographiques [[http://spatialreference.org/ref/epsg/4326/|EPSG:4326]] vers sa définition en coordonnées Mercator [[http://spatialreference.org/ref/sr-org/7483/|EPSG:3857]] \\ \\ - Insérer en fin de code du callback //ready// les logs ci-dessous :


console.log("Map projection: " + map.getProjection());
console.log("Map extent: " + map.getExtent());
console.log("LonLat Mercator: " + new OpenLayers.LonLat(6.15,46.2).transform("EPSG:4326","EPSG:3857"));
console.log("LonLat Google: " + new OpenLayers.LonLat(6.15,46.2).transform("EPSG:4326","EPSG:900913"));

- Remplacer la définition de la couche //[[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Layer/OSM-js.html|OpenLayers.Layer.OSM]]// comme suit :


osm = new OpenLayers.Layer.OSM("UrbanGene Custom OSM", 
          "http://urbangene.heig-vd.ch/tilecache/${z}/${x}/${y}.png");

- Remplacer la définition de la couche comme suit :


osm = new OpenLayers.Layer.OSM("OSM tiles restyled by MapBox",
          "http://api.tiles.mapbox.com/v3/oertz.map-i2ak2ozc/${z}/${x}/${y}.png",
          {
             attribution: "Based on OpenStreetMap / MapBox restyled by oertz :: HEIG-VD"
          }
);

et ajouter l'instruction CSS suivante :


.olControlAttribution {
      background-color: lightgray;
      opacity: 0.6;
      position: relative !important;
      left: 50px;
      top: 0px;
}

==== Ex2B : OpenLayers.Layer.Google ==== L'utilisation d'un cache serveur de tuiles a largement été popularisé par des services propriétaires comme Google Maps. OpenLayers étant indépendant de toute source de données, l'API offre également un type de couche pour dialoguer avec de tels services. __TODO__ - Partir de l'exemple précédent en adaptant le code JavaScript comme suit :

- Modifier le paramètre de type de couche selon la [[https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes|documentation Google Maps API]]. Contrairement à un service WMS, le service de Google Maps se sait pas s'auto-décrire). Mais comme il n'y a qu'un seul service Google Maps au monde, une documentation suffit. ==== Ex2C : OpenLayers.Layer.WMTS ==== Swisstopo offre un [[http://api.geo.admin.ch/main/wsgi/doc/build/services/sdiservices.html#wmts|service de tuiles basé sur le standard WMTS]] et que l'on peut exploiter comme suit.



    
        Ex2C - use of Geoadmin WMTS

__TODO__ - Modifier le centrage comme suit :


map.setCenter(new OpenLayers.LonLat(7.658, 45.98).transform("EPSG:4326", "EPSG:21781"), 6);

- Modifier le centrage comme suit :


map.setCenter(new OpenLayers.LonLat(600000, 200000), 8);

- Modifier les paramètres suivant de la définition OpenLayers.Layer.WMTS :


layer: "ch.swisstopo.hiks-dufour",
...
formatSuffix: "png",
...
format: "image/png",
...
params: {'time': 18450101}

===== 3. Style de couche "image" ===== Pour le moment, c'est le serveur qui fait tourner son moteur cartographique pour créer une représentation image des données géographiques et ceci sur la base de styles prédéfinis. Voyons comment le client peut dire son mot et piloter le style "à distance". ==== Ex3A : Styling avec WMS ==== Le standard WMS offre beaucoup de libertés, parfois au détriment de la performance. Comme il permet de demander ce que l'on veut en termes d'enveloppe géographique (paramètre bbox) et de style parmis un ensemble de styles pré-configurer, il est possible d'envoyer au serveur cartographique des instructions personnalisées de style.



    
        Ex3A - use of a custom SLD style

__TODO__ - Comment OpenLayers sait-il qu'il faut interroger l'habituelle couche public.world_simple ? - Avec Firefox RESTClient (ou autre équivalent), lancer la requête POST suivante sur le serveur WMS :



 
	             world_simple

puis lancer



 
	
	   region

- Créer votre propre pinkWorld.sld.xml en y insérant l'instruction //Filter// suivante en début de //Rule// (ex. mettre ce fichier dans un espace type Dropbox pour que le serveur WMS puisse y accéder)


                ...
                
                    
                        
                            region
                            NorthAfrica                            
                        
                    
                    
                    ...

- Ajouter la Rule suivante après la première :

- Modifier le style pour que la Suisse soit représentée comme ci-dessous. - voir la spécification [[http://portal.opengeospatial.org/files/?artifact_id=1188|Styled Layer Descriptor]] - et le [[http://docs.geoserver.org/stable/en/user/styling/index.html|tutoriel SLD]] {{ :ogo14:screenshot1.png?200 |}} ==== Ex3C : Custom tiling service with CartoCSS ==== * Introduction avec MapBox et exercices : {{:geoinf14:cartocss.pdf|}} * Symbol drawing order : [[http://ogo.heig-vd.ch/wiki/lib/exe/fetch.php?t=1416926000&w=417&h=500&tok=5bd897&media=geoinf14:symbol-rendering-order.png|schema]] & [[https://www.mapbox.com/tilemill/docs/guides/symbol-drawing-order/#symbol_drawing_order|documentation]]



    
        Ex3C - webmap with your own MapBox basemap

__TODO__ - Modifier le nécessaire de ci-dessus pour créer une application geoweb utilisant votre style MapBox. ===== 4. Composition de couches ===== Un intérêt d'une carte en ligne est de pouvoir la composer à partir de plusieurs couches. ==== Ex4A : Composition "server-side" ==== La composition peut se faire par un assemblage côté serveur. L'Ex3C a déjà bien montré comment préparer un tel assemblage. Ci-dessous un assemblage "à la demande". Notez bien, plus il y a de couches disponibles sur le serveur cartographique, plus il y a de combinaisons.



    
        Ex4A - one WMS request for two layers

__TODO__ - Apporter la preuve que l'assemblage s'est fait côté serveur - Trouver un tel type d'assemblage parmi les [[https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes|Basic Map Types]] de l'API Google Maps, ==== Ex4B : Composition "client-side" ==== Un cadre applicatif de cartographie en ligne se doit de fournir la capacité de gérer la composition côté client. C'est le cas d'OpenLayers comme ci-dessous :



    
        Ex4B - two WMS base layers
        
        

        
    
    
        
    
>

__TODO__ - Est-ce vraiment ce que l'on veut (remarquer le nouveau contrôle apparu dans l'IHM) ? - Comment faire pour vraiment assembler/superposer ces deux couches côté client ? - Partant de Ex2B, créer une application de webmapping avec la composition suivante : - une couche de base Google (ex. TERRAIN) - une superposition basée sur la couche //ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt// servie par le serveur WMS http://wms.geo.admin.ch de Swisstopo (voir [[http://www.geo.admin.ch/internet/geoportal/fr/home/services/geoservices/display_services/services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:ogo14:screenshot2.png?200}} - Ajouter en superposition votre style MapBox représentant les communes de Suisse (cf. Ex3C - Introduction) comme ci-dessous : \\ \\ Illustration du résultat attendu : {{:geoinf14:communes-overlay.png?200|}} - Remplacer la couche de base Google Maps par la couche MapBox //examples.map-i86nkdio// Corrigé : http://ogo.heig-vd.ch/ol2014/Ex4B_3.html ==== Ex4C : On-the-fly CartoCSS with CartoDB ==== Jusqu'à présent, les styles CartoCSS devaient être préparés et chargés avec le Studio vers un compte MapBox. La suite montre une approche plus souple permettant de définir "programmatiquement" le style à appliquer sur une couche de données chargées sur un compte [[http://cartodb.com/|CartoDB]].



    
        Ex4C - webmap with tiled layer

__TODO__ - Adapter le style pour afficher les districts Vaudois différemment des autres (utiliser l'attribut //ak// avec sa valeur //'VD'//) - Adapter l'application pour que le style CartoCSS soit chargé synchronnement depuis un fichier //monStyle.mss//. ===== 5. Couche "vector" ===== Dans les sections précédentes nous avons inséré des couches cartographique sous la forme d'images construites par le serveur avec son moteur cartographique. Un serveur cartographique était donc nécessaire. A l'opposé, pour une couche OpenLayers.Layer.Vector c'est le client qui joue le rôle de moteur cartographique pour créer la visualisation d'entités géographiques (Features en anglais). ==== Ex5A : Source de données OpenLayers.Format ==== Une couche [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Layer/Vector-js.html|OpenLayers.Layer.Vector]] peut être alimentée par une source de données au format [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Format/GeoJSON-js.html|OpenLayers.Format.GeoJSON]] (voir aussi http://geojson.org). Il existe de nombreux autres formats : [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Format/GPX-js.html|OpenLayers.Format.GPX]], [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Format/GML-js.html|OpenLayers.Format.GML]], [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Format/KML-js.html|OpenLayers.Format.KML]], ...)



    
        Ex5A - GeoJSON vector overlay

__TODO__ - Apporter la preuve que les données sont bien transformées en objets graphiques côté client ! - Remplacer l'URL source par


http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson

Pourquoi cela ne fonctionne pas ? ... - Dans une div HTML, afficher la liste des descriptions des séismes --> corrigé : http://ogo.heig-vd.ch/ol2014/0Ex5A.html - Modifier le paramètre //protocol// comme suit :


        protocol: new OpenLayers.Protocol.HTTP({
            url: "http://www.visugpx.com/files/download.php?id=1416844831",
            format: new OpenLayers.Format.GPX()
        }),

en recentrant la carte par ici :


map.setCenter(new OpenLayers.LonLat(766225, 5908730),10);

- Notons aussi le Geographic Markup Language de l'OGC qui "consiste en un ensemble de schémas XML qui définissent un format ouvert pour l'échange de données géographiques et permettent de construire des modèles de données spécifiques pour des domaines spécialisés, comme l'urbanisme, l'hydrologie ou la géologie" //(source Wikipedia)// \\ Exemple : http://geoc.heig-vd.ch/ogo/olmap/data/fourCapitals.gml ==== Ex5B : OpenLayers.Layer.Vector sous la loupe ==== L'exemple ci-dessous décrit en détail ce qu'est une couche OpenLayers.Layer.Vector en montrant comment la créer et l'alimenter à partir d'un format de source de données "fait maison". En résumé, une couche [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Layer/Vector-js.html|OpenLayers.Layer.Vector]] est composée d'entités géographiques ([[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector|OpenLayers.Feature.Vector]]) chacune composée d'une géométrie (ex. [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Geometry/Point-js.html|OpenLayers.Geometry.Point]]) et d'une liste d'attributs. La source de données est un fichier texte formaté comme suit:


2.3332999999999999 48.866700000000002 Paris,7.4333 46.950000000000003 Bern,12.5 41.883299999999998 Rome,-3.71 40.409999999999997 Madrid

La structure de formatage est simple : c'est une suite de triplets "Longitude Latitude Nom" dont le séparateur interne est l'espace. Le séparateur entre triplets est la virgule. Chaque triplet correspond à une entité géographique. Le code ci-dessous déchiffre cette structure et transforme les triplets en OpenLayers.Feature.Vector.



    
        Ex5B - custom format for vector overlay

__TODO__ - Inspecter l'objet OpenLayers qui gère la persistence de ces entités géographiques côté client (ex. avec Firebug) - Adapter le code pour une source de données similaire contenant un attribut de plus comme suit :

2.3332999999999999 48.866700000000002 Paris France,7.4333 46.950000000000003 Bern Suisse,12.5 41.883299999999998 Rome Italy,-3.71 40.409999999999997 Madrid Spain

- et réinspecter pour vérifier. ===== 6. Style "vector" ===== OpenLayers met à disposition un [[http://docs.openlayers.org/library/feature_styling.html|Styling Framework]] permettant de configurer le moteur de rendu cartographique à appliquer sur une couche OpenLayers.Layer.Vector. Il offre de nombreux paramètres de style (voir [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.OpenLayers.Feature.Vector.style|Symbolizer properties]]). ==== Ex6A : Style d'entité ==== OpenLayers permet d'associer directement un style à une entité géographique //OpenLayers.Feature.Vector//.



    
        Ex6A - One feature, one style

__TODO__ - Remplacer le style avec les propriétés suivantes :


        {
            externalGraphic: "http://www.cretasolaris.gr/gfx/marker.png",
            graphicWidth: 36,
            graphicHeight: 33,
            graphicOpacity: 1
        }

==== Ex6B : Style de couche ==== L'approche la plus répandue consiste à associer un style à une couche. Ce style est alors composé de règle cartographique et il est alors possible de configurer la représentation en contexte des données attributaires.



    
        Ex6B - One layer, one style

__TODO__ - Ajouter une entité géographique de plus comme suit :


feature = new OpenLayers.Feature.Vector();
                feature.geometry = new OpenLayers.Geometry.Point(1938600, 6840171);
                feature.attributes = {
                    name: "The hobbits are far away...",
                    author: "Gandalf"
                };
                vectorLyr.addFeatures([feature]);

- Ajouter les propriétés de style suivantes (elles exploitent le contexte par une syntaxe de remplacement attributaire) :


  label: "${name}, ${author}",
  labelYOffset: -30,
  fontColor: "red",
  fontSize: "20px"

- Ajouter la couche vectorielle des 4 capitales et concocter un style pour les afficher avec une étiquette composée du nom de la ville et de sa population en 2003. - Ajouter la couche GPX précédente et concocter un style manipulant les paramètres graphiques pour les lignes. ==== Ex6C : Style avancé : fonction de contexte ==== OpenLayers offre un outil puissant de rendu capable d'adapter une valeur de propriété de style selon le contexte de l'entité (géographique et attributaire). Il se base sur la syntaxe de remplacement attributaire vu ci-dessus.



    
        Ex6C - styling context function

__TODO__ - Adapter le style pour représenter les capitales différemment des autres villes (exploiter l'attribut //capit_1_0//, valeur 1 = capitale). - Adapter le style pour représenter les villes de l'hémisphère Sud différemment de celles de l'hémisphère Nord. - Reprendre Ex5A avec le flux http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson et un style basé sur une fonction de contexte pour représenter par classification l'intensité des séismes (exploiter l'attribut //mag//, voir aussi [[http://fr.wikipedia.org/wiki/Magnitude_d%27un_s%C3%A9isme#.C3.89chelle_de_Richter|Echelle de Richter]]).