Le portail francophone de la géomatique

Bonjour à tous,

Vous voulez créer des interfaces de webmapping performantes avec OpenLayers! Cette vidéo vous montre un aperçu de quelques fonctionnalités développées par Geomatick :

• Création de boutons;
• Mesures d’aires et de distances;
• Géolocalisation et géocodage;
• Affichage des couches dans l’ordre décidé par l’utilisateur;
• Dessin, modification et suppression d’objets géographiques;
• … et bien d’autres!

N’hésitez pas à vous inscrire sur le site pour recevoir les nouveautés ou pour toute information, contactez-nous : contact@geomatick.com .

Le N°151 de la Revue XYZ du deuxième trimestre 2017 a mis à l'honneur le projet Litto3D, avec la publication d'un article sur le Programme Litto3D® proposé par Yves-Marie TANGUY et Bénédicte EZVAN-ANDRE du SHOM.

Pour lire l'article complet, suivez ce lien.

 

=>  Sentinel-2 data acquired above Spain and Netherlands are now available on Theia website! Portugal was already available. We also completed the little part of Belgium that was missing. The level 2A product provides surface reflectances with a good cloud and shadows mask. The processing is done at CNES, within MUSCATE facility, using the MAJA software, developed by CNES, CESBIO and DLR.

 

The production started with data acquired in December 2016, and will go on in near real time. Moreover, some regions in the North or Spain, or near Portugal were processed from December 2015. The data format is described here.

 

We would be very thankful if users in Spain or Netherlands could help us spread the news among remote sensing users in these two countries. Yes, I know, this holiday period is not the best one to spread news...

 

Here is an example of the time series available over Cadix in Spain. The clouds are circled in green and shadows in yellow. I have to say that Holland does not benefit from as many cloud free images as that region.

 

 

 

=> Los datos del satélite Sentinel-2 sobre la península ibérica, procesados al nivel 2A,  ahora están disponibles en el sitio web de Theia ! El producto de nivel 2A ofrece reflectancias de superficie, después de una corrección atmosférica, con una buena mascara de los nubes y de sus sombras. El procesamiento es hecho en CNES (el Centro Nacional de Estudios eSpaciales), con el software MAJA, desarrollado por CNES, CESBIO y DLR.

 

La producción empezó con los datos de diciembre de 2016, y seguirá en tiempo casi real. Aun mas, en el Norte de España (Galicia, los Pirineos y la cuenca del Ebro), la producción empezó con las imágenes tomadas desde diciembre de 2015.

 

La descripción del formato se puede leer aquí (en Ingles o Francés).

 

Agradecimos hacer circular esta noticia en la comunidad española de usuarios de imágenes de observación de la tierra. Sí, sí, lo sé, este período de vacaciones no es ideal para la circulación de la información...

 

Aquí debajo esta un ejemplo de serie obtenida sobre la tela de Cadiz. Las nubes se destacan en verde, y las sombras en amarillo.

PS : muchas gracias a Luz Maria para haber mejorado mi Español !

 

 

 

The Venµs satellite was launched very early today from Kourou on a Vega rocket. Venµs has always been late so far, but we now can say that it was at least early once ! The first news from the satellite are excellent, and everything is green. Venµs first images will hopefully be taken this month, and the 3 months commissioning phase will start, before we can declare Venµs operational.

 

After SMOS, Venµs is the second satellite with a CESBIO PI (Gérard Dedieu), It is the fruit of a collaboration between the French and Israeli space agencies (CNES and ISA). The project was first proposed by Gerard Dedieu and François Cabot in 1998 (!!), it was decided in 2003, but due to a long list of technical, political, project or launcher issues, its launch was constantly delayed. But it is now above our heads now, and you can imagine our happiness ! We would like to thank the project teams in CNES and ISA, the industrial providers in France and Israel, and the patient future users !

 

Venµs will image 110 sites every second day for 30 months, before being transferred to another orbit for a different mission. The list of sites is visible on the image below, although it might still change marginally after the commissioning phase. The image size is 28x28 km2, and the resolution is 5 m, for 12 spectral bands from visible to near infra-red.
 

See full screen

 

Despite the holiday period and the early hour, as always, the CESBIO teams were there to support the launcher and the satellite in this critical moment. I know some of you will be surprised not to see the French PI, Gérard Dedieu on the picture.  Gerard was in Kourou, obviously enjoying that moment, in company of the Israeli PI Arnon Karnieli.

 

 

 
 

 

I have to confess that one of the pictures has been "improved". Will you find which one ?

La prochaine journée d’étude annuelle organisée par la commission ‘histoire’ du Comité français de cartographie aura lieu le 17 novembre 2017 au Service historique de la Défense (château de Vincennes), partenaire de la journée tout comme l’Institut Cartogràfici Geològic de Catalunya.

S’appuyant sur l’étude d’une carte militaire française de Barcelone et de ses environs, datée de 1823-1827 et dressée au 1/1000e avec des courbes de niveau, la journée s’intéressera à deux aspects complémentaires : d’une part, aux évolutions de la carte topographique dans les premières décennies du XIXe ; d’autre part, à l’apport des technologies numériques à la reconstitution des paysages à partir des cartes topographiques anciennes.

Pour en savoir plus :JE_CFC_17nov2017_Programme

Formulaire d’inscription à retourner avant le 16/10/2017 à catherine.hofmann@bnf.fr :JE-CFC-17nov2017_fiche-inscription

 

 

Dans la première partie, on a vu comment automatiser la bancarisation des données géographiques à partir du flux RSS. Par la suite, on s’occupe de la diffusion cartographique des sites de l’UNESCO.

2. Cartographie des sites de l’UNESCO

Pour partager les données géographiques des sites de l’UNESCO, on utilise GeoServer, puis l’API d’OpenLayers nous permettra de construire une interface cartographique interactive sur internet.

2.1. Ajout des données du SGBD dans le serveur cartographique GeoServer

Dans cet article, GeoServer sert de passerelle entre le SGBD et l’interface cartographique. Après l’ajout d’un espace de travail, on paramètre un entrepôt de type PostGIS qui permet de publier les tables avec les géométries spatiales d’une base de données.

Lors de la publication, on délimite l’étendue de la donnée spatiale en choisissant la projection définie précédemment dans le SGBD. La prévisualisation de la couche SIG, par exemple en format GML, nous assure de la bonne publication de la couche “sites_unesco”.

http://localhost/geoserver/unesco/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=unesco:sites_unesco&maxFeatures=50

Il est aussi possible de charger les sites de l’UNESCO en WMS et/ou WFS dans QGIS comme le montre la figure 2 ci-après :

Figure 2 : Import des sites de l’UNESCO par le protocole WFS dans QGIS.

Pour chaque mise à jour des données dans PostgreSQL / PostGIS, la couche SIG est automatiquement modifiée dans GeoServer.

En aparté, le style de la couche n’est pas défini dans le serveur, cela nous permettra de découvrir une fonction dans OpenLayers pour créer des classes de valeurs liées aux données.

2.2. Interface cartographique avec OpenLayers

La couche SIG “sites_unesco” de l’espace de travail “unesco” est cartographiée grâce à OpenLayers. Le protocole WFS est pris en charge dans cet exemple comme source de données afin de pouvoir affecter une fonction de style au vecteur. Dans OpenLayers, la gestion des styles peut paraître assez complexe mais l’API offre une vaste possibilité de styliser les couches SIG, et notamment les vecteurs. Pour faire simple, il faut retenir qu’il est possible d’affecter un style global pour la couche ou un style propre pour les objets géographiques qui la composent. Dans ce dernier cas, cela permet d’établir des classes de valeurs attributaires des objets et aussi de modifier le style en fonction de la résolution géographique de la carte. Et pour cela, OpenLayers a construit une fonction associée à la classe ol.style. On y reviendra de manière plus approfondie dans un prochain article.

Ici, plutôt que d’utiliser un popup pour montrer certains attributs de l’objet géographique sélectionné sur la carte, le nom ainsi que la photo du site de l’UNESCO sont visibles à partir d’une certaine résolution. Et pour favoriser la lecture des données, les sites sont discriminés par couleur en fonction de leur catégorie (Cultural, Natural ou Mixed).

Dans le script, on commence par ajouter la source WFS puis la couche vectorielle associée à l’objet Map. Pour le style des objets, la classe étendue ol.style.Style nous sert à définir les caractéristiques des points ol.style.Circle grâce à l’option image. Cette option est aussi utilisée pour définir les icônes appelés avec ol.style.Icon et l’option text est aussi prise en compte pour labelliser les icônes. On définit deux styles : un style basique visible à une résolution élevée (> 500) et un style pour les icônes.

// Style du point
var styleBasic = new ol.style.Style({
	image: new ol.style.Circle({
		radius: 7,
		fill: new ol.style.Fill({
			color: '...'
		}),
		stroke: new ol.style.Stroke({
			color: '...',
			width: 3	  
		}),
	})
});
// Style de l'icône et du texte
var styleIcon = new ol.style.Style({
	image: new ol.style.Icon({
		anchor: [0.5, 100],
		anchorXUnits: 'fraction',
		anchorYUnits: 'pixels',
		src: '...', // lien vers l'icône
		scale: 1.3
	}),											
	text: new ol.style.Text({
		text: '...',
		font: 'bold 16px Times New Roman',
		offsetY: -15,
		fill: new ol.style.Fill({
			color: '...'
		}),
		stroke: new ol.style.Stroke({
			color: '...', 
			width: 5
		})
	}), 
});

Maintenant, on veut que les styles varient selon certaines valeurs des objets géographiques du vecteur, la fonction de style s’écrit :

// Déclaration des variables des couleurs de remplissage et de contour
var fillColor;
var strokeColor;
var fonctionStyle = function(feature, resolution){
	// On obtient les valeurs des objets géographiques
	var nomSite=feature.get('nom');
	var categorieSite=feature.get('categorie');
	var photoSite=feature.get('photo');
	// Mise en place de classe selon les catégories des sites
	if(categorieSite=="Natural"){
		fillColor='rgba(0, 255, 0, 0.3)';
		strokeColor='rgba(34, 121, 34, 1.0)';
	}else if(categorieSite=="Cultural"){
		fillColor='rgba(255, 0, 0, 0.3)';
		strokeColor='rgba(255, 0, 0, 1.0)';
	}else if(categorieSite=="Mixed"){
		fillColor='rgba(0, 0, 255, 0.3)';
		strokeColor='rgba(0, 0, 255, 1.0)';
	}
	var styleBasic = new ol.style.Style({
		image: new ol.style.Circle({
			radius: 7,
			fill: new ol.style.Fill({
				color: fillColor
			}),
			stroke: new ol.style.Stroke({
				color: strokeColor,
				width: 3	  
			}),
		})
	});
	var styleIcon = new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [0.5, 100],
			anchorXUnits: 'fraction',
			anchorYUnits: 'pixels',
			src: photoSite,
			scale: 1.3
		}),											
		text: new ol.style.Text({
			text: nomSite,
			font: 'bold 16px Times New Roman',
			offsetY: -15,
			fill: new ol.style.Fill({
				color: '#fff'
			}),
			stroke: new ol.style.Stroke({
				color: strokeColor, 
				width: 5
			})
		}), 
	});
}

Puis, selon la résolution géographique, l’un des deux styles est pris en compte. Le script suivant est placé à la fin de la fonction :

if(resolution > 500){
	return [styleBasic];
}else{
	return [styleIcon];
}

La fonction fonctionStyle est enfin affectée au style de la couche vectorielle. Attention, la mise en place d’une fonction de style allonge le temps de chargement des objets géographiques.

La cartographie dynamique des sites de l’UNESCO et le script entier sont disponibles dans les exemples de webmapping (figure 3). Dans la démonstration, la couche SIG est un fichier GeoJSON, créé depuis PostgreSQL et seuls les 1064 sites localisés sur les 1073 bancarisés au jour de l’écriture de cet article sont exportés. Ce format de fichier est certes une source de données différente du protocole WFS présentée dans cet article mais cela ne modifie en rien la création du style dans OpenLayers pour les vecteurs.

Figure 3 : Variation de la représentation cartographique des sites de l’UNESCO en fonction de la catégorie du site et de la résolution de la carte.

On a donc créé l’interface de webmapping pour montrer les données géographiques au public. Je voulais finalement vous présenter une manière relativement simple de les diffuser en temps réel : le GeoRSS.

2.3. Diffusion des informations géographiques en GeoRSS

Il est possible de partager et de diffuser les données géographiques par d’autres méthodes qu’une interface cartographique et les protocoles HTTP WMS, WFS, WPS, etc. Le GeoRSS, de format XML, est un standard qui inclue des objets géographiques dans un flux RSS (points, lignes, etc). Deux éléments de standard ont été définis : le GeoRSS simple et le GeoRSS GML défini par l’Open Geospatial Consortium (OGC). On peut utiliser le GeoRSS simple comme une extension de RSS 1.0, 2.0 et Atom. Cette dernière extension est prise en charge par GeoServer pour diffuser le contenu des informations géographiques des couches SIG. Il suffit d’utiliser l’URL suivant en précisant l’espace de travail et la couche SIG souhaitée.

http://localhost/geoserver/wms/reflect?layers=unesco:sites_unesco&format=rss

Ce flux de données géographiques peut ensuite être directement implémenté dans d’autres cartographies dynamiques avec Google Maps par exemple. En aparté, vous l’aurez remarqué, le flux RSS mis en place par l’UNESCO ne correspond pas aux normes de diffusion de contenu géographique défini pour le GeoRSS.

En conclusion, la mise en place d’une architecture SIG avec des technologies Open Sources nous a montré comment gérer et partager des données géographiques de manière automatisée. A travers l’exemple des sites de l’UNESCO, la bancarisation, la mise à jour et la diffusion d’un jeu de données est possible grâce aux interactions des outils utilisés. L’objectif de cartographier des objets géographiques mis à jour automatiquement est atteint. La gestion du SIG par le géomaticien devient alors minime et il est donc possible de se consacrer à de nouvelles tâches. Toutes proportions gardées, quand on évoque l’automatisation, j’aime bien me souvenir de cette citation de Bill Gates : “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.“. Bien entendu, dans cet exemple, la conception du modèle est relativement simple due notamment à la faible quantité et diversité des données prises en charge.

Enfin, La principale limite est de s’assurer de la disponibilité de la source de données importées, aussi bien d’un point de vue technique que légal. Le bon fonctionnement de l’import est vérifié grâce aux logs alors que l’acquisition du jeu de données pose la question du droit d’utilisation et de diffusion des informations.

Camarades cartographes, le pouvoir des cartes n’est plus à démontrer. Pendant longtemps, avant qu’émerge l’ere de la néo-cartographie, les cartes étaient indiscutablement l’apanage des puissants, des dirigeants, de ceux qui façonnent le monde. Pouvoirs politiques, religieux, économiques, militaires, etc. Quiconque était capable de dessiner le monde était capable d’imposer sa propre vision. Pendant la guerre froide, alors que le combat idéologique était polarisé entre deux blocs, les démocraties occidentales d’une part, et les régimes communistes d’autre part, les cartes ont souvent été utilisées de part et d’autre de ces deux camps pour mettre en image l’expression d’une puissance et/ou pour dénoncer certains traits de son adversaire. Pour illustrer mes propos, voici un recueil de cartes de propagande réalisées à cette époque (mais aussi un peu avant et un peu après). Vous y trouverez tout d’abord quelques cartes réalisées par les communistes (affiches électorales, dessins de presse, etc.) puis des cartes réalisées par leurs adversaires (Paix et Liberté, ). Et comme vous pourrez le constater, la bataille cartographique ne manque pas de panache.

1- Cartes de propagande communistes

Le coup de balai de Lénine, 1920

Sur cette affiche soviétique réalisée dans les années 20, Lénine, balaye les capitalistes hors de la planète sur laquelle il se tient debout. Sur l’affiche, il est écrit « Le camarade Lénine nettoie la Terre de ses saletés superflues ».

Source : [www.lelivrescolaire.fr]

Deux mondes, années 30

Affiche réalisée par René Dubosc pour le parti communiste français, probablement dans les années 30. On y voit deux mondes séparés l’un de l’autre : un monde de chômage, misère et guerre d’une part, et un monde communiste d’autre part qui trace le chemin.

Source :  [lesmaterialistes.com]

Le PCF et les 200 familles, 1938

Cette carte, publiée dans une brochure de L’Humanité en 1938, suggère que la société française est dominée par les 200 familles.

Source : Source : manuel Bordas première 1982 (J. Bouillon- A-M. Sohn)  [clioweb.canalblog.com]

La mort du fascisme, 1941

Cette carte réalisée en 1941 montre une Union soviétique déterminée à combattre l’Allemagne nazie, représentée ici bestialement.

Source : http://redavantgarde.com/collection/show-collection/1365

Les bases américaines dans le monde, 1951

Carte éditée par le parti communiste français qui, pour répondre aux argumentaires sur la menace russe, condamne à son tour la menace militaire américaine.

Source :  [lescartesenjeuxpolitiques.wifeo.com]

Non à la colonisation américaine de la France,1950

Affiche publiée par le parti communiste français en 1950 dans un contexte de guerre froide. La pieuvre (aux yeux de dollars) représente ici l’impérialisme américain.

Source :  [www.cultivoo.com]

Paix au Vietnam, 1953

Affiche de propagande du PCF en 1953 pour l’arrêt des conflits au Vietnam.

Source :  [www.codhos.org]

Affiche électorale, années 60

Sur cette affiche réalisée par le PCF dans les années 60, la carte de France bariolée de bleu, blanc et rouge. L’affiche oppose profits et intérêt national. Elle identifie le PCF à la défense de la classe ouvrière, du « peuple », de la « nation » et de « l’intérêt national ».

Source :� [https:]

Non à l’Europe de Giscard et Schmidt, années 70

Affiche réalisée par le Parti Communiste Français dans les années 1970. On y voit la carte de l’Europe.

Source :  [www.communcommune.com]

L’Humanité n’attend plus, 2015

Carte réalisée par Dugudus et publiée par le PCF au moment de la conférence internationale contre le réchauffement climatique. Cette carte montre l’engagement des communistes dans la lutte contre le réchauffement climatique. En mettant en scène des capitalistes attablés autour d’une planète en sang, le PCF fait ici le lien entre la thématique anticapitaliste et l’enjeu climatique.

Source :  [www.pcf.fr]

2 – Cartes de propagandes anti-communistes

Carte de propagande nazie à propos de la menace et de l’expansion communistes, 1933

Carte parue dans une brochure d’une trentaine de pages, remplie de photos et d’images anti-communistes. La carte ci-dessus montre une Allemagne nazie menacée de toute part avec en premier lieu la menace gigantesque venant de l’est communiste. Cette menace est symbolisée par une flèche frappant directement le cœur de l’Allemagne, avec le marteau et la faucille (le symbole a seulement 16 ans à l’époque).

source :  [longstreet.typepad.com]

Le Front populaire, c’est la guerre, 1936

Illustration de « Yo. Mich » pour le Comité de propagande des Républicains nationaux résolument hostile au Front populaire.

Source :  [www.lexpress.fr]

Les soviets tirent les ficelles du Front populaire, 1936

Affiche anti communiste à l’époque du Front populaire

Source :  [www.societe-histoire-grand-couronne.fr]

La pieuvre communiste menace la France,1937

Une nouvelle fois commanditée par le Comité de propagande des Républicains nationaux d’Henri de Kérillis, cette carte est réalisée par un dessinateur qui se cache sous le pseudonyme « Yo. Mich ». Elle montre la France seule puissance menacée par le communisme. L’image de la pieuvre, l’un des symboles du capital dans les affiches communistes, notamment soviétiques, est ainsi retournée contre le Komintern.

Source :  [https:]]

La pieuvre communiste, 1938

Cette carte est la première page d’un pamphlet du Service des bibliothèques catholiques (1938). Elle dépeint le communisme comme une pieuvre avec ses tentacules et le visage de Staline. L’une d’elle entoure totalement l’Espagne, les soviétiques ayant été fortement impliqués dans la guerre civile au côté des républicains.

Source :  [bigthink.com]

Contagion communiste, 1946

Cette carte parue dans le Time magazine représente la supposée maladie communiste et sa contagion. Trois variables sont représentées : les zones en quarantaine, les  zones infectées et les zones exposées.

Source :  [cartographic-catalog.blogspot.fr]

Un parapluie contre la nuée communiste, 1951

Cette carte a été publiée par Paix et Liberté, une organisation anticommuniste active en France entre 1950 et 1955. L’affiche présente une jeune femme à debout sur une Europe verdoyante, cherchant la protection contre les nuages ​​d’orage du communisme à l’aide d’un parapluie orné des drapeaux des nations européennes.

Source :  [bostonraremaps.com]

Ou est le camp de la paix, Années 1951

Affiche réalisée dans les années 50 par le mouvement antisoviétique « Paix et liberté » discréditant le Bloc oriental (communiste) belliqueux et agressif, opposé au bloc de l’Europe libre, représentant le camp de la Paix.

Source :  [www.larousse.fr]

Ou sont les impérialistes,1952

Carte réalisée une nouvelle fois par Paix et Liberté dans les années 50.

Source :  [www.lelivrescolaire.fr]

Comment les communistes menacent les matériaux essentiels, 1955

Cette carte, réalisée par le Research Institute of America, décrit par d’épaisses flèches, la « poussée rouge » menaçant le monde. On peut y lire notamment : Subversion », Infiltration, encouragement des terroristes, expéditions d’armes, Guérillas, etc.

Source :  [https:]]

Containment, 1966

Carte de propagande électorale (Canada ?) diffusée par le parti libéral lors des élections fédérales le 26 novembre 1966. La carte montre  la «menace rouge» qui se dirige vers le sud de la Chine à travers l’Asie du Sud-Est.

Source :  [calgeography.sdsu.edu]

 

Comment communiquer votre travail sous QGis à des partenaires qui n’ont pas d’outils SIG? Sous forme de page html consultable avec n’importe quel navigateur Internet, c’est l’option la plus pertinente.

Le plugin QSGis2Web fournit un moyen facile de distribuer et de visualiser votre travail QGIS sous forme de carte Web utilisant, sans que vous ayez à les connaître, OpenLayers ou LeafLet.

Avec ce plugin, en quelques clics vous exportez votre projet QGis sous forme de page html. Vous créez un répertoire contenant la page index.html et des sous-répertoires avec tous ce qui est nécessaire pour visualiser votre carte, ainsi que les données utilisées.
Un projet QGIS classique contient des données différentes: vecteur et  raster. QGIS2WEBf exporte les couches vecteur en format GeoJSON, crée la base de la carte web en utilisant la version actuelle de Leaflet ou d’OpenLayers(au choix). En plus, le plugin ajoute les données raster sous forme de superposition d’images avec un curseur d’opacité.

Installez le plugin QGis2Web à partir du gestionnaire de plugins (Extensions -> Gérer/Installer des extensions).

Le plugin est accessible à partir du menu Internet -> QGis2web

Généralités

Vous pouvez choisir entre plusieurs couches de fond de carte et définir l’étendue initiale de la carte, ainsi que les dimensions de la carte dans votre document HTML. Pour faciliter l’export de couches volumineuses, vous pouvez désactiver l’option de chargement automatique des données dans votre projet QGis, ou décocher l’affichage de la couche. La carte web générée ayant un contrôle d’affichage des couches, vous pourrez les activer une fois terminé la création de la carte. Si votre couche a plus de 1000 enregistrements, elle ne sera pas affichée dans la fenêtre d’aperçu, mais elle sera incluse dans les données exportées.

L’interface du plugin qgis2web

Vous trouverez 4 panneaux, 3 onglets et une barre de boutons.

Commençons par cette dernière.

La barre d’outils

Vous avez deux options pour la bibliothèque de code à utiliser par le plugin pour générer la page HTML. Si vous comptez utiliser le plugin pour créer une carte de base et que vous comptez l’enrichir ou modifier ultérieurement, vous choisirez évidement l’option qui vous correspond. Si non, cela v dépendre des caractéristiques de votre projet. En effet, le plugin essaye de reproduire au mieux votre projet (symbologie, étiquettes, transparence,…). Mais vous verrez à l’usage que tout ne peut pas être reproduit. Leaflet et OpenLayers n’ayant pas les mêmes possibilités, selon les cas votre projet sera mieux reproduit par l’un ou par l’autre.

Si vous changez d’option dans l’interface, l’affichage de la fenêtre d’aperçu est mis à jour automatiquement, et vous verrez le rendu avec la nouvelle bibliothèque de code. Par contre, pour toutes les autres modifications apportées dans les autres panneaux, la mise à jour de l’aperçu ne se fera que si vous cliquez sur le bouton Update preview.

Le bouton Export génère la page html et exporte les données en Json.

La fenêtre d’aperçu.

Vous pouvez voir un aperçu du rendu final dans cette fenêtre. N’oubliez pas de cliquer sur le bouton Update preview pour voir les modifications apportées au paramètres du plugin. Tous les éléments ne seront pas forcément à l’échelle finale. Comme vous pouvez le voir dans l’image précédente, la barre de légende a la taille définitive, mais pas la carte en elle-même.

Cette fenêtre n’est pas simplement une image, elle réagit comme le fera la page finale (clics, surbrillances, etc…)

Le panneau layers et groupes.

Ce panneau permet de configurer deux choses:

• le fait que la couche soit affichée part défaut ou pas: si vous cochez la case Visible, la couche sera affichée dès le chargement de la page HTML. Si la case n’est pas cochée, votre couche apparaîtra dans la barre de légende et il faudra cocher sa case dans la page HTML pour qu’elle soit affichée.
• le rendu des fenêtres popup avec les attributs des entités: cette option ne sera appliquée que dans le cas où vous cocherez l’option Show popups on hover dans le panneau de réglages généraux du plugin.

La gestion des groupes ne fonctionne pas toujours. Si vous avez groupé des couches et que vous ne les voyez pas dans ce panneau, dégroupez les couches dans votre projet.

Les trois options proposées pour la mise en forme des infobulles donnent les résultats suivants:

Le panneau de réglages généraux Réglages de l’exportation des données

Vous pouvez exporter le résultat, soit dans un répertoire de votre machine, soit sur un site ftp de votre serveur. Selon le cas, cliquez sur le bouton … pour définir , soit le répertoire, soit les paramètres de connexion.

La Mapping library location vous permet de charger la bibliothèque OpenLayers ou Leaflet dans le répertoire qui sera créé, ou bien de mettre une ligne d’appel de ces bibliothèques en ligne. La première option est plus volumineuse mais plus sûre quant à son fonctionnement.

L’option Minify GeoJson files élimine les espaces inutiles des fichiers GeoJson. Si vos données sont volumineuses, c’est un moyen de réduire leur taille.

L’autre moyen de réduire la taille des données est de jouer sur le niveau de détail des géométries. L’option Precision permet de généraliser les géométries de type ligne et polygone. L’option maintain ne change pas les géométries. Les valeurs de 1 à 15 déterminent le degré de généralisation apporté aux géométrises, avant leur export. La valeur 1 correspond à la plus forte généralisation, la valeur 15 à la plus légère.

Réglages de l’échelle et du zoom.

Extent vous permet de définir l’étendue de la carte au moment de son affichage. Canevas extent prend l’étendue de la vue actuelle de votre projet QGis. Fit to layers extent affichera l’étendue de la carte correspondant à l’étendue de la couche la plus grande. Ceci est calculé seulement sur les couches locales, qu’elles soient vecteur ou raster, pas sur les couches éventuelle issues de connexions WFS ou WMS.

Max et min zoom level permettent de définir la fourchette de zoom autorisée pour la carte.

Restrict to extent, si cochée, empêche de sortir du cadre défini de la carte.

Réglages de l’apparence

• Add address search ajoute un champ qui permet de rentrer une adresse et de positionner la carte sur celle-ci, en utilisant le geocodage d’adresses.
• Add layers list ajoute la barre de légende des couches.
• Geolocate user place un bouton qui permet, en cliquant dessus, de centrer la carte sur la position de l’utilisateur. Attention, avec Chrome cette option ne marche que si votre carte est hébergée en [HTTPS.]
• Highlight on hover met les entités en surbrillance quand la souris passe dessus.
• Layer search permet de configurer un champ de recherche sur un attribut d’une des couches. Une fois entré une valeur dans ce champ, si la valeur est retrouvée dans la table attributaire, la carte est centrée sur l’entité
• Match project CRS défini le système de coordonnées de la carte en sortie. Si la case est cochée, le système utilisé par la carte sera le même que celui du projet QGis. Par défaut, si la case n’est pas cochée, c’est le système sphérique Mercator (EPSG:3857) qui sera appliqué.
• Add measure tool ajoute un outil de mesure sur la carte résultante.
• Show popups on hover, si cochée, affiche une infobulle avec les attributs
• Template permet de choisir le modèle de carte en sortie. L’option full-screen créera une carte qui aura la taille de l’écran de l’utilisateur, canevas-size créera une carte de la même taile que votre fenêtre cartographique dans votre projet QGis. Vous pouvez ajouter d’autres modèles dans le répertoire user/nom/.qgis2/qgis2web/templates.

Le panneau de réglage du fond de carte

Ce panneau vous permet de définir un ou plusieurs fonds de carte. Vous pouvez faire une sélection multiple en appuyant sur la touche CTRL et en cliquant sur un élément de la liste. Le résultat sur la carte produite sera un bloc dans la légende permettant d’activer le fond de carte souhaité.

Préparation du projet QGis.

Une partie du rendu de la carte finale doit être préparé directement dans votre projet QGis.

Dans l’onglet Projet->Propriétés du projet->Général vous avez trois propriétés de la carte à configurer: le titre du projet, la couleur de surlignage et la couleur de fond.

Le titre n’apparaîtra que si vous sélectionnez Leaflet comme bibliothèque

Dans Propriétés de la couche-> Général vous pouvez modifier le texte du nom de la couche, celui qui apparaîtra dans la barre de légende de votre carte, pour le rendre plus compréhensible, ainsi que définir les échelles entre lesquelles la couche sera affichée.

Dans propriétés de la couche->Style vous pouvez définir le style de votre couche parmi symbole unique, catégorisé et gradué. D’après les concepteurs du plugin le style 2.5D devrait aussi fonctionner, mais moi je n’ai pas réussi…A suivre.

Dans propriétés de la couche->champs vous pouvez définir le nom qui sera affiché pour chaque champ, en remplissant la colonne Alias.

Le champ Outil d’Edition contrôle ce qui va apparaître dans les infobulles si vous sélectionnez le réglage Show popups on hover. Si vous cliquez sur la valeur d’une case de l’Outil d’Edition vous aurez la fenêtre suivante:

Vous pouvez choisir parmi trois options (les autres n’ont aucun effet sur la carte générée):

• Cachée: le champ n’apparaîtra pas dans l’infobulle
• Edition de texte: l’option par défaut, affiche la valeur du champ attributaire dans l’infobulle
• Photo: si votre champ contient un lien vers une image, l’image sera incluse dans l’infobulle.

Un exemple de la dernière option est montré ici:

Pour finir, l’étiquetage de votre projet QGis sera exporté sur la carte résultante, avec quelques limitations:

• Les expressions pour les étiquettes ne sont pas supportées,
• les buffers autour des étiquettes ne sont exportés qu’avec OpenLayers 3,
• Les fonds et les bordures ne sont exportés qu’avec Leaflet
• L’export indique la police de caractères utilisée, mais ne les inclue pas dans le répertoire exporté. Si l’utilisateur n’a pas la police utilisée, l’étiquette n’apparaîtra pas.

 

Pour la première fois en France, l'agence nationale de santé publique partage les résultats d'une étude sur les effets des perturbateurs endocriniens sur les jeunes enfants. Les données enregistrées entre 2011 et 2013 rapportent plus de 1000 cas par an...

Si dans l’article précédent (Analyse des données spatiales et analyse spatiale des données) rien n’était particulier à la gestion du littoral, il ne sera pas de même ici. Nous allons commencer à voir en quoi la géomatique appliquée aux zones littorales présente des caractéristiques tout à fait propres.

Mais commençons par une caractéristique générale à toute analyse spatiale, sur terre ou sur mer. Les sciences environnementales sont des sciences de l’observation en opposition aux sciences expérimentales. Nous n’avons que trop rarement la possibilité d’expérimenter, de tester nos idées sur les processus qui expliqueraient les différentes situations. La méthode la plus habituelle consiste à mesurer les valeurs que prennent des variables et d’utiliser leur localisation respective pour expliquer les différences observées. C’est donc leur position géographique la clé de la résolution de nos problèmes. Et c’est là où cette position géographique peut intervenir selon deux modes distincts: sous forme de localité (contexte) ou sous forme de localisation (spatiale).

L’environnement côtier est constitué d’un éventail varié de localités, d’espaces. Chacune de ces localités est déterminée par un ensemble propre de conditions environnementales locales. Dans le contexte de la modélisation spatiale, le traitement de la position géographique comme «localité» s’appuie sur la diversité des lieux qui fait varier la valeur des variables observées. Nous pouvons prendre l’exemple d’une carte de vulnérabilité du littoral: chaque zone (localité) détermine un ensemble propre des variables utilisées pour la classification du littoral.

Dans l’environnement côtier, les gradients des différentes conditions environnementales sont un des aspects les plus marquants. L’approche de la position géographique en tant que localisation (espace) met l’accent sur le comment les objets se situent les uns par rapport aux autres le long de ces gradients, et comment ce positionnement relatif peut expliquer la variabilité observable.

Cette variabilité peut résulter des relations spatiales et peut s’exprimer à travers des mesures telles que la distance, le gradient et le voisinage.
Un gradient est une propriété locale d’un espace mais qui découle de l’ampleur relative d’une variable dans deux zones voisines. Un exemple de gradient peut être la distribution d’une espèce de poisson. On observera des zones(localités) de forte population, des zones(localités) où l’espèce sera absente et tout un éventail de positions géographiques (localisations) où on observera des valeurs décroissantes.

J’espère qu’à présent vous saisissez la nuance entre localité et localisation. Car en ce qui concerne les localités il faut, en environnement littoral, ajouter une caractéristique tout à fait propre: les localités ne sont pas forcément figées dans l’espace. Le cas le plus parlant c’est le cas des masses d’eau. Chaque masse d’eau est caractérisée par toute une série de paramètres (salinité, température,…). Mais elles se déplacent. A un instant donné vous aurez sur un plage une masse d’eau côtière, tempérée. Le lendemain vous trouverez une masse d’eau du large, froide. Si vous vous intéressez aux devenir des polluants, rien ne sert de mélanger vos observations : vous êtes bien au même endroit, mais pas du tout à la même « localité ». La concentration de tel polluant mesuré la veille il faudra aller la comparer avec la concentration d’aujourd’hui dans la même masse d’eau qui peut se trouver à des kilomètres de distance.

Mais vous vous demanderez peut-être où est-ce que je veux en venir. Dans les faits, on peut constater que l’on a une tendance à attaquer billes en tête l’analyse spatiale en se focalisant sur les gradients et en oubliant le préalable de mettre en évidence les localités concernées par notre étude. La complexité et la puissance des outils géomatiques d’aujourd’hui permettent d’avoir des résultats tout à fait présentables, même quand notre démarche intellectuelle n’est pas rigoureuse. C’est un piège qui oblige le géomaticien à toujours se poser la question sur ce que l’outil fait réellement et  sur les données et les assomptions que l’on est censés respecter.

L’exemple le plus flagrant est l’application de méthodes de krigeage sur des données littorales qui ne respectent pas le principe  de stationnarité de la moyenne. La stationnarité de la moyenne  suppose que la moyenne est constante entre les échantillons et qu’elle est indépendante de l’emplacement des échantillons.  Si vous voulez faire une carte bathymétrique sur une zone littorale, vous aurez une moyenne différente selon que vous serez tout près de la côte ou loin au large. Vous pouvez ignorer ça et réaliser votre krigeage, vous aurez un résultat qui vous semblera correct même s’il est mathématiquement et conceptuellement faux. La procédure correcte est de déterminer d’abord la tendance des données, l’enlever des  valeurs en entrée (ce qui rend la moyenne stationnaire), de réaliser le krigeage et de rajouter la tendance au résultat.

Le résultat obtenu sera différent dans les deux démarches, le deuxième étant beaucoup plus fin et permettant de mettre en évidence des caractéristiques cachées au premier coup d’œil. Par contre en suivant la première démarche vous passerez des heures pour obtenir pratiquement le même résultat qu’en utilisant une méthode d’interpolation IDW qui vous aurait demandé quelques minutes de travail.

Bien que la présence de l’auto-corrélation spatiale présente un défi analytique, il existe un certain nombre d’avantages pratiques découlant de son intégration dans l’analyse des environnements côtiers :
• quantifier l’étendue et le modèle de la dépendance spatiale dans les zones côtières,
• déterminer la présence d’informations redondantes dans les ensembles de données de terrain,
• quantifier la nature et le degré avec lequel les hypothèses fondamentales de la statistique classique (non spatiales) ne sont pas respectées,
• déterminer dans quelle mesure un modèle observé est de nature spatiale ou non, et
• permettre d’utiliser des composantes spatialement structurés du modèle pour combler des variables manquantes.

Dans le prochain article nous aborderons un autre aspect marquant de l’analyse spatiale dans les zones littorales: les échelles spatiales et temporelles de l’analyse.

Construire une cartographie puis la mettre à jour régulièrement tout en buvant un café, ou plutôt sans s’en occuper est possible. Si le projet de géomatique le permet, les stockages, les traitements et les diffusions automatiques de données spatiales sont même indispensables lors de la manipulation d’une quantité importante d’informations géographiques. Et on peut dire que les chaînes de traitements de données spatiales les plus gourmandes en ressources informatiques concernent les disciplines de la météorologie et de la climatologie. D’après la définition du Larousse, l’automatisation est l’exécution totale ou partielle de tâches techniques par des machines fonctionnant sans intervention humaine. En clair, on configure le serveur ou le PC pour répéter une opération ou un ensemble d’opérations à un instant donné. En géomatique, plusieurs questions se posent pour mettre en œuvre un système de cartographies automatisées :

• D’où proviennent les données géographiques (site internet externe, machine connectée, production interne, etc) ?
• Est-il possible de les importer et de les traiter automatiquement sans l’intervention d’un géomaticien ?
• Quelles sont les informations diffusées ?
• Et sur quels supports les diffuser (document pdf, shape, protocoles WMS, WFS, flux GeoRSS, interface cartographique, etc) ?

Dès lors que l’on a répondu à ces questions, on peut mettre en place le processus d’automatisation d’une cartographie. Pour illustrer cette démarche, l’objectif de cet article est de cartographier les sites de l’UNESCO (United Nations Educational, Scientific and Cultural Organization) à partir d’un flux RSS. Dans un premier temps, on cible les informations attributaires et géométriques du fournisseur de données. Ces éléments sont stockés dans un Système de Gestion de Base de Données (SGBD) grâce à l’exécution automatique d’un script. Les tables du SGBD sont ensuite relayées par un serveur cartographique puis les sites de l’UNESCO sont enfin présentés sur une interface de webmapping via le protocole WFS – le résultat final est visible sur l’espace dédié aux exemples -. On terminera par montrer comment diffuser des données géographiques en GeoRSS.

Pour suivre ce tutoriel, il est nécessaire d’avoir installer un serveur web, PHP, le SGBD PotgreSQL / PostGIS et le serveur cartographique GeoServer. La figure 1 schématise les interactions entre les outils Open Sources mis en place dans l’architecture du Système d’Informations Géographiques (SIG).

Figure 1 : Schéma de l’architecture SIG mise en oeuvre pour le traitement automatique de données géographiques.

1. Stockage des données géographiques des sites de l’UNESCO dans le SGBD PostgreSQL / PostGIS

On utilise les langages PHP et SQL afin de bancariser les informations des sites de l’UNESCO dans PostgreSQL / PostGIS.

1.1. Lecture des données attributaires et géométriques du flux RSS

L’UNESCO met à disposition un flux RSS (Rich Site Summary ou  Really Simple Syndication) qui répertorie les différents sites retenus par l’organisation. A ce jour, 1073 sites sont référencés à l’échelle mondiale. Le fichier de format XML est mis à jour automatiquement à chaque évolution du contenu du site. Quelles sont les informations présentes dans ce fichier XML? 

<row>
	<category></category>
	<criteria_txt></criteria_txt>
	<danger/>
	<date_inscribed></date_inscribed>
	<extension></extension>
	<historical_description></historical_description>
	< [http_url><] 
	<id_number></id_number>
	<image_url></image_url>
	<iso_code></iso_code>
	<justification/>
	<latitude></latitude>
	<location></location>
	<longitude></longitude>
	<long_description></long_description>
	<region></region>
	<revision></revision>
	<secondary_dates/>
	<short_description></short_description>
	<site></site>
	<states></states>
	<transboundary></transboundary>
	<unique_number></unique_number>
</row>

Chaque site de l’UNESCO est décrit à l’intérieur des balises <row> dans lesquelles on retrouve une vingtaine d’informations tels le nom du site, la catégorie (Cultural, Natural et Mixed), la date d’inscription, les descriptions historiques, des présentations courtes et longues, des éléments spécifiques au website de l’UNESCO (l’identifiant, l’URL et une photo) et des éléments géographiques (le code ou les codes ISO des pays, le ou les pays concernés, la localisation, la longitude et latitude). La situation géographique avec les latitudes et longitudes n’est pas toujours enregistrée puisque certains sites sont étendus sur des régions entières. Toutefois, on se sert de ces informations ponctuelles pour construire la géométrie spatiale de la table PostgreSQL dans laquelle on retient : le nom du site, la catégorie, la date d’inscription, la localisation, les pays concernés, la description courte, la photo, l’URL et l’identifiant unique du website de l’UNESCO. Les latitudes et longitudes de l’UNESCO sont transformées en géométrie spatiale. La table appelée “sites_unesco” est donc créé dans PostgreSQL via PgAdmin :

-- Table: public.sites_unesco

-- DROP TABLE public.sites_unesco;

CREATE TABLE public.sites_unesco
(
  gid integer NOT NULL, -- Identifiant unique du site
  nom character varying(255), -- Nom du site de l"UNESCO
  date_inscription integer DEFAULT NULL, -- Date d"inscription du site de l"UNESCO
  categorie character varying(150), -- Catégorie du site 
  localisation character varying(1000) DEFAULT NULL, -- Localisation du site
  pays character varying(500) DEFAULT NULL, -- Pays concernés
  description character varying(3000) DEFAULT NULL, -- Description courte du site
  photo character varying(100) DEFAULT NULL, -- Photo du site
  url_unesco character varying(250) DEFAULT NULL, -- URL du site sur le website de l"UNESCO
  id_unesco integer DEFAULT NULL, -- Identifiant unique du site sur le website de l"UNESCO
  geom geometry(Point,4326) DEFAULT NULL, -- Géométrie du point en EPSG 4326
  CONSTRAINT sites_unesco_pkey PRIMARY KEY (gid)
)
WITH (
  OIDS=FALSE
);
ALTER TABLE public.sites_unesco OWNER TO postgres;

CREATE SEQUENCE sites_unesco_gid_seq
    START WITH 1
    INCREMENT BY 1
    NO MAXVALUE
    NO MINVALUE
    CACHE 1;


ALTER TABLE sites_unesco ALTER COLUMN gid SET DEFAULT nextval('sites_unesco_gid_seq'::regclass);

Quelques remarques sur la création de la table spatiale. On note que plusieurs valeurs des champs sont par défaut “NULL” puisque certains nœuds du flux RSS des sites de l’UNESCO sont vides.  Ici, le propriétaire de la table “OWNER” reste sous les droits de “POSTGRES”, propriétaire par défaut et le schéma choisi est “Public”. On créé une séquence afin d’incrémenter la clé primaire désignée par l’identifiant unique de la table gid. Enfin, comme évoqué précédemment, la géométrie utilisée pour chaque entité est un POINT qui est projeté en WGS 84 (EPSG:4326).

1.2. Construction du script de stockage en PHP et SQL

Une fois la table créée, on construit un script en PHP et SQL qui charge les informations du flux RSS décrites précédemment et alimente la table “sites_unesco”. Pour exécuter le fichier PHP, placé dans le répertoire du serveur web, on visualise le résultat dans un navigateur web.

Comment lire un fichier XML en PHP? La classe  simplexml_load_file convertit le fichier XML en objet contenant les éléments de chaque nœud. Si le fichier XML est lisible alors on liste chaque information de chaque site correspondant au nœud row et on les place dans des arrays. Dans le fichier PHP, on écrit :

$urlUnesco='http://whc.unesco.org/fr/list/xml/index.xml ';
$xmlUnesco=simpleXML_load_file($urlUnesco,"SimpleXMLElement",LIBXML_COMPACT); 
if($xmlUnesco===FALSE){ 
	echo "Erreur de lecture du fichier XML.";
}else{ 
	foreach($xmlUnesco->row as $itemUnesco){
		$nom[]=$itemUnesco->site;
		$date_inscription[]=$itemUnesco->date_inscribed;
		$categorie[]=$itemUnesco->category;
		$localisation[]=$itemUnesco->location;
		$pays[]=$itemUnesco->states;
		$description[]=$itemUnesco->short_description;
		$photo[]=$itemUnesco->image_url;
		$url_unesco[]=$itemUnesco-> [http_url;] 
		$id_unesco[]=$itemUnesco->unique_number;
		$latitude[]=$itemUnesco->latitude; 
		$longitude[]=$itemUnesco->longitude;
	}
	$nb_site=count($nom);
}

Dans la boucle foreach, on peut écrire quelques informations comme le nom des sites par exemple.

Ensuite, pour l’ensemble des sites, les éléments des tableaux sont liés (bind en anglais) aux colonnes correspondantes de la table PostgreSQL. Les latitudes et les longitudes sont transformées en géométrie spatiale ponctuelle grâce à l’extension PostGIS et la classe ST_MakePoint. ST_SetSRID garantit la projection WGS 84 (EPSG:4326) des géométries spatiales. Attention, ces classes ne gèrent pas les valeurs vides et comme quelques sites de l’UNESCO n’ont pas de longitude et de latitude spécifiée, on leur attribue la valeur NULL. On a :

ini_set('error_reporting', E_ALL);
ini_set('display_errors', true);
$message='';
try{
	$dbconn=new PDO("pgsql:host=*;dbname=*","utilisateur","mot de passe") or die('Connexion impossible');
	$dbconn->exec("SET CHARACTER SET utf8");
	$dbconn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
	$req_ajout=$dbconn->prepare("INSERT INTO public.sites_unesco(gid,nom,date_inscription,categorie,localisation,pays,description,photo,url_unesco,id_unesco,geom) 
		VALUES(DEFAULT,:nom,:date_inscription,:categorie,:localisation,:pays,:description,:photo,:url_unesco,:id_unesco,ST_SetSRID(ST_MakePoint(:longitude,:latitude),4326))"); 
	$urlUnesco='http://whc.unesco.org/fr/list/xml/index.xml ';
	$xmlUnesco=simpleXML_load_file($urlUnesco,"SimpleXMLElement",LIBXML_COMPACT); 
	if($xmlUnesco===FALSE){ 
		$message .= "Erreur de lecture du fichier XML. \r\n";
	}else{ 
		foreach($xmlUnesco->row as $itemUnesco){
			$nom[]=$itemUnesco->site;
			$date_inscription[]=$itemUnesco->date_inscribed;
			$categorie[]=$itemUnesco->category;
			$localisation[]=$itemUnesco->location;
			$pays[]=$itemUnesco->states;
			$description[]=$itemUnesco->short_description;
			$photo[]=$itemUnesco->image_url;
			$url_unesco[]=$itemUnesco-> [http_url;] 
			$id_unesco[]=$itemUnesco->unique_number;
			if($itemUnesco->latitude ==''){ $latitude[]=NULL; }else{ $latitude[]=$itemUnesco->latitude; }
			if($itemUnesco->longitude ==''){ $longitude[]=NULL; }else{ $longitude[]=$itemUnesco->longitude; }
		}
		$nb_site=count($nom);
		if($nb_site > 0){
			for($i=0;$i<$nb_site;$i++){
				$req_ajout->bindValue(':nom', $nom[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':date_inscription', $date_inscription[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':categorie', $categorie[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':localisation', $localisation[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':pays', $pays[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':description', $description[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':photo', $photo[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':url_unesco', $url_unesco[$i], PDO::PARAM_STR); 
				$req_ajout->bindValue(':id_unesco', $id_unesco[$i], PDO::PARAM_INT); 
				$req_ajout->bindValue(':longitude', $longitude[$i], PDO::PARAM_INT); 
				$req_ajout->bindValue(':latitude', $latitude[$i], PDO::PARAM_INT);
				if($req_ajout->execute()){ 
					$message .= $nom[$i]." a été ajouté dans la base de données. \r\n";
				}else{ 
					$message .= "Un problème d\'enregistrement dans la base de données a eu lieu pour le site : ".$nom[$i].". \r\n";
				}
			}
		}
	}
}catch(PDOException $e) {
	$e->getMessage();
	$message .= "Erreur de connexion à la base : ".$e.". \r\n";
}

On exécute le fichier PHP et logiquement l’ensemble des informations des sites sont stockées dans le SGBD. Si des erreurs apparaissent lors du développement, il est possible de les visualiser en saisissant au début du fichier PHP :

ini_set('error_reporting', E_ALL);
ini_set('display_errors', true);

Bien entendu en production, on retire ces lignes.

A ce stade, il est possible de visualiser les données géographiques dans PgAdmin et/ou dans QGIS. Le problème est qu’une nouvelle exécution du script entraîne le chargement de tous les éléments précédemment stockés en base. Alors, comment mettre à jour la table PostgreSQL en prenant seulement en compte les modifications du fichier XML? Dans cet exemple, cela concerne la mise à jour de sites de l’UNESCO existant et l’ajout de nouveaux sites. Pour des données mises à jour infra-journalières  ou journalières, une date de mise à jour des données du flux XML est souvent associée, ce qui facilite la sélection des données à modifier ou à ajouter dans la table. Ici, étant données les informations retenues, je choisis seulement de mettre en place une vérification entre les noms des sites, ce qui est discutable. On ajoute le “checking” avec la requête SQL préparée :

$req_check=$dbconn->prepare("SELECT nom FROM sites_unesco WHERE nom=:nom");

Puis, un fichier log est créé afin de visualiser les différents résultats du script. Voici le script final du fichier PHP :

Veuillez vous connecter pour consulter ce contenu.

En remarque, on aurait pu séparer la connexion à la base de données et créer un objet lié à la table mais comme le script est exécuté en local et ne fait pas appel à beaucoup d’actions, cela résout les problématiques de sécurité et de classes.

1.3. Mise à jour automatique des données géographiques

Enfin, comme on n’a pas le temps d’exécuter le script tous les jours, un événement est planifié dans le planificateur de tâches de Windows. Il a pour mission de lancer un batch  (.bat) très simple qui déclenche PHP :

@ECHO OFF
:: "chemin de l'exécutable PHP" chemin du fichier PHP
:: Par exemple : 
"C:\php\php.exe" C:\unesco\fichier.php

Sur Linux, l’équivalent est d’éditer un crontab en spécifiant le chemin du programme PHP et du fichier à exécuter. On saisit par exemple :

00 11 * * * /usr/bin/php /chemin/fichier.php

Le fichier PHP peut être déplacé dans un répertoire inaccessible par le serveur web pour des raisons de sécurité et d’organisation.

La mise à jour automatique des données géographiques est établie, il nous reste à les cartographier et à les diffuser dans la deuxième partie de l’article.

=>

Just before the holiday period, we are very happy to tell that all the sites that had been selected by Theia for the production of Sentinel-2 Level 2A products are now in production within MUSCATE. for Theia Land data center. The number of tiles processed each days often tops 400 ! Only a couple of sites need a few more days to be completed.
 

See full screen

But that's not the only good news : given we have some production margins, we are going to add 200 tiles in Europe : Spain, Portugal, Italy, Netherlands, Belgium, Luxembourg, Switzerland, and small parts of Germany and Austria will be included in Theia's production. The new tiles, which appear in red in the image above, will be available in August, starting from images acquired in December 2016. We are also talking with other partners to generalize MAJA processing over Europe.

 

Finally, regarding Sentinel-2B, a few weeks will be necessary 1) to get some rest, 2) check the quality of our products. S2B data release from Theia should happen in September.

=>

Juste avant les vacances, nous pouvons annoncer de très bonnes nouvelles de la production de données Sentinel-2 au niveau 2A, par le centre de traitement de MUSCATE du CNES, pour le compte du centre de données Theia. Pour un petit nombre de sites, il nous faudra encore quelques jours pour terminer la production, mais le nombre de produits traités chaque jour dépasse fréquemment les 400.

 

See full screen

Enfin, vues les bonnes performances enregistrées, nous allons ajouter environ 200 tuiles à notre liste, en Europe. L'Espagne, le Portugal, l'Italie, la Hollande, la Belgique, le Luxembourg et la Suisse, et des morceaux d'Allemagne et d'Autriche, seront entièrement incluses dans la production de Theia, à partir de décembre 2016. Les nouvelles tuiles, qui apparaissent en rouge sur l'image ci-dessus seront disponibles en août, et seront par la suite traitées en temps réel. Nous discutons aussi avec des partenaires européens pour que l'ensemble de l'Europe soit progressivement mis en production.

Quant à Sentinel-2B, laissez nous quelques semaines pour 1) prendre des vacances et 2) vérifier la qualité des résultats. Ce sera donc pour le mois de Septembre.

 

Le WEB n’est plus réservé aux grands comptes. Les moyens techniques et les coûts des solutions ne sont plus un obstacle pour que tout un chacun puisse diffuser sur le WEB ses données et ses cartes. Mais cette évolution est allé de paire avec une multiplication des solutions techniques et l’obstacle majeur aujourd’hui est de choisir la solution la mieux adaptée à ses besoins. Nous verrons ici un panorama non exhaustif, mais qui, je l’espère, vous aidera à bien choisir avant de vous lancer.

Cartes et/ou données?

La première question à se poser est, toujours, QUOI? Qu’est-ce que vous voulez diffuser? Vous pouvez diffuser des cartes, c’est à dire l’équivalent de ce que vous voyez dans votre interface QGis sur votre poste. L’utilisateur rentre l’URL de votre carte et il retrouve une interface SIG simplifiée et une carte mise en forme par vos soins. Il peut zoomer, afficher ou éteindre les différentes couches, mais il n’a pas accès directement à vos données. Vous diffusez le résultat de votre travail, pas les moyens que vous avez utilisé.

Vous pouvez aussi choisir de mettre en ligne vos données, c’est à dire rendre accessibles des couches de données, sans mise en forme particulière. Dans ce cas, l’utilisateur fera une connexion WFS ou WMS sur vos données et il pourra les intégrer dans ses projets en les mélangeant à ses propres données.

Selon les outils choisis, vous pourrez faire soit l’un, soit l’autre, soit les deux.

Volume?

La deuxième question est COMBIEN? Sans essayer de prévoir au Mo près, vous devrez savoir à l’avance si vous voulez partager des données raster ou non. Si vous vous cantonnez aux données vecteur vos volumes de données seront, en principe, bien au-deçà des limites des outils proposés. Par contre, si vous travaillez avec des données raster (images, mnt, etc) vous dépasserez ces limites dès le début.

Investissement?

Le coût de la solution choisie ne se limite surtout pas aux coûts des logiciels ou des hébergements. Le volet principal sera votre temps. Partons de la base que vous connaissez déjà QGis. Vous avez des solutions où la mise en ligne de vos cartes et/ou données se limitent à l’utilisation d’un plugin dans QGis. Vous en aurez d’autres où il faudra s’investir pour apprendre d’autres logiciels, avec ce que cela implique en temps et en efforts.

Certaines solutions fonctionneront sur votre poste de travail, d’autres nécessiteront la mise en place d’un serveur WEB. Si votre monde se limite à Windows, vous aurez de fortes chances d’avoir à faire avec Linux.

Essayez donc de rester au plus près de vos besoins.

Mettre en ligne que vos données.

La mise en ligne de données géographiques se fait à travers ce que l’on appelle des flux WFS ou WMS. Ces deux termes barbares se référent simplement à deux protocoles standard d’échange de données. Le premier, WFS, correspond aux données vectorielles? Le deuxième, WMS, correspond aux données raster à proprement parler, mais aussi aux données vectorielles mais échangées sous forme d’images (comparez ça à l’envoi d’une copie d’écran de vos couches vecteur).

Geoserver

Toutes les solutions autour de QGis que nous aborderons ici permettent de mettre à disposition du WEB les flux WMS et WFS de vos données. Mais si vous disposez d’un serveur WEB la solution la meilleure est de mettre en place Geoserver. Logiciel Open Source, gratuit, puissant et au top de la sécurité, ce sera un bon investissement. Pour une utilisation de base normale, vous n’aurez pas besoin de plus d’une journée pour l’installer, le configurer et commencer à mettre en place vos flux de données.

Vous pouvez mettre en ligne des couches shapefile mais si vous voulez vraiment exploiter toute la puissance de Geoserver  il est conseillé de le coupler à PostgreSQL/Postgis.

Pour avoir plus d’informations sur cette solution, je vous invite à lire l’article « Débuter avec Geoserver ».

Mettre en ligne vos cartes et vos données QGis Cloud

QGis Cloud est un plugin de QGis associé à un service Cloud. Le plugin vous permet de prendre votre projet QGis, de le charger sur le Cloud, de charger vos données sur une base du Cloud et d’obtenir en retour une URL qui permet de visualiser votre carte avec une interface SIG simplifiée et une autre URL pour accéder au flux WMS de vos données. La carte est donc accessible avec un simple navigateur WEB et,par défaut, le public peut se connecter au flux WMS du Cloud pour intégrer vos données dans leurs propres projets.

Avec quelques petits réglages très simples, vous pouvez mettre en ligne vos données sous forme de couches vecteur (WFS) et même autoriser les utilisateurs à mettre à jour les données (WFS-T).

Vous n’avez donc pas à vous occuper de la partie serveur de cette solution. QGis Cloud gère les bases de données et les outils de mise en ligne de la carte.

Voilà pour les plus. Maintenant, quels sont les moins de cette option? Tout d’abord les volumes de données. Pour un projet vous ne pouvez pas, dans l’option gratuite, dépasser 50Mo. Ceci vous interdit de fait, d’avoir des couches raster dans votre projet. Ceci ne concerne pas un fond de carte raster comme Goggle Satellite, OSM, Bing, etc, car QGis Cloud vous permet de définir une de ces sources comme fond de carte, mais il ne la compte pas dans le volume des données (elle n’est pas chargée dans votre base de données).

Vous pouvez passer à l’option payante (unique) et vous aurez droit à 500Mo pour un prix de 65€/mois, à laquelle vous pouvez ajouter 20€/mois par gigaoctet supplémentaire.

Mais si vous mettez en parallèle le coût de l’hébergement d’un serveur complet, chez OVH par exemple, qui tourne pour une option Pro avec 250 Go à moins de 10€ par mois, soyons honnêtes, cette solution n’est vraiment valable que pour les projets relativement petits ou pour ceux qui préfèrent payer cher et ne pas s’investir dans la gestion d’un serveur, car toutes les solutions qui suivent impliquent la mise en place d’un serveur.

Pour plus d’informations sur cette solution, je vous invite à consulter l’article Publiez vos cartes QGis sur le web avec QGis Cloud.

QGis server

C’est la version serveur du projet QGis. Vous aurez donc besoin d’un serveur physique et de disposer sur ce serveur(versions minimales) d’Apache 2.4, PHP 5.5 et PostgresSQL 9.3, avant d’installer QGis Server.

Le principe est simple (même si l’installation peut devenir vite un cauchemar) : vous créez votre projet avec QGis Desktop, vous transférez vos données et le projet sur votre serveur, puis vous paramétrez manuellement la mise en ligne du projet en modifiant des tables de la base PostgreSQL d’administration de QGis Server.

L’utilisateur peut accéder à votre carte ainsi qu’aux flux WFS et WMS . Avec cette solution vous vous affranchissez du problème de volume de vos données.

L’interface dans le navigateur est une interface SIG simplifié (zoom, mesure, affichage des attributs).

Pour plus d’informations sur QGis Server, reportez vous à l’article Installer QGis Server sous Windows 10

Mettre en ligne que vos cartes QGis2Web

Avec cette solution vous avez la possibilité de mettre en ligne vos cartes mais pas les flux WFS et WMS.

QGis2WXeb est un plugin de QGis Desktop. Ce plugin vous permet d’exporter votre projet QGis local sur un serveur HTML classique. Aucun logiciel particulier est nécessaire sur le serveur.

La partie cartographique sera du code LeafLet ou OpenLayers, au choix, contenu dans une page HTML. Vos données seront incluses dans un fichier de données au format GeoJson. Il suffit de copier sur votre serveur la page html et le fichier Json pour que votre carte soit en ligne.

Le gros avantage est de n’avoir rien à faire côté serveur. Le deuxième est que cette solution est un premier pas facile pour aborder la dernière des options que nous verrons après. En effet, la génération du code OpenLayers ou LeafLet peut servir de base pour développer des pages avec des fonctionnalités beaucoup plus riches.

Le principal inconvénient est l’absence de flux WFS et WMS d’une part, et le fait de figer les données tout en les recopiant autant de fois qu’elles sont utilisées dans un projet.

Pour plus d’informations sur QGis2Web, reportez vous à l’article Comment exporter votre projet QGis en page html en deux clics : Qgis2Leaf.

Et si vous devez aller plus loin

Si vos besoins dépassent ce qui a été exposé jusqu’ici, il faut envisager de laisser de côté QGis comme base de votre cartographie sur le WEB. Plusieurs architectures sont possibles, c’est le moins que l’on puisse dire. Pour commencer à réfléchir vous pouvez partir sur l’idée Postgres/Geoserver/OpenLayers. En tout cas l’architecture comprendra forcément:

• un système de gestion de base de données (Postgresql, Oracle, …)
• un serveur de données (WFS,WMS,…)
• un langage d’écriture des pages HTML pour l’interface cartographique (LeafLet,OpenLayers,…)

Vous trouverez un exemple de développement d’une application de Webmapping (recherche d’itinéraire), depuis la base de données à la page HTML, dans la suite d’articles Développer une application avec pgrouting sous Windows (1 à 7)

JOURNEE INTEROPERABILITE ET INNOVATION (J2I)

Le Forum OGC France et l'AFNOR organisent la 8ème Journée Interopérabilité et Innovation

Date : Mardi 7 Novembre 2017 Lieu : IFSTTAR à Marne-La-Vallée Thème : CONVERGENCE GIS/BIM

Au programme : des retours d'expérience, des projets innovants avec un focus sur le projet MINnD, partenaire de l'événement, des ateliers et une table ronde pour favoriser les échanges entre les participants.

Ouverture des inscriptions et programme provisoire disponibles début septembre sur le site de l'événement (adresse communiquée ultérieurement).

En attendant, vous pouvez d'ores et déjà noter cette date dans votre agenda et ne pas hésiter à diffuser l'information dans vos réseaux.

Cordialement, L'équipe d'organisation du FORUM OGC France

L’été étant un moment propice pour lever un peu le pied et remettre les idées en place, avant d’attaquer une nouvelle saison pris par les urgences du quotidien, je vous livre une série d’articles avec quelques réflexions sur l’utilisation des outils d’analyse spatiale dans mon domaine de préférence: la gestion intégrée des zones côtières.
Comme le titre le laisse entrevoir, les concepts et les mots de cette belle discipline qu’est la géomatique, sont construits tout autant sur des nuances que sur des exactitudes, sur la rigueur et la souplesse.
De temps en temps, il peut être bénéfique de prendre de la hauteur et de remettre un peu d’ordre dans le cadre conceptuel de nos pratiques quotidiennes.
Le titre fait référence aux deux grandes familles de techniques d’analyse spatiale :

• la première, l’analyse des données spatiales, qui traite des données en tant qu’entités :. Est-ce qu’une valeur est aberrante ou pas ? Quelle est la valeur à laquelle nous devons nous attendre à tel endroit ?
• la deuxième, l’analyse spatiale des données, qui traite les ensembles de données, les différents lots : croiser différentes couches pour trouver des emplacements optimaux, déterminer la dépendance spatiale des données avec du krigeage pour interpoler des valeurs,…

Chacune de ces deux familles de techniques se subdivise en deux.

L’analyse des données spatiales se divise en analyse exploratoire et analyse confirmatoire.

L’analyse exploratoire a pour objectif de décrire, d’expliciter une situation. L’approche suivie est une démarche de recueil de données plutôt ouverte et privilégiant la richesse de la représentation. Les outils utilisés sont des outils exploratoires, descriptifs, qui permettent de décrire un phénomène : hsitogrammes, QQ-plot, diagrammes de Voronoï,…

L’analyse confirmatoire a, quant à elle, l’objectif de vérifier une idée, un modèle. Le recueil des données suit une démarche plutôt fermée, qui privilégie la validation d’une théorie. Ses outils sont des outils confirmatoires, explicatifs, qui permettent de tester des relations entre les variables : autoregression,modélisation des erreurs spatiales, autocorrélation (de Geary, indice de Moran),…

L’analyse spatiale des données peut se diviser en deux grands ensembles méthodologiques, l’algèbre spatiale et la géostatistique.

Les techniques de l’algèbre spatiale constituent une classe de l’analyse spatiale des données clairement distincte. Elle traite les cartes en tant que jeux de données à part entière. Les opérations basées sur la carte sont utilisées pour générer de nouvelles cartes, souvent grâce à l’application de manipulations algébriques simples. En superposant plusieurs cartes l’une sur l’autre, l’analyste est capable d’implémenter des conditions logiques (AND, OR, XOR), des opérations arithmétiques (+, -, ×) pour identifier les zones sur la carte qui répondent à une gamme de critères spécifiés par l’utilisateur . Parmi ces techniques on peut citer l’analyse multicritère, la détection des changements,…

La géostatistique, l’autre grand ensemble de l’analyse spatiale des données, est nécessaire en raison de la dépendance spatiale. La dépendance spatiale est le phénomène qui fait que deux observations auront des valeurs plus proches à mesure que la distance entre les observations est moindre.
Cette composante structurée de la dépendance spatiale peut être utilement employée comme prédicteur statistique dans diverses techniques géostatistiques, par exemple, des méthodes d’interpolation telles que le krigeage. La géostatistique est la solution aux problèmes qui rendent difficile l’application de techniques statistiques classiques, c’est-à-dire non spatiales. : la dépendance spatiale introduit la redondance des données et un écart par rapport aux hypothèses statistiques fondamentales, telles que l’indépendance des observations.
Pour une présentation un peu plus développée de la géostatistique et de ses concepts de base, référez-vous à l’article [https:]] .

Theia has added seven new sites in Brazil, for which Sentinel-2 L2A are produced and distributed, starting in December 2016.  These sites will be processed in near real time from now on. Data are produced by the MUSCATE system at CNES, using CNES-DLR MAJA processor. The products can be freely downloaded from [https:]] .

 

These sites were selected following demands from French scientists, with two main themes :

• Land cover and land use change monitoring
• Water body surface and turbidity

As you probably know, the Sentinel-2 system is only acquiring data at each overpass above Europe and Africa. Above the other continents, so far, Sentinel-2 only acquires data every 20 days. As a result, our processor, MAJA, which makes a deep use of multi-temporal information, lacks  some information to provide results with the same quality level as in Europe and Africa. However, the joined time series of quicklooks shows that MAJA manages to provide fairly good results event in these conditions. And the outlook is really good, with the recent availability of S2B data and the coming start of operations of a relay satellite to download data at each overpass.

 

 

Yesterday Theia shifted into high gear and released 1300 snow products!. These products correspond to 13 Sentinel-2 tiles covering the Western Alps (France/Italy/Switzerland), the Pyrenees (France/Spain) and the Hight Atlas (Morocco).

Hier Theia est passé à la vitesse supérieure et a mis à disposition 1300 produits neige ! Ces produits correpondent aux 13 tuiles Sentinel-2 qui couvrent les Alpes Occidentales (France/Italie/Suisse), les Pyrénées (France/Espagne) et le Haut-Atlas (Maroc).

This was made possible thanks to the great work of Dominique Clesse, Joëlle Donadieu, Céline L'Helguen, Arnaud Selle and Simon Baillarin at CNES. Merci à eux !

A very good piece of news:  ESA started distributing Sentinel2-B data on Copernicus hub, two months ahead of schedule. This is really an achievement !

Here is ESA's announcement :

Following the successful completion of the Sentinel-2B Satellite In-Orbit Commissioning Phase, we are happy to announce that access to Sentinel-2B Level-1C products will be opened to all users on 6 July .

Access to Sentinel-2B products will initially be provided through a dedicated hub accessible via the Copernicus Open Access Hub home page with public credentials. This dedicated interface will be maintained until early September, at which point both Sentinel-2A and Sentinel-2B products will be commonly accessible through the nominal Data Hub interfaces.

 

Regarding Theia L2A production, we will have to wait for the availability of the data in PEPS, by end of July, and then perform some validation before releasing the data. Given the holiday period, it will probably happen in September. However, we have already checked that our L2A products, produced with MAJA withing MUSCATE should be great, as shown in this post some time ago:

 

 

J'ai le plaisir d'annoncer la liste des sponsors de la conférence européenne INSPIRE 2017 (par ordre d'inscription).

Platinum Sponsors
BKG, GDI-DE and GDI-Baden Württemberg

Gold sponsors
"INSPIRE gis regroupement des sociétés wetransform GmbH, Epsilon Italia S.R.L., Geosparc NV, Geograma S.L., Spatineo Inc., M.O.S.S. Computer Graphick Systeme GmbH"
Conterra
Esri Europe

Silver sponsors
Rasdaman

Bronze sponsors
ISA²
Safe Software
Geo Solutions
GeoCat

Géomatique Expert sera le partenaire media francophone.

Il reste un stand Gold, deux Silver et des plus petits pas chers. Avis aux amateurs!

Bien entendu, on ne saurait oublier les partenaires institutionnels :

Ministère fédéral allemand de l'intérieur,
Ministère de la transition écologique et solidaire,
Etat du Bade-Wurtemberg
Région Grand-Est,
Eurométropole de Strasbourg.

Comme l'an passé, j'ai choisi de relayé ici (puisque c'est un peu le thème du site) la carte de France de l'un des plus grands événements sportifs de l'année à savoir la carte des étapes du Tour de France 2017. Pour cette 104ème édition, ce tour comprendra...

Si vous voulez installer QGis Server sur un poste Windows, vous démarrez une longue route semée d’embuches. Tout d’abord, 95% de la documentation est faite pour une installation sous Linux. Deuxièmement, les recherches sur le WEB ramènent des pages de tout temps, la plupart périmées ou obsolètes. Troisièmement, il faut installer plusieurs composants, les configurer et je n’ai pas trouvé d’article qui balaye la totalité des installations.

Alors, en voici un. Il a été écrit le 6 juillet 2017. Il est à jour à cette date, mais si vous le lisez dans plusieurs mois ou années, je vous conseille fortement de chercher un article plus proche de votre temps.

L’objectif est d’installer et de configurer la dernière version disponible de QGIS Server LTR (2.14.x) sur Windows 10 pour une utilisation avec le Client étendu Web QGIS (EQWC). Les composants nécessaires sont les suivants (versions minimales requises):

• Apache 2.4
• PHP 5.5
• PostgresSQL 9.3
• QGIS Server LTR 2.14

Celles-ci sont les version minimales, ce qui veut dire que vous n’aurez pas de problème si vous installez la dernière version disponible de ces composants.

Pour les trois premiers, commencez par installer PostgreSQL. Vous installerez ainsi StackBuilder qui vous permet d’installer Apache et PHP.

Pour l’installation de PostgreSQL référez-vous à l’article correspondant : [www.sigterritoires.fr]

Pendant l’installation, vous serez amenés à lancer StackBuilder pour installer Postgis. Vous pouvez profiter pour cocher l’installation d’Apache/PHP à ce moment.

Si vous avez déjà installé PostgreSQL, vous pouvez lancer StackBuilder à partir du menu Applications de Windows.

Lancez StackBuilder et suivez les différents pas de l’installation:

(Placez la souris sur la diapo pour arrêter le défilement.)

/*===== general options =========*/ a { box-shadow: none !important; } .view *, .album_categories *, .album_back_button *, #album_disabled_layer { font-family: sans-serif, Arial, Verdana, Sylfaen !important; } #album_disabled_layer { display: none; position: absolute; width: 100%; height: 100%; text-align: center; background-color: transparent; z-index: 10; padding-top: 20px; color: #fff; } #album_list_container { position: relative; } /* ====================== album onhover styles ==========================*/ #album_list .view { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; display: none; } .view .mask, .view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-family: Raleway, serif; padding: 10px; /*background: rgba(0, 0, 0, 0.8);*/ margin: 20px 0 0 0; } .album_back_button a, .view a { text-decoration: none !important; } .view p { font-family: Merriweather, serif; font-style: italic; font-size: 14px; position: relative; color: #fff; padding: 0px 20px 0px; text-align: center; } .view a.info { display: inline-block; text-decoration: none; font-size: 13px; padding: 2px 14px; margin-bottom: 3px; background: #000; color: #fff; font-family: Raleway, serif; text-transform: uppercase; box-shadow: 0 0 1px #000 } .mask-text h2 { font-size: 20px !important; } .view a.info:hover { box-shadow: 0 0 5px #000 } .view .mask-bg { height: 100%; } .view .album_social { color: #fff; position: absolute; bottom: 3px; left: 3px; border: 1px solid #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 3px 5px; } .view .album_social:active, .view .album_social:focus, .view .album_social:hover { color: #ffffff; outline: none; } /*1*/ .view .info { margin-top: 5px; } .view-first .mask { opacity: 0; background-color: rgba(0, 0, 0, 0.7); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; font-family: Raleway, serif; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info { opacity: 0; transition: all 0.2s ease-in-out; } /* */ .view-first:hover img { /*transform: scale(1.1);*/ } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; } /*2*/ .view-second img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .view-second .mask { background-color: rgba(226, 200, 127, 0.2); transition: all 0.5s linear; opacity: 0; } .view-second h2 { background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-second p { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-second a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-second:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } .view-second:hover .mask { opacity: 1; } .view-second:hover h2, .view-second:hover p, .view-second:hover a.info { transform: scale(1); opacity: 1; } .view-second img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .view-second:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } /*3*/ .view-third img { transform: scaleY(1); transition: all .7s ease-in-out; } .view-third a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-third:hover img { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } .view-third:hover .mask { opacity: 1; } .view-third:hover h2, .view-third:hover p, .view-third:hover a.info { transform: scale(1); opacity: 1; } /* ==== view 4 ===*/ .view-forth-wrapper { overflow: hidden; position: relative !important; height: 100%; /* cursor: pointer;*/ } .view-forth img { max-width: 100%; position: relative; top: 0; -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } .view-forth .mask { position: absolute; width: 100%; /* height: 70px;*/ /* bottom: -70px;*/ height: 50%; bottom: -50%; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); top: inherit; } .view-forth:hover .mask { bottom: 0; } .view-forth:hover img { top: -30px; } /*== view 5 ==*/ .view-fifth .view-fifth-wrapper, .view-fifth .view-fifth-wrapper img { display: block; position: relative; } .view-fifth .view-fifth-wrapper { overflow: hidden; height: 100%; } .view-fifth .view-fifth-wrapper .mask { display: none; position: absolute; background: #333; background: rgba(75, 75, 75, 0.7); width: 100%; height: 100%; } /* ====================== album category styles ==========================*/ #filters { margin: 1% 0; padding: 0; list-style: none; list-style-type: none !important; } #filters li { float: left; list-style-type: none !important; } #filters li:first-child span { margin-left: 0px; } #filters li span { display: block; text-decoration: none; cursor: pointer; } .album_categories { list-style-type: none; margin: 0; padding: 0; overflow: hidden; padding-top: 5px; } /*========= sharing buttons ============*/ .album_socials { position: relative; top: 3px; width: 100px; height: 28px; margin: 0 auto; } .album_socials .rwd-share-buttons { top: 0px !important; width: 100% !important; margin: 0px !important; } .album_socials a { text-decoration: underline !important; } .gallery_images, .album_image_place { margin-top: 15px; margin-top: 15px; } #rwd-share-facebook:hover { background-position: 0 -31px !important; } #rwd-share-twitter:hover { background-position: -31px 32px !important; } #rwd-share-googleplus:hover { background-position: -66px -31px !important; } .rwd-share-buttons li, .rwd-share-buttons li a { width: 26px !important; border: 0px !important; } .rwd-share-buttons { top: 0 !important; } .img_link_btn { position: absolute; z-index: 99999; bottom: 0; left: 0; right: 0; width: 100%; padding: 8px; } .rwd-title { padding: 10px 0px !important; } @media only screen and (max-width: 475px) { .rwd-share-buttons { top: -25px !important; } .rwd-title-text { line-height: 15px; } } /*========= hover style ===========*/ #hover { color: rgba(188, 175, 204, 0.9); } h2#testimonials { color: #fffae3; } div#all { width: 100%; height: 100%; } .view img { height: auto; } .view { color: #fff; margin: 0 10px 10px 0; overflow: hidden; position: relative; text-align: center; float: left; cursor: default; border: 1px solid #ccc; } .view-wrapper { height: 100%; } .view img { display: block; position: relative; transition: all 0.2s linear; height: 100%; width: auto; max-width: 100%; margin: 0 auto; } .mask-text h2 { font-size: 20px !important; margin-top: 20px !important; } /* view 1 */ .view-first .text-category, .view-first .mask-text h2, .view-first .mask-text p { color: #fff; } /* view 2 */ .view-second .text-category, .view-second .mask-text h2, .view-second p { color: #333; } .view-second .mask-text h2 { border-bottom: 1px solid #333; } /* view 3*/ .view-third .mask { background-color: #ccc; transition: all 0.5s linear; opacity: 0; color: #333; } .view-third h2 { border-bottom: 1px solid #333; background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-third p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-third .text-category { color: #333; } /* view 4 */ .view-forth .mask-bg { background: #333; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .view-forth .mask-text { color: #fff; position: relative; z-index: 500; padding: 5px 8px; } .view-forth .mask-text h2 { margin: 0px; font-size: 13px; padding: 2px; color: #fff; } .view-forth .mask-text h2:hover { cursor: pointer; } .view-forth .text-category { display: block; font-size: 15px; color: #fff; } .view-forth p { color: #fff; } /* view 5 */ .view-fifth .text-category, .view-fifth .text-category *, .view-fifth .mask-text h2, .view-fifth .mask-text p { color: #fff; } var data_gallery_5 = []; var event_stack_gallery_5 = []; data_gallery_5["0"]=[];data_gallery_5["0"]["id"]="0";data_gallery_5["0"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser20.png";data_gallery_5["0"]["description"]="";data_gallery_5["0"]["alt"]="";data_gallery_5["1"]=[];data_gallery_5["1"]["id"]="1";data_gallery_5["1"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser21.png";data_gallery_5["1"]["description"]="";data_gallery_5["1"]["alt"]="";data_gallery_5["2"]=[];data_gallery_5["2"]["id"]="2";data_gallery_5["2"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser22.png";data_gallery_5["2"]["description"]="";data_gallery_5["2"]["alt"]="";data_gallery_5["3"]=[];data_gallery_5["3"]["id"]="3";data_gallery_5["3"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser23.png";data_gallery_5["3"]["description"]="";data_gallery_5["3"]["alt"]="";data_gallery_5["4"]=[];data_gallery_5["4"]["id"]="4";data_gallery_5["4"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser24.png";data_gallery_5["4"]["description"]="";data_gallery_5["4"]["alt"]="";data_gallery_5["5"]=[];data_gallery_5["5"]["id"]="5";data_gallery_5["5"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser25.png";data_gallery_5["5"]["description"]="";data_gallery_5["5"]["alt"]="";data_gallery_5["6"]=[];data_gallery_5["6"]["id"]="6";data_gallery_5["6"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser26.png";data_gallery_5["6"]["description"]="";data_gallery_5["6"]["alt"]="";data_gallery_5["7"]=[];data_gallery_5["7"]["id"]="7";data_gallery_5["7"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser27.png";data_gallery_5["7"]["description"]="";data_gallery_5["7"]["alt"]="";data_gallery_5["8"]=[];data_gallery_5["8"]["id"]="8";data_gallery_5["8"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser28.png";data_gallery_5["8"]["description"]="";data_gallery_5["8"]["alt"]="";data_gallery_5["9"]=[];data_gallery_5["9"]["id"]="9";data_gallery_5["9"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser29.png";data_gallery_5["9"]["description"]="";data_gallery_5["9"]["alt"]="";data_gallery_5["10"]=[];data_gallery_5["10"]["id"]="10";data_gallery_5["10"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser30.png";data_gallery_5["10"]["description"]="";data_gallery_5["10"]["alt"]=""; var huge_it_trans_in_progress_gallery_5 = false; var huge_it_transition_duration_gallery_5 = 1000; var huge_it_playInterval_gallery_5; // Stop autoplay. window.clearInterval(huge_it_playInterval_gallery_5); // alert('huge_it_current_key_gallery_5'); var huge_it_current_key_gallery_5 = ''; function huge_it_move_dots_gallery_5() { var image_left = jQuery(".huge_it_slideshow_dots_active_gallery_5").position().left; var image_right = jQuery(".huge_it_slideshow_dots_active_gallery_5").position().left + jQuery(".huge_it_slideshow_dots_active_gallery_5").outerWidth(true); } function huge_it_testBrowser_cssTransitions_gallery_5() { return huge_it_testDom_gallery_5('Transition'); } function huge_it_testBrowser_cssTransforms3d_gallery_5() { return huge_it_testDom_gallery_5('Perspective'); } function huge_it_testDom_gallery_5(prop) { // Browser vendor CSS prefixes. var browserVendors = ['', '-webkit-', '-moz-', '-ms-', '-o-', '-khtml-']; // Browser vendor DOM prefixes. var domPrefixes = ['', 'Webkit', 'Moz', 'ms', 'O', 'Khtml']; var i = domPrefixes.length; while (i--) { if (typeof document.body.style[domPrefixes[i] + prop] !== 'undefined') { return true; } } return false; } function huge_it_cube_gallery_5(tz, ntx, nty, nrx, nry, wrx, wry, current_image_class, next_image_class, direction) { /* If browser does not support 3d transforms/CSS transitions.*/ if (!huge_it_testBrowser_cssTransitions_gallery_5()) { jQuery(".huge_it_slideshow_dots_gallery_5").removeClass("huge_it_slideshow_dots_active_gallery_5").addClass("huge_it_slideshow_dots_deactive_gallery_5"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_5 + "_gallery_5").removeClass("huge_it_slideshow_dots_deactive_gallery_5").addClass("huge_it_slideshow_dots_active_gallery_5"); return huge_it_fallback_gallery_5(current_image_class, next_image_class, direction); } if (!huge_it_testBrowser_cssTransforms3d_gallery_5()) { return huge_it_fallback3d_gallery_5(current_image_class, next_image_class, direction); } huge_it_trans_in_progress_gallery_5 = true; /* Set active thumbnail.*/ jQuery(".huge_it_slideshow_dots_gallery_5").removeClass("huge_it_slideshow_dots_active_gallery_5").addClass("huge_it_slideshow_dots_deactive_gallery_5"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_5 + "_gallery_5").removeClass("huge_it_slideshow_dots_deactive_gallery_5").addClass("huge_it_slideshow_dots_active_gallery_5"); jQuery(".huge_it_slide_bg_gallery_5").css('perspective', 1000); jQuery(current_image_class).css({ transform : 'translateZ(' + tz + 'px)', backfaceVisibility : 'hidden' }); jQuery(".huge_it_slideshow_image_wrap_gallery_5,.huge_it_slide_bg_gallery_5,.huge_it_slideshow_image_item_gallery_5,.huge_it_slideshow_image_second_item_gallery_5 ").css('overflow', 'visible'); jQuery(next_image_class).css({ opacity : 1, filter: 'Alpha(opacity=100)', backfaceVisibility : 'hidden', transform : 'translateY(' + nty + 'px) translateX(' + ntx + 'px) rotateY('+ nry +'deg) rotateX('+ nrx +'deg)' }); jQuery(".huge_it_slider_gallery_5").css({ transform: 'translateZ(-' + tz + 'px)', transformStyle: 'preserve-3d' }); /* Execution steps.*/ setTimeout(function () { jQuery(".huge_it_slider_gallery_5").css({ transition: 'all ' + huge_it_transition_duration_gallery_5 + 'ms ease-in-out', transform: 'translateZ(-' + tz + 'px) rotateX('+ wrx +'deg) rotateY('+ wry +'deg)' }); }, 20); /* After transition.*/ jQuery(".huge_it_slider_gallery_5").one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', jQuery.proxy(huge_it_after_trans)); function huge_it_after_trans() { jQuery(".huge_it_slide_bg_gallery_5,.huge_it_slideshow_image_item_gallery_5,.huge_it_slideshow_image_second_item_gallery_5 ").css('overflow', 'hidden'); jQuery(".huge_it_slide_bg_gallery_5").removeAttr('style'); jQuery(current_image_class).removeAttr('style'); jQuery(next_image_class).removeAttr('style'); jQuery(".huge_it_slider_gallery_5").removeAttr('style'); jQuery(current_image_class).css({'opacity' : 0, filter: 'Alpha(opacity=0)', 'z-index': 1}); jQuery(next_image_class).css({'opacity' : 1, filter: 'Alpha(opacity=100)', 'z-index' : 2}); // huge_it_change_watermark_container_gallery_5(); huge_it_trans_in_progress_gallery_5 = false; if (typeof event_stack_gallery_5 !== 'undefined' && event_stack_gallery_5.length > 0) { key = event_stack_gallery_5[0].split("-"); event_stack_gallery_5.shift(); huge_it_change_image_gallery_5(key[0], key[1], data_gallery_5, true,false); } } } function huge_it_cubeH_gallery_5(current_image_class, next_image_class, direction) { /* Set to half of image width.*/ var dimension = jQuery(current_image_class).width() / 2; if (direction == 'right') { huge_it_cube_gallery_5(dimension, dimension, 0, 0, 90, 0, -90, current_image_class, next_image_class, direction); } else if (direction == 'left') { huge_it_cube_gallery_5(dimension, -dimension, 0, 0, -90, 0, 90, current_image_class, next_image_class, direction); } } function huge_it_cubeV_gallery_5(current_image_class, next_image_class, direction) { /* Set to half of image height.*/ var dimension = jQuery(current_image_class).height() / 2; /* If next slide.*/ if (direction == 'right') { huge_it_cube_gallery_5(dimension, 0, -dimension, 90, 0, -90, 0, current_image_class, next_image_class, direction); } else if (direction == 'left') { huge_it_cube_gallery_5(dimension, 0, dimension, -90, 0, 90, 0, current_image_class, next_image_class, direction); } } /* For browsers that does not support transitions.*/ function huge_it_fallback_gallery_5(current_image_class, next_image_class, direction) { huge_it_fade_gallery_5(current_image_class, next_image_class, direction); } /* For browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms).*/ function huge_it_fallback3d_gallery_5(current_image_class, next_image_class, direction) { huge_it_sliceV_gallery_5(current_image_class, next_image_class, direction); } function huge_it_none_gallery_5(current_image_class, next_image_class, direction) { jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1}); jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2}); /* Set active thumbnail.*/ jQuery(".huge_it_slideshow_dots_gallery_5").removeClass("huge_it_slideshow_dots_active_gallery_5").addClass("huge_it_slideshow_dots_deactive_gallery_5"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_5 + "_gallery_5").removeClass("huge_it_slideshow_dots_deactive_gallery_5").addClass("huge_it_slideshow_dots_active_gallery_5"); } function huge_it_fade_gallery_5(current_image_class, next_image_class, direction) { if (huge_it_testBrowser_cssTransitions_gallery_5()) { jQuery(next_image_class).css('transition', 'opacity ' + huge_it_transition_duration_gallery_5 + 'ms linear'); jQuery(current_image_class).css('transition', 'opacity ' + huge_it_transition_duration_gallery_5 + 'ms linear'); jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1}); jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2}); } else { jQuery(current_image_class).animate({'opacity' : 0, 'z-index' : 1}, huge_it_transition_duration_gallery_5); jQuery(next_image_class).animate({ 'opacity' : 1, 'z-index': 2 }, { duration: huge_it_transition_duration_gallery_5, complete: function () {return false;} }); // For IE. jQuery(current_image_class).fadeTo(huge_it_transition_duration_gallery_5, 0); jQuery(next_image_class).fadeTo(huge_it_transition_duration_gallery_5, 1); } jQuery(".huge_it_slideshow_dots_gallery_5").removeClass("huge_it_slideshow_dots_active_gallery_5").addClass("huge_it_slideshow_dots_deactive_gallery_5"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_5 + "_gallery_5").removeClass("huge_it_slideshow_dots_deactive_gallery_5").addClass("huge_it_slideshow_dots_active_gallery_5"); } function huge_it_grid_gallery_5(cols, rows, ro, tx, ty, sc, op, current_image_class, next_image_class, direction) { /* If browser does not support CSS transitions.*/ if (!huge_it_testBrowser_cssTransitions_gallery_5()) { jQuery(".huge_it_slideshow_dots_gallery_5").removeClass("huge_it_slideshow_dots_active_gallery_5").addClass("huge_it_slideshow_dots_deactive_gallery_5"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_5 + "_gallery_5").removeClass("huge_it_slideshow_dots_deactive_gallery_5").addClass("huge_it_slideshow_dots_active_gallery_5"); return huge_it_fallback_gallery_5(current_image_class, next_image_class, direction); } huge_it_trans_in_progress_gallery_5 = true; /* Set active thumbnail.*/ jQuery(".huge_it_slideshow_dots_gallery_5").removeClass("huge_it_slideshow_dots_active_gallery_5").addClass("huge_it_slideshow_dots_deactive_gallery_5"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_5 + "_gallery_5").removeClass("huge_it_slideshow_dots_deactive_gallery_5").addClass("huge_it_slideshow_dots_active_gallery_5"); /* The time (in ms) added to/subtracted from the delay total for each new gridlet.*/ var count = (huge_it_transition_duration_gallery_5) / (cols + rows); /* Gridlet creator (divisions of the image grid, positioned with background-images to replicate the look of an entire slide image when assembled)*/ function huge_it_gridlet(width, height, top, img_top, left, img_left, src, imgWidth, imgHeight, c, r) { var delay = (c + r) * count; /* Return a gridlet elem with styles for specific transition.*/ return jQuery('').css({ width : width, height : height, top : top, left : left, backgroundImage : 'url("' + src + '")', backgroundColor: jQuery(".huge_it_slideshow_image_wrap_gallery_5").css("background-color"), /*backgroundColor: rgba(0, 0, 0, 0),*/ backgroundRepeat: 'no-repeat', backgroundPosition : img_left + 'px ' + img_top + 'px', backgroundSize : imgWidth + 'px ' + imgHeight + 'px', transition : 'all ' + huge_it_transition_duration_gallery_5 + 'ms ease-in-out ' + delay + 'ms', transform : 'none' }); } /* Get the current slide's image.*/ var cur_img = jQuery(current_image_class).find('img'); /* Create a grid to hold the gridlets.*/ var grid = jQuery('').addClass('huge_it_grid_gallery_5'); /* Prepend the grid to the next slide (i.e. so it's above the slide image).*/ jQuery(current_image_class).prepend(grid); /* vars to calculate positioning/size of gridlets*/ var cont = jQuery(".huge_it_slide_bg_gallery_5"); var imgWidth = cur_img.width(); var imgHeight = cur_img.height(); var contWidth = cont.width(), contHeight = cont.height(), imgSrc = cur_img.attr('src'),/*.replace('/thumb', ''),*/ colWidth = Math.floor(contWidth / cols), rowHeight = Math.floor(contHeight / rows), colRemainder = contWidth - (cols * colWidth), colAdd = Math.ceil(colRemainder / cols), rowRemainder = contHeight - (rows * rowHeight), rowAdd = Math.ceil(rowRemainder / rows), leftDist = 0, img_leftDist = (jQuery(".huge_it_slide_bg_gallery_5").width() - cur_img.width()) / 2; /* tx/ty args can be passed as 'auto'/'min-auto' (meaning use slide width/height or negative slide width/height).*/ tx = tx === 'auto' ? contWidth : tx; tx = tx === 'min-auto' ? - contWidth : tx; ty = ty === 'auto' ? contHeight : ty; ty = ty === 'min-auto' ? - contHeight : ty; /* Loop through cols*/ for (var i = 0; i 0) { var add = colRemainder >= colAdd ? colAdd : colRemainder; newColWidth += add; colRemainder -= add; } /* Nested loop to create row gridlets for each col.*/ for (var j = 0; j 0) { add = newRowRemainder >= rowAdd ? rowAdd : rowRemainder; newRowHeight += add; newRowRemainder -= add; } /* Create & append gridlet to grid.*/ grid.append(huge_it_gridlet(newColWidth, newRowHeight, topDist, img_topDst, leftDist, img_leftDist, imgSrc, imgWidth, imgHeight, i, j)); topDist += newRowHeight; img_topDst -= newRowHeight; } img_leftDist -= newColWidth; leftDist += newColWidth; } /* Set event listener on last gridlet to finish transitioning.*/ var last_gridlet = grid.children().last(); /* Show grid & hide the image it replaces.*/ grid.show(); cur_img.css('opacity', 0); /* Add identifying classes to corner gridlets (useful if applying border radius).*/ grid.children().first().addClass('rs-top-left'); grid.children().last().addClass('rs-bottom-right'); grid.children().eq(rows - 1).addClass('rs-bottom-left'); grid.children().eq(- rows).addClass('rs-top-right'); /* Execution steps.*/ setTimeout(function () { grid.children().css({ opacity: op, transform: 'rotate('+ ro +'deg) translateX('+ tx +'px) translateY('+ ty +'px) scale('+ sc +')' }); }, 1); jQuery(next_image_class).css('opacity', 1); /* After transition.*/ jQuery(last_gridlet).one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', jQuery.proxy(huge_it_after_trans)); function huge_it_after_trans() { jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1}); jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2}); cur_img.css('opacity', 1); grid.remove(); huge_it_trans_in_progress_gallery_5 = false; if (typeof event_stack_gallery_5 !== 'undefined' && event_stack_gallery_5.length > 0) { key = event_stack_gallery_5[0].split("-"); event_stack_gallery_5.shift(); huge_it_change_image_gallery_5(key[0], key[1], data_gallery_5, true,false); } } } function huge_it_sliceH_gallery_5(current_image_class, next_image_class, direction) { if (direction == 'right') { var translateX = 'min-auto'; } else if (direction == 'left') { var translateX = 'auto'; } huge_it_grid_gallery_5(1, 8, 0, translateX, 0, 1, 0, current_image_class, next_image_class, direction); } function huge_it_sliceV_gallery_5(current_image_class, next_image_class, direction) { if (direction == 'right') { var translateY = 'min-auto'; } else if (direction == 'left') { var translateY = 'auto'; } huge_it_grid_gallery_5(10, 1, 0, 0, translateY, 1, 0, current_image_class, next_image_class, direction); } function huge_it_slideV_gallery_5(current_image_class, next_image_class, direction) { if (direction == 'right') { var translateY = 'auto'; } else if (direction == 'left') { var translateY = 'min-auto'; } huge_it_grid_gallery_5(1, 1, 0, 0, translateY, 1, 1, current_image_class, next_image_class, direction); } function huge_it_slideH_gallery_5(current_image_class, next_image_class, direction) { if (direction == 'right') { var translateX = 'min-auto'; } else if (direction == 'left') { var translateX = 'auto'; } huge_it_grid_gallery_5(1, 1, 0, translateX, 0, 1, 1, current_image_class, next_image_class, direction); } function huge_it_scaleOut_gallery_5(current_image_class, next_image_class, direction) { huge_it_grid_gallery_5(1, 1, 0, 0, 0, 1.5, 0, current_image_class, next_image_class, direction); } function huge_it_scaleIn_gallery_5(current_image_class, next_image_class, direction) { huge_it_grid_gallery_5(1, 1, 0, 0, 0, 0.5, 0, current_image_class, next_image_class, direction); } function huge_it_blockScale_gallery_5(current_image_class, next_image_class, direction) { huge_it_grid_gallery_5(8, 6, 0, 0, 0, .6, 0, current_image_class, next_image_class, direction); } function huge_it_kaleidoscope_gallery_5(current_image_class, next_image_class, direction) { huge_it_grid_gallery_5(10, 8, 0, 0, 0, 1, 0, current_image_class, next_image_class, direction); } function huge_it_fan_gallery_5(current_image_class, next_image_class, direction) { if (direction == 'right') { var rotate = 45; var translateX = 100; } else if (direction == 'left') { var rotate = -45; var translateX = -100; } huge_it_grid_gallery_5(1, 10, rotate, translateX, 0, 1, 0, current_image_class, next_image_class, direction); } function huge_it_blindV_gallery_5(current_image_class, next_image_class, direction) { huge_it_grid_gallery_5(1, 8, 0, 0, 0, .7, 0, current_image_class, next_image_class); } function huge_it_blindH_gallery_5(current_image_class, next_image_class, direction) { huge_it_grid_gallery_5(10, 1, 0, 0, 0, .7, 0, current_image_class, next_image_class); } function huge_it_random_gallery_5(current_image_class, next_image_class, direction) { var anims = ['sliceH', 'sliceV', 'slideH', 'slideV', 'scaleOut', 'scaleIn', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV']; /* Pick a random transition from the anims array.*/ this["huge_it_" + anims[Math.floor(Math.random() * anims.length)] + "_gallery_5"](current_image_class, next_image_class, direction); } function iterator_gallery_5() { var iterator = 1; return iterator; } function huge_it_change_image_gallery_5(current_key, key, data_gallery_5, from_effect,clicked) { if (data_gallery_5[key]) { if(typeof video_is_playing_gallery_5 != 'undefined' && video_is_playing_gallery_5 && !clicked){ return false; } if (!from_effect) { // Change image key. jQuery("#huge_it_current_image_key_gallery_5").val(key); // if (current_key == '-2') { /* Dots.*/ current_key = jQuery(".huge_it_slideshow_dots_active_gallery_5").attr("data-image_key"); // } } if (huge_it_trans_in_progress_gallery_5) { //errorlogjQuery(".huge_it_slideshow_image_wrap_gallery_5").after(" --IN TRANSACTION--
"); event_stack_gallery_5.push(current_key + '-' + key); return; } var direction = 'right'; if (huge_it_current_key_gallery_5 > key) { var direction = 'left'; } else if (huge_it_current_key_gallery_5 == key) { return false; } // Set active thumbnail position. huge_it_current_key_gallery_5 = key; //Change image id, title, description. jQuery(".huge_it_slideshow_image_gallery_5").attr('data-image_id', data_gallery_5[key]["id"]); jQuery(".huge_it_slideshow_title_text_gallery_5").html(data_gallery_5[key]["alt"]); jQuery(".huge_it_slideshow_description_text_gallery_5").html(data_gallery_5[key]["description"]); var current_image_class = "#image_id_gallery_5_" + data_gallery_5[current_key]["id"]; var next_image_class = "#image_id_gallery_5_" + data_gallery_5[key]["id"]; if(jQuery(current_image_class).find('.huge_it_video_frame_gallery_5').length>0) { var streffect='cubeH'; if(streffect=="cubeV" || streffect=="cubeH" || streffect=="none" || streffect=="fade"){ huge_it_cubeH_gallery_5(current_image_class, next_image_class, direction); }else{ huge_it_fade_gallery_5(current_image_class, next_image_class, direction); } }else{ huge_it_cubeH_gallery_5(current_image_class, next_image_class, direction); } jQuery('.huge_it_slideshow_title_text_gallery_5').removeClass('none'); if(jQuery('.huge_it_slideshow_title_text_gallery_5').html()==""){jQuery('.huge_it_slideshow_title_text_gallery_5').addClass('none');} jQuery('.huge_it_slideshow_description_text_gallery_5').removeClass('none'); jQuery('.huge_it_gallery_like_cont_54174').removeClass('none'); if(jQuery('.huge_it_slideshow_description_text_gallery_5').html()==""){ jQuery('.huge_it_slideshow_description_text_gallery_5').addClass('none'); } jQuery(current_image_class).find('.huge_it_slideshow_title_text_gallery_5').addClass('none'); jQuery(current_image_class).find('.huge_it_slideshow_description_text_gallery_5').addClass('none'); jQuery(current_image_class).find('.huge_it_gallery_like_cont_54174').addClass('none'); //errorlogjQuery(".huge_it_slideshow_image_wrap_gallery_5").after("--cur-key="+current_key+" --cur-img-class="+current_image_class+" nxt-img-class="+next_image_class+"--"); huge_it_move_dots_gallery_5(); window.clearInterval(huge_it_playInterval_gallery_5); play_gallery_5(); } } function huge_it_popup_resize_gallery_5() { var staticsliderwidth=600; var sliderwidth=600; var bodyWidth=jQuery(window).width(); var parentWidth = jQuery(".huge_it_slideshow_image_wrap_gallery_5").parent().width(); if(sliderwidth>parentWidth){sliderwidth=parentWidth;} if(sliderwidth>bodyWidth){sliderwidth=bodyWidth;} var str=(375/staticsliderwidth); jQuery('.huge_it_slideshow_image_wrap_gallery_5').css({'max-height':parentWidth*str-2*0}); } jQuery(window).load(function () { jQuery(window).resize(function() { huge_it_popup_resize_gallery_5(); }); huge_it_popup_resize_gallery_5(); /* Disable right click.*/ /*HOVER SLIDESHOW*/ jQuery("#huge_it_slideshow_image_container_gallery_5, .huge_it_slideshow_image_container_gallery_5, .huge_it_slideshow_dots_container_gallery_5,#huge_it_slideshow_right_gallery_5,#huge_it_slideshow_left_gallery_5").hover(function(){ //errorlogjQuery(".huge_it_slideshow_image_wrap_gallery_5").after(" -- hover --
"); jQuery("#huge_it_slideshow_right_gallery_5").css({'display':'inline'}); jQuery("#huge_it_slideshow_left_gallery_5").css({'display':'inline'}); },function(){ jQuery("#huge_it_slideshow_right_gallery_5").css({'display':'none'}); jQuery("#huge_it_slideshow_left_gallery_5").css({'display':'none'}); }); var pausehover="on"; if(pausehover=="on"){ jQuery("#huge_it_slideshow_image_container_gallery_5, .huge_it_slideshow_image_container_gallery_5, .huge_it_slideshow_dots_container_gallery_5,#huge_it_slideshow_right_gallery_5,#huge_it_slideshow_left_gallery_5").hover(function(){ window.clearInterval(huge_it_playInterval_gallery_5); },function(){ window.clearInterval(huge_it_playInterval_gallery_5); play_gallery_5(); }); } play_gallery_5(); }); function play_gallery_5() { /* Play.*/ huge_it_playInterval_gallery_5 = setInterval(function () { var iterator = 1; huge_it_change_image_gallery_5(parseInt(jQuery('#huge_it_current_image_key_gallery_5').val()), (parseInt(jQuery('#huge_it_current_image_key_gallery_5').val()) + iterator) % data_gallery_5.length, data_gallery_5,false,false); }, '5000'); } jQuery(window).focus(function() { var i_gallery_5 = 0; jQuery(".huge_it_slider_gallery_5").children("div").each(function () { if (jQuery(this).css('opacity') == 1) { jQuery("#huge_it_current_image_key_gallery_5").val(i_gallery_5); } i_gallery_5++; }); play_gallery_5(); }); jQuery(window).blur(function() { event_stack_gallery_5 = []; window.clearInterval(huge_it_playInterval_gallery_5); }); = 0 ? (parseInt(jQuery('#huge_it_current_image_key_gallery_5').val()) - iterator_gallery_5()) % data_gallery_5.length : data_gallery_5.length - 1, data_gallery_5,false,true);return false;"> jQuery(document).ready(function ($) { $('.thumb_wrapper').on('click', function (ev) { var hugeid = $(this).data('rowid'); var myid = hugeid; myid = parseInt(myid); eval('player_' + myid + '.playVideo()') ev.preventDefault(); }); });

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

.huge_it_slideshow_image_wrap_gallery_5 { height: 375px; width: 600px; max-width: calc(100% - 2 * 0px); position: relative; display: block; text-align: center; border: 0 px #ffffff solid; box-sizing: content-box; clear: both; float:none; margin: 0 auto;} .huge_it_slideshow_image_wrap_gallery_5 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .huge_it_slideshow_image_gallery_5 { width: 100%; height: 100%; left: 0; top: 0; /* height: auto; top: 50%; left: 50%; transform: translate( -50%, -50% ); */ max-width: 100%; max-height: 100%; position: absolute; } .huge_it_slider_gallery_5 li iframe { width: 100%; height: 100%; } .huge_it_slider_gallery_5 li #thevideo { width: 100%; height: 100%; } .huge_it_slider_gallery_5 li .thumb_wrapper { width: 100%; height: 100%; } .huge_it_slider_gallery_5 li .thumb_wrapper img { position: relative; /*top: 50%; transform: translateY(-50%);*/ } #huge_it_slideshow_left_gallery_5, #huge_it_slideshow_right_gallery_5 { cursor: pointer; display: none; display: block; height: 100%; outline: medium none; position: absolute; /*z-index: 10130;*/ z-index: 13; bottom: 25px; top: 50%; } #huge_it_slideshow_left-ico_gallery_5, #huge_it_slideshow_right-ico_gallery_5 { z-index: 13; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; display: table; left: -9999px; line-height: 0; margin-top: -15px; position: absolute; top: 50%; } #huge_it_slideshow_left-ico_gallery_5:hover, #huge_it_slideshow_right-ico_gallery_5:hover { cursor: pointer; } .huge_it_slideshow_image_container_gallery_5 { display: table; position: relative; top: 0; left: 0; text-align: center; vertical-align: middle; width: 100%; height: 100%; } .huge_it_slideshow_title_text_gallery_5 { text-decoration: none; position: absolute; z-index: 12; display: inline-block; width: 30%; /*height: 50 %;*/ right:0%;top:0%; padding: 2%; text-align: right; font-weight: bold; color: #000000; background: rgba(255,255,255,0.7) !important; border-style: solid; font-size: 13px; border-width: 0px; border-color: #ffffff; border-radius: 4px; } .huge_it_slideshow_description_text_gallery_5 { text-decoration: none; position: absolute; z-index: 11; border-style: solid; display: inline-block; width: 70%; /*height: %;*/ right:0%;bottom:0%; padding: 3%; text-align: justify; color: #ffffff; background: rgba(0,0,0,0.7) !important; border-style: solid; font-size: 12px; border-width: 0px; border-color: #ffffff; border-radius: 0px; } .huge_it_slideshow_title_text_gallery_5.none, .huge_it_slideshow_description_text_gallery_5.none, .huge_it_slideshow_title_text_gallery_5.hidden, .huge_it_slideshow_description_text_gallery_5.hidden { display: none; } .huge_it_gallery_like_cont_54174.none { display: none !important; } .huge_it_slideshow_title_text_gallery_5 h1, .huge_it_slideshow_description_text_gallery_5 h1, .huge_it_slideshow_title_text_gallery_5 h2, .huge_it_slideshow_title_text_gallery_5 h2, .huge_it_slideshow_title_text_gallery_5 h3, .huge_it_slideshow_title_text_gallery_5 h3, .huge_it_slideshow_title_text_gallery_5 h4, .huge_it_slideshow_title_text_gallery_5 h4, .huge_it_slideshow_title_text_gallery_5 p, .huge_it_slideshow_title_text_gallery_5 p, .huge_it_slideshow_title_text_gallery_5 strong, .huge_it_slideshow_title_text_gallery_5 strong, .huge_it_slideshow_title_text_gallery_5 span, .huge_it_slideshow_title_text_gallery_5 span, .huge_it_slideshow_title_text_gallery_5 ul, .huge_it_slideshow_title_text_gallery_5 ul, .huge_it_slideshow_title_text_gallery_5 li, .huge_it_slideshow_title_text_gallery_5 li { padding: 2px; margin: 0; } .huge_it_slide_container_gallery_5 { display: table-cell; margin: 0 auto; position: relative; vertical-align: middle; width: 100%; height: 100%; _width: inherit; _height: inherit; } .huge_it_slide_bg_gallery_5 { margin: 0 auto; width: 100%; height: 100%; _width: inherit; _height: inherit; } .huge_it_slider_gallery_5 { width: 100%; height: 100%; display: table; padding: 0; margin: 0; } .huge_it_slideshow_image_item_gallery_5 { width: 100%; height: 100%; display: table-cell; filter: Alpha(opacity=100); opacity: 1; position: absolute; top: 0; left: 0; vertical-align: middle; z-index: 2; margin: 0 !important; padding: 0; overflow: hidden; border-radius: 0px !important; } .huge_it_slideshow_image_second_item_gallery_5 { width: 100%; height: 100%; display: table-cell; filter: Alpha(opacity=0); opacity: 0; position: absolute; top: 0; left: 0; vertical-align: middle; z-index: 1; overflow: hidden; margin: 0 !important; padding: 0; border-radius: 0px !important; } .huge_it_grid_gallery_5 { display: none; height: 100%; overflow: hidden; position: absolute; width: 100%; } .huge_it_gridlet_gallery_5 { opacity: 1; filter: Alpha(opacity=100); position: absolute; } .huge_it_slideshow_dots_container_gallery_5 { display: table; position: absolute; width: 100% !important; height: 100% !important; } .huge_it_slideshow_dots_thumbnails_gallery_5 { margin: 0 auto; overflow: hidden; position: absolute; width: 100%; height: 60px; } .huge_it_slideshow_dots_gallery_5 { display: inline-block; position: relative; cursor: pointer; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.1); width: 10px; height: 10px; border-radius: 10px; background: #00f; margin: 10px; overflow: hidden; z-index: 17; } .huge_it_slideshow_dots_active_gallery_5 { opacity: 1; background: #0f0; filter: Alpha(opacity=100); } .huge_it_slideshow_dots_deactive_gallery_5 { } .huge_it_slideshow_image_item1_gallery_5 { display: table; width: inherit; height: inherit; } .huge_it_slideshow_image_item2_gallery_5 { display: table-cell; vertical-align: middle; text-align: center; } .huge_it_slideshow_image_item2_gallery_5 a { display: block; vertical-align: middle; width: 100%; height: 100%; } .huge_it_slideshow_image_wrap_gallery_5 { background: #ffffff; } .huge_it_slideshow_dots_thumbnails_gallery_5 { top: 0; } .huge_it_slideshow_dots_gallery_5 { background: #000000; } .huge_it_slideshow_dots_active_gallery_5 { background: #ffffff; } #huge_it_slideshow_left_gallery_5 { left: 0; margin-top: -21px; height: 43px; width: 29px; background: url [https:] left top no-repeat; } #huge_it_slideshow_right_gallery_5 { right: 0; margin-top: -21px; height: 43px; width: 29px; background: url [https:] right top no-repeat; } .thumb_image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .entry-content a { border-bottom: none !important; } .gallery-img-content .noneDisplay { display: block; }

Une fois l’installation terminée, testez le bon fonctionnement en rentrant l’adresse localhost:port (port est le numéro de port défini pendant la phase d’installation précédente) dans votre navigateur

Installation de QGis Server LTR 2.14

Suivez le lien suivant http://download.osgeo.org/osgeo4w/ pour accéder au répertoire des installations de QGis Server.

Selon votre processeur, choisissez soit osgeo4w-setup-x86.exe si vous avez un processeur 32 bits, soit osgeo4w-setup-x86_64.exe si vous avez un processeur 64 bits.

Placez la souris sur la diapo pour arrêter le défilement.

Attention! Dans la fenêtre Select packages vous DEVEZ sélectionner, en plus du package WEB -> qgis-ltr-server:QGis server (long term release), le package DESKTOP -> qgis:QGIS Desktop. Si vous ne le faites pas, il y a des dépendances qui ne seront pas installées et votre QGis Server ne fonctionnera pas. /*===== general options =========*/ a { box-shadow: none !important; } .view *, .album_categories *, .album_back_button *, #album_disabled_layer { font-family: sans-serif, Arial, Verdana, Sylfaen !important; } #album_disabled_layer { display: none; position: absolute; width: 100%; height: 100%; text-align: center; background-color: transparent; z-index: 10; padding-top: 20px; color: #fff; } #album_list_container { position: relative; } /* ====================== album onhover styles ==========================*/ #album_list .view { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; display: none; } .view .mask, .view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-family: Raleway, serif; padding: 10px; /*background: rgba(0, 0, 0, 0.8);*/ margin: 20px 0 0 0; } .album_back_button a, .view a { text-decoration: none !important; } .view p { font-family: Merriweather, serif; font-style: italic; font-size: 14px; position: relative; color: #fff; padding: 0px 20px 0px; text-align: center; } .view a.info { display: inline-block; text-decoration: none; font-size: 13px; padding: 2px 14px; margin-bottom: 3px; background: #000; color: #fff; font-family: Raleway, serif; text-transform: uppercase; box-shadow: 0 0 1px #000 } .mask-text h2 { font-size: 20px !important; } .view a.info:hover { box-shadow: 0 0 5px #000 } .view .mask-bg { height: 100%; } .view .album_social { color: #fff; position: absolute; bottom: 3px; left: 3px; border: 1px solid #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 3px 5px; } .view .album_social:active, .view .album_social:focus, .view .album_social:hover { color: #ffffff; outline: none; } /*1*/ .view .info { margin-top: 5px; } .view-first .mask { opacity: 0; background-color: rgba(0, 0, 0, 0.7); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; font-family: Raleway, serif; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info { opacity: 0; transition: all 0.2s ease-in-out; } /* */ .view-first:hover img { /*transform: scale(1.1);*/ } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; } /*2*/ .view-second img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .view-second .mask { background-color: rgba(226, 200, 127, 0.2); transition: all 0.5s linear; opacity: 0; } .view-second h2 { background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-second p { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-second a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-second:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } .view-second:hover .mask { opacity: 1; } .view-second:hover h2, .view-second:hover p, .view-second:hover a.info { transform: scale(1); opacity: 1; } .view-second img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .view-second:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } /*3*/ .view-third img { transform: scaleY(1); transition: all .7s ease-in-out; } .view-third a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-third:hover img { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } .view-third:hover .mask { opacity: 1; } .view-third:hover h2, .view-third:hover p, .view-third:hover a.info { transform: scale(1); opacity: 1; } /* ==== view 4 ===*/ .view-forth-wrapper { overflow: hidden; position: relative !important; height: 100%; /* cursor: pointer;*/ } .view-forth img { max-width: 100%; position: relative; top: 0; -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } .view-forth .mask { position: absolute; width: 100%; /* height: 70px;*/ /* bottom: -70px;*/ height: 50%; bottom: -50%; -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); top: inherit; } .view-forth:hover .mask { bottom: 0; } .view-forth:hover img { top: -30px; } /*== view 5 ==*/ .view-fifth .view-fifth-wrapper, .view-fifth .view-fifth-wrapper img { display: block; position: relative; } .view-fifth .view-fifth-wrapper { overflow: hidden; height: 100%; } .view-fifth .view-fifth-wrapper .mask { display: none; position: absolute; background: #333; background: rgba(75, 75, 75, 0.7); width: 100%; height: 100%; } /* ====================== album category styles ==========================*/ #filters { margin: 1% 0; padding: 0; list-style: none; list-style-type: none !important; } #filters li { float: left; list-style-type: none !important; } #filters li:first-child span { margin-left: 0px; } #filters li span { display: block; text-decoration: none; cursor: pointer; } .album_categories { list-style-type: none; margin: 0; padding: 0; overflow: hidden; padding-top: 5px; } /*========= sharing buttons ============*/ .album_socials { position: relative; top: 3px; width: 100px; height: 28px; margin: 0 auto; } .album_socials .rwd-share-buttons { top: 0px !important; width: 100% !important; margin: 0px !important; } .album_socials a { text-decoration: underline !important; } .gallery_images, .album_image_place { margin-top: 15px; margin-top: 15px; } #rwd-share-facebook:hover { background-position: 0 -31px !important; } #rwd-share-twitter:hover { background-position: -31px 32px !important; } #rwd-share-googleplus:hover { background-position: -66px -31px !important; } .rwd-share-buttons li, .rwd-share-buttons li a { width: 26px !important; border: 0px !important; } .rwd-share-buttons { top: 0 !important; } .img_link_btn { position: absolute; z-index: 99999; bottom: 0; left: 0; right: 0; width: 100%; padding: 8px; } .rwd-title { padding: 10px 0px !important; } @media only screen and (max-width: 475px) { .rwd-share-buttons { top: -25px !important; } .rwd-title-text { line-height: 15px; } } /*========= hover style ===========*/ #hover { color: rgba(188, 175, 204, 0.9); } h2#testimonials { color: #fffae3; } div#all { width: 100%; height: 100%; } .view img { height: auto; } .view { color: #fff; margin: 0 10px 10px 0; overflow: hidden; position: relative; text-align: center; float: left; cursor: default; border: 1px solid #ccc; } .view-wrapper { height: 100%; } .view img { display: block; position: relative; transition: all 0.2s linear; height: 100%; width: auto; max-width: 100%; margin: 0 auto; } .mask-text h2 { font-size: 20px !important; margin-top: 20px !important; } /* view 1 */ .view-first .text-category, .view-first .mask-text h2, .view-first .mask-text p { color: #fff; } /* view 2 */ .view-second .text-category, .view-second .mask-text h2, .view-second p { color: #333; } .view-second .mask-text h2 { border-bottom: 1px solid #333; } /* view 3*/ .view-third .mask { background-color: #ccc; transition: all 0.5s linear; opacity: 0; color: #333; } .view-third h2 { border-bottom: 1px solid #333; background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-third p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-third .text-category { color: #333; } /* view 4 */ .view-forth .mask-bg { background: #333; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .view-forth .mask-text { color: #fff; position: relative; z-index: 500; padding: 5px 8px; } .view-forth .mask-text h2 { margin: 0px; font-size: 13px; padding: 2px; color: #fff; } .view-forth .mask-text h2:hover { cursor: pointer; } .view-forth .text-category { display: block; font-size: 15px; color: #fff; } .view-forth p { color: #fff; } /* view 5 */ .view-fifth .text-category, .view-fifth .text-category *, .view-fifth .mask-text h2, .view-fifth .mask-text p { color: #fff; } var data_gallery_4 = []; var event_stack_gallery_4 = []; data_gallery_4["0"]=[];data_gallery_4["0"]["id"]="0";data_gallery_4["0"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser1.png";data_gallery_4["0"]["description"]="";data_gallery_4["0"]["alt"]="";data_gallery_4["1"]=[];data_gallery_4["1"]["id"]="1";data_gallery_4["1"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser2.png";data_gallery_4["1"]["description"]="";data_gallery_4["1"]["alt"]="";data_gallery_4["2"]=[];data_gallery_4["2"]["id"]="2";data_gallery_4["2"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser3.png";data_gallery_4["2"]["description"]="";data_gallery_4["2"]["alt"]="";data_gallery_4["3"]=[];data_gallery_4["3"]["id"]="3";data_gallery_4["3"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/se4.png";data_gallery_4["3"]["description"]="";data_gallery_4["3"]["alt"]="";data_gallery_4["4"]=[];data_gallery_4["4"]["id"]="4";data_gallery_4["4"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser5.png";data_gallery_4["4"]["description"]="";data_gallery_4["4"]["alt"]="";data_gallery_4["5"]=[];data_gallery_4["5"]["id"]="5";data_gallery_4["5"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser6.png";data_gallery_4["5"]["description"]="";data_gallery_4["5"]["alt"]="";data_gallery_4["6"]=[];data_gallery_4["6"]["id"]="6";data_gallery_4["6"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser7.png";data_gallery_4["6"]["description"]="";data_gallery_4["6"]["alt"]="";data_gallery_4["7"]=[];data_gallery_4["7"]["id"]="7";data_gallery_4["7"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser0.png";data_gallery_4["7"]["description"]="";data_gallery_4["7"]["alt"]="";data_gallery_4["8"]=[];data_gallery_4["8"]["id"]="8";data_gallery_4["8"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser8.png";data_gallery_4["8"]["description"]="";data_gallery_4["8"]["alt"]="";data_gallery_4["9"]=[];data_gallery_4["9"]["id"]="9";data_gallery_4["9"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser9.png";data_gallery_4["9"]["description"]="";data_gallery_4["9"]["alt"]="";data_gallery_4["10"]=[];data_gallery_4["10"]["id"]="10";data_gallery_4["10"]["image_url"]="http://www.sigterritoires.fr/wp-content/uploads/2017/07/ser10.png";data_gallery_4["10"]["description"]="";data_gallery_4["10"]["alt"]=""; var huge_it_trans_in_progress_gallery_4 = false; var huge_it_transition_duration_gallery_4 = 1000; var huge_it_playInterval_gallery_4; // Stop autoplay. window.clearInterval(huge_it_playInterval_gallery_4); // alert('huge_it_current_key_gallery_4'); var huge_it_current_key_gallery_4 = ''; function huge_it_move_dots_gallery_4() { var image_left = jQuery(".huge_it_slideshow_dots_active_gallery_4").position().left; var image_right = jQuery(".huge_it_slideshow_dots_active_gallery_4").position().left + jQuery(".huge_it_slideshow_dots_active_gallery_4").outerWidth(true); } function huge_it_testBrowser_cssTransitions_gallery_4() { return huge_it_testDom_gallery_4('Transition'); } function huge_it_testBrowser_cssTransforms3d_gallery_4() { return huge_it_testDom_gallery_4('Perspective'); } function huge_it_testDom_gallery_4(prop) { // Browser vendor CSS prefixes. var browserVendors = ['', '-webkit-', '-moz-', '-ms-', '-o-', '-khtml-']; // Browser vendor DOM prefixes. var domPrefixes = ['', 'Webkit', 'Moz', 'ms', 'O', 'Khtml']; var i = domPrefixes.length; while (i--) { if (typeof document.body.style[domPrefixes[i] + prop] !== 'undefined') { return true; } } return false; } function huge_it_cube_gallery_4(tz, ntx, nty, nrx, nry, wrx, wry, current_image_class, next_image_class, direction) { /* If browser does not support 3d transforms/CSS transitions.*/ if (!huge_it_testBrowser_cssTransitions_gallery_4()) { jQuery(".huge_it_slideshow_dots_gallery_4").removeClass("huge_it_slideshow_dots_active_gallery_4").addClass("huge_it_slideshow_dots_deactive_gallery_4"); jQuery("#huge_it_dots_" + huge_it_current_key_gallery_4 + "_gallery_4").removeClass("huge_it_slideshow_dots_deactive_gallery_4").addClass("huge_it_slideshow_dots_active_gallery_4"); r

A partir du projet SRTM on dispose aujourd’hui d’une couverture mondiale de données d’élévation de terrain. Il est devenu très simple de réaliser ses propres cartes topographiques avec QGis.

Nous verrons ici:

-comment télécharger les données d’élévation pour la zone qui nous intéresse

-comment mettre en forme le style d’affichage pour qu’il corresponde aux standards des cartes topographiques

-comment accentuer la visualisation grâce à une couche de type « ombrage »

-et finalement comment générer les contours (courbes de niveau)

Télécharger les données d’élévation

Pour télécharger les données d’élévation de votre zone d’intérêt, allez sur la page [viewfinderpanoramas.org]

Cette vidéo vous montre le déroulement du téléchargement.

[www.sigterritoires.fr]

Les données disponibles partout correspondent à une définition de 3″ d’arc, environ 75m. Chaque pixel de votre MNT fera donc cette taille. Pour que le MNT et la carte correspondante soient corrects, il faut travailler avec une zone d’environ une quinzaine de kilomètres de large. Pour des zones plus restreintes, la pixellisation devient visible et la qualité de la carte topographique se ressent.

Les tuiles téléchargées font une taille d’un degré par un degré et sont au format hgt.

Ce format est directement lisible par QGis. Vous pouvez donc charger les tuiles en utilisant l’ajout de raster à la fenêtre cartographique.

Mettre en forme le style d’affichage

Par défaut, le raster est affiché en nuances de gris. Il est donc nécessaire d’appliquer une rampe de couleur adaptée qui accentue la topographie. Bien qu’il soit possible de créer votre propre rampe de couleurs ou d’utiliser une des rampes de couleurs fournies par QGIS, des rampes de couleurs de qualité supérieure peuvent être téléchargées à l’aide du plugin Color Ramp Manager.

Pour l’installer, allez dans le menu Extensions -> Installer/Gérer les extensions, sélectionnez le plugin Color Ramp Manager et cliquez sur Installer l’extension. Vous aurez un nouvel outil ajouté dans votre barre d’outils:

Cliquez sur l’outil pour ouvrir la fenêtre de configuration. En effet, toutes les rampes de couleurs ne sont pas installées automatiquement. Celle qui nous intéresse particulièrement, cpt-city, doit être installée manuellement.

1. Cochez la case Full cpt-city package
2. Choisissez le répertoire pour installer le package. Attention! Par défaut c’est la première option qui est cochée, mais étant donné que le répertoire Program Files est protégé en écriture, ça ne marchera pas. Choisissez plutôt votre répertoire de personnalisation de QGis.
3. Cliquez sur Check for update pour lancer l’installation du paquet.

Une fois le package téléchargé, quittez le dialogue.

Suivez les instructions de la vidéo pour appliquer une rampe de couleurs à votre couche raster

[www.sigterritoires.fr]

 

Ajouter une couche de type « ombrage » (hillshade)

Pour créer cette couche il suffit d’aller dans le menu Raster -> Analyse de terrain -> Ombrage

Rentrez un nom de fichier pour archiver cette nouvelle couche.

Par contre, il est indispensable de modifier le facteur Z. En effet, la commande présuppose que vous travaillez en projection plane, c’est à dire que les coordonnées XY de votre couche raster sont en mètres. Comme la couche est en degrés décimaux (latitude/longitude) il faut entrer un facteur de conversion approprié? La valeur a rentrer est 11120.

Cliquez sur OK pour obtenir votre nouvelle couche d’ombrage.

Il ne vous reste qu’à modifier le style de cette couche pour avoir une vision topographique.

Ouvrez les propriétés de la couche d’ombrage

• Modifiez la valeur Min en 125 et la valeur Max en 255
• Modifiez le Mode de fusion en Multiplier
• Modifiez la Luminosité en 45
• Modifiez le Contraste en 20

Le résultat final est le suivant:

Générer les contours (courbes de niveau)

Si vous voulez ajouter des contours, des courbes de niveau, il suffit d’aller dans le menu Raster-> Extraction -> Création de contours:

• Donnez un emplacement et un nom pour le fichier de contours à créer
• Rentrez l’intervalle, en mètres, entre les différents contours
• Cochez Nom d’attribut si vous souhaitez avoir l’élévation comme champ attributaire des contours (si non, vous ne pourrez pas étiquetter les contours)

Une fois exécutée la commande, vous aurez les contours chargés:

 

Aujourd’hui, je vous fais part d’un petit script webmapping avec OpenLayers (v4). On ne le redira jamais assez mais cette API permet une liberté de créer, d’ajouter de nouvelles fonctionnalités à votre carte en ligne. Et, dans le même esprit, le tutoriel du jour peut être reproduit avec n’importe quelle donnée vectorielle SIG. Le vecteur est composé d’objets géographiques (features) contenant une géométrie et des attributs. Alors, quel est l’objectif de ce tutoriel?
Les attributs du vecteur sont cartographiés et listés dans un conteneur séparément. Du côté de la carte, le clic sur la géométrie de l’objet permet de montrer un ou des attributs visualisés en haut de la liste. D’un autre côté, le survol d’un attribut dans le conteneur déclenche le zoom sur la géométrie de l’objet géographique associé.

1. Liste des objets géographiques du vecteur

Dans un premier temps, on se charge de créer les deux conteneurs en HTML et CSS avec Bootstrap : la carte et la liste des attributs avec un scroll. Le vecteur utilisé est de format GeoJSON et représente les pays du monde, il a déjà été utilisé dans plusieurs tutoriels de webmapping comme celui sur  l’affichage des informations géographiques d’un fichier GeoJSON dans une fenêtre modale. Il est bien entendu possible d’adapter ce code avec tous les formats de données vectorielles pris en charge par OpenLayers tels le GPX, le KML, les protocoles WFS. Un seul attribut est affecté à chaque objet géographique : “name”. On déclare la source de la donnée avec l’URL de la data puis la couche vectorielle stylisée avec la classe ol.layer.Vector que l’on ajoute à l’objet Map.

// Style de la couche vectorielle
var style = new ol.style.Style({
	stroke: new ol.style.Stroke({
		color: '#000',
		width: 3
	}),
	fill: new ol.style.Fill({
		color: '#fff',
	}),
});
// Déclaration de la source du vecteur de format GeoJSON
var urlData='pays.geojson';	
var sourceVecteur = new ol.source.Vector({
	url: urlData,
	format: new ol.format.GeoJSON()
});
// Déclaration de la couche vectorielle	
var vecteur = new ol.layer.Vector({
	title:"pays",
	source: sourceVecteur,
	style: style
});
// Déclaration de l'objet Map
var map = new ol.Map({
	layers: [vecteur],
	target: 'map',
	view: new ol.View({
		center: ol.proj.transform( [0, 48], 'EPSG:4326', 'EPSG:3857'),
		zoom: 3
	})
});

Listons les attributs des données géographiques. Deux classes d’OpenLayers en lien avec la source de la donnée sont importantes ici : getState() et getFeatures(). getState() permet de contrôler l’état de chargement de la source de la donnée et getFeatures() chargent la géométrie de chaque objet géographique et leurs attributs. A partir de la source du vecteur, on peut lister de deux manières les données par :

• la fonction forEachFeature(function(feature) { }) avec feature l’objet contenant la géométrie et les attributs;
• une boucle basique for sur le nombre d’objets géographiques;

Je choisis cette dernière solution pour injecter un nouvel attribut à chaque objet, un identifiant unique par la classe setId(). Pourquoi? Bonne question… La donnée vectorielle n’a peut être pas d’identifiant unique, ce qui est le cas dans la donnée utilisée et plusieurs attributs du vecteur peuvent être identiques. Cela pose un problème pour associer une action unique à l’objet considéré. Voici la fonction listant les attributs dans le conteneur avec scroll :

// Liste des attributs du vecteur 
sourceVecteur.once('change', function(evt){
	// On vérifie que la source de la donnée est chargée
	if(sourceVecteur.getState() === 'ready'){
		// Si le vecteur possède au moins un objet géographique
		if(sourceVecteur.getFeatures().length >0){
			// On obtient les objets géographiques
			var features = sourceVecteur.getFeatures();
			var nbFeatures = features.length;
			// Pour chaque objet géographique
			for(var i = 0; i < features.length; i++){
				// On attribut un identifiant unique
				features[i].setId(i);
				// On déclare l'attribut : ici name. A modifier selon vos données
				var name = features[i].get('name');
				// On liste les attributs dans le conteneur avec la déclaration de la fonction zoomFeature par la méthode de survol de la souris
				$('.liste-objet').append('<p id="feature'+i+'" onmouseover="zoomFeature(\'' + i + '\'); return false;"><span class="badge">'+i+'</span> '+name+'</p>');
			}	
		}
	}	
});

On note l’utilisation de la classe append de JQuery  pour montrer les identifiants et les noms des pays les uns après les autres dans une balise <p>. Pour chacune d’elle, on associe un id en lien avec l’identifiant unique de l’attribut. Il faut bien entendu modifier le nom de l’attribut appelé par la méthode get() en lien avec votre couche SIG.

2. Mise en évidence de l’attribut associé à la géométrie sélectionnée sur la carte 2.1. ScrollTop de l’attribut de l’objet géographique sélectionné

Ici, on écrit une fonction qui permet de montrer l’attribut associé à la géométrie sélectionnée sur la carte en haut de la liste et d’une autre couleur. On retourne l’objet géographique sélectionné au clic sur la carte par la fonction :

// Sélection de la géométrie sur la carte
map.on('singleclick', function(evt){
	// Obtiention de l'objet géographique du vecteur affiché en dernier
	var featureSelect = map.forEachFeatureAtPixel(evt.pixel, function(feature){
		return feature;
	});
	// Si on obtient l'objet
	if(featureSelect){
		...
	}
});

Cette fonction est valable pour un vecteur, pour une donnée affiché via un protocole WM(T)S, il faut utiliser une autre fonction pour lire les attributs. A l’intérieur de cette fonction, une fois l’objet géographique obtenu, on récupère son identifiant unique défini précédemment. Puis la fonction animate de JQuery nous permet de faire dérouler la liste de noms de pays automatiquement et de cibler l’attribut de l’objet sélectionné en haut de la liste par la classe scrollTop. Ici, on voit bien l’importance de définir un identifiant unique pour chaque objet du vecteur! On a donc :

// Sélection de la géométrie sur la carte
map.on('singleclick', function(evt){
	// Obtiention de l'objet géographique du vecteur affiché en dernier
	var featureSelect = map.forEachFeatureAtPixel(evt.pixel, function(feature){
		return feature;
	});
	// Si on obtient l'objet
	if(featureSelect){
		// On déclare son identifiant unique
		var idFeature = featureSelect.getId();
		// L'attribut est affcihé en haut de la liste par un scroll automatique
		$('.liste-objet').animate({
			scrollTop: $('#feature'+idFeature+'').offset().top - $('.liste-objet').offset().top + $('.liste-objet').scrollTop()
		}, 500);
	}
});

Ok, c’est marrant mais j’aimerais que la géométrie et l’attribut sélectionnés aient une couleur différente! Pas de problème, on y vient.

2.2. Styles de la géométrie et de l’attribut?

Commençons par la géométrie observée sur la carte. Tout d’abord, on définit un nouveau style puis on affecte ce dernier à l’objet géographique par la classe setStyle(). Il faut aussi penser à “réinitialiser” toutes les couleurs des objets avec le style initial lors de chaque clic sur la carte. On procède de manière identique avec le style de liste grâce à la classe css de JQuery.

// Attribution des styles d'origine 
function setColor(){
	sourceVecteur.forEachFeature(function(feature) {
		feature.setStyle(style);
	});
	$('.liste-objet p').css('background-color','#fff');
}
// Sélection de la géométrie sur la carte
map.on('singleclick', function(evt){
	// On affecte les styles d'origine
	setColor();
	// Obtiention de l'objet géographique du vecteur affiché en dernier
	var featureSelect = map.forEachFeatureAtPixel(evt.pixel, function(feature){
		return feature;
	});
	// Si on obtient l'objet
	if(featureSelect){
		// On lui affecte le nouveau style
		featureSelect.setStyle(newStyle);
		// On déclare son identifiant unique
		var idFeature = featureSelect.getId();
		// L'attribut est affcihé en haut de la liste par un scroll automatique
		$('.liste-objet').animate({
			scrollTop: $('#feature'+idFeature+'').offset().top - $('.liste-objet').offset().top + $('.liste-objet').scrollTop()
		}, 500);
		$('#feature'+idFeature+'').css('background-color','#FF4000');
	}
});

La réinitialisation des styles est placée dans une fonction à part setColor() puisqu’elle sera réutilisée dans la section suivante.

3. Zoom sur la géométrie associée à l’attribut survolé dans la liste

L’idée est de zoomer sur la géométrie associée à l’attribut “survolé” dans la liste. La fonction zoomFeature(idFeature) est ajoutée dans chaque balise <p> (cf. $1.) avec idFeature l’identifiant unique. Elle est déclenchée par la méthode JavaScript onmouseover, on aurait pu utiliser d’autres méthodes comme onclick par exemple. Dans la fonction, on obtient l’objet géographique par la classe getFeatureById(idFeature) attachée à la source de la donnée. Une fois définie, on zoome sur l’extension de la géométrie associée à l’objet.

// Zoom sur l'objet géographique à partir de l'id de l'attribut survolé
function zoomFeature(idFeature){	
	// On réinitialise tous les styles
	setColor();
	$('#feature'+idFeature+'').css('background-color','#FF4000');	
	// Déclaration de l'objet géographique à partir de l'id de l'attribut survolé
	var feature = sourceVecteur.getFeatureById(idFeature);
	// On lui affecte le nouveau style
	feature.setStyle(newStyle);
	// On déclare l'étendue de la géométrie de l'objet géographique
	var geomFeature = feature.getGeometry().getExtent();
	// On zoom sur cette étendue
	map.getView().fit(geomFeature);
}

On n’oublie pas de réaffecter les styles (cf. 2.2.).

En conclusion, ce tutoriel de webmapping nous a montré comment interagir entre les géométries d’un vecteur observées sur la carte et les attributs associés contenus dans un bloc. La définition d’un identifiant unique est recommandée pour déclencher des actions spécifiques en lien avec l’objet géographique considéré. La manipulation des objets géographiques a fait appel principalement à des fonctions de sélection sur la carte, de zoom et de modification de style avec l’API d’OpenLayers. L’utilisation de JQuery a servi à cibler les attributs des objets géographiques sélectionnés dans la liste déroulante par des classes liées au scroll et au style css. Le script final est disponible pour les utilisateurs du site.

 

Cet article Hang Zhou, un nouveau mode de ville intelligente est apparu en premier sur Veille cartographique 2.0.

Hang Zhou, la capitale de la province chinoise du Zhejiang, est située à 200 km au sud-ouest de Shanghai. Elle a plus de 9 millions d’habitants (2015) sur une superficie de 701 km². Grâce à l’implantation de Alibaba, le leader de e-commerce en Chine, Hangzhou est devenu la capitale du secteur. Cette ville repose sur un […]

Cet article Hang Zhou, un nouveau mode de ville intelligente est apparu en premier sur Veille cartographique 2.0.

Cet article Timelaps 2/2 : cartographie de l’histoire des frontières européennes est apparu en premier sur Veille cartographique 2.0.

Comme annoncé dans mon premier article portant sur des « Timelaps », en voici le second. Dans la même logique que le précédent article traitant des photos satellites témoin de l’action de l’homme sur son environnement évaluées grâce à une vidéo timelaps, il s’agit ici de comprendre par le même type de document l’évolution des frontières européennes […]

Cet article Timelaps 2/2 : cartographie de l’histoire des frontières européennes est apparu en premier sur Veille cartographique 2.0.

Cet article Le drone Helper expérimenté l’été 2016, fait de nouveaux tests cette année pour surveiller les plages françaises est apparu en premier sur Veille cartographique 2.0.

Le drone Helper sera expérimenté cet été sur trois plages du sud ouest de la France. Un nouveau véhicule équipé de six moteurs sera employé pour cette seconde campagne « grandeur nature »avec des sauveteurs High-Tech.   Drone Helper surveillant une plage en 2016 De quoi s’agit-il ? Si cet été sur les plages du sud ouest […]

Cet article Le drone Helper expérimenté l’été 2016, fait de nouveaux tests cette année pour surveiller les plages françaises est apparu en premier sur Veille cartographique 2.0.

Cet article Si tous les glaciers, le pergélisol et les glaces de mer fondaient… est apparu en premier sur Veille cartographique 2.0.

On connait tous ce qu’est le réchauffement climatique :  c’est généralement le phénomène de l’augmentation de température de la Terre. Ce concept n’est pas apparu depuis longtemps, mais il s’agit d’un phénomène qui se produit sur Terre depuis environ 150 ans, dès le début de la Révolution Industrielle. Jusqu’à 2016, la température moyenne de la Terre […]

Cet article Si tous les glaciers, le pergélisol et les glaces de mer fondaient… est apparu en premier sur Veille cartographique 2.0.

Cet article Un étudiant de l’université de Hong-Kong remporte le prix international du SIG avec des recherches sur la pollution du bruit de la circulation dans le district ouest de sa ville universitaire est apparu en premier sur Veille cartographique 2.0.

M. Kenneth Wong Kiu-Ho, étudiant d’arts dans le programme d’études urbaines à l’Université de Hong Kong (HK), a remporté le prix d’ESRI jeunes boursiers (YSA) 2017.  Son sujet est une « enquête sur la pollution par le bruit de la circulation pour les résidents dans le district ouest de Hong-Kong ». Il a été invité à recevoir […]

Cet article Un étudiant de l’université de Hong-Kong remporte le prix international du SIG avec des recherches sur la pollution du bruit de la circulation dans le district ouest de sa ville universitaire est apparu en premier sur Veille cartographique 2.0.

Cet article La SNCF se met à la data-visualisation est apparu en premier sur Veille cartographique 2.0.

8 000 000 de requêtes hebdomadaires sur le site Transilien.com de la SNCF, ça fait un petit paquet de données à traiter vous ne trouvez pas ? La SNCF a décidé d’exploiter ces requêtes d’itinéraires des Franciliens en les agrégeant et en produisant une data-visualisation claire et précise à destination des équipes internes. L’objectif est simple, anticiper la […]

Cet article La SNCF se met à la data-visualisation est apparu en premier sur Veille cartographique 2.0.

Cet article Timelaps 1/2 : des photos satellites témoins de l’action de l’homme sur son environnement est apparu en premier sur Veille cartographique 2.0.

Dans une série de deux articles, des vidéo « Timelaps » seront exposées. Les « Timelaps » sont des prises de vues d’un même sujet capturés à une fréquence régulière. L’exemple le plus parlant serait la capture d’un coucher de soleil : l’appareil photo est posé au sol et capture toutes les 5 secondes le soleil qui décline vers […]

Cet article Timelaps 1/2 : des photos satellites témoins de l’action de l’homme sur son environnement est apparu en premier sur Veille cartographique 2.0.

Cet article Le SHOM lance un service de prévisions côtières et océanographiques est apparu en premier sur Veille cartographique 2.0.

Envie de planifier une sortie en mer ? Envie d’étancher votre soif de surf ou de kayak par exemple ? Le nouveau volet de prévisions côtières et océanographiques élaboré par le SHOM est fait pour vous ! Le service Océanogramme est gratuit et accessible à tous. Il permet de faciliter l’usage météo-océanographique mais également d’encourager toutes formes d’initiatives pour […]

Cet article Le SHOM lance un service de prévisions côtières et océanographiques est apparu en premier sur Veille cartographique 2.0.

Cet article « A Day in the Life of Americans » : un jour, des lieux est apparu en premier sur Veille cartographique 2.0.

Comment les américains passent-ils leur journée ? C’est à cette question que répond Nathan Yau par une brillante animation dataviz basée sur les données recueillies par l’American Time Use Survey. L’auteur propose de réduire la population du pays à 1 000 personnes, soit 1 000 points animés par une timelapse. Le temps d’une journée défile minute par […]

Cet article « A Day in the Life of Americans » : un jour, des lieux est apparu en premier sur Veille cartographique 2.0.

Cet article Une carte du monde pour comprendre la consommation d’électricité est apparu en premier sur Veille cartographique 2.0.

Vous voulez savoir d’où provient l’électricité d’un pays ? La quantité de CO2 émise pour la produire ? Le potentiel éolien ? Ou encore le potentiel solaire ? Ne cherchez plus, Olivier Corradi ainsi qu’une vingtaine de contributeurs ont la carte qu’il vous faut ! Basés sur des données open source, ces derniers ont cartographié et […]

Cet article Une carte du monde pour comprendre la consommation d’électricité est apparu en premier sur Veille cartographique 2.0.

Cet article L’open Data et GRDF : une volonté affirmée est apparu en premier sur Veille cartographique 2.0.

Depuis 2014, afin de sensibiliser ses collaborateurs, GRDF (Gaz Réseau Distribution France) travaille avec la start-up OpenDataSoft pour partager certaines de ses données telles que la consommation annuelle de gaz agrée à la maille IRIS, les quantités acheminées journalières provisoires et définitives ou encore les quantités injectées de biométhane. Néanmoins, avant 2017, ces données n’étaient […]

Cet article L’open Data et GRDF : une volonté affirmée est apparu en premier sur Veille cartographique 2.0.

Cet article Une sculpture pour sensibiliser au réchauffement climatique est apparu en premier sur Veille cartographique 2.0.

Dans le cadre de la Biennale de la ville de Venise, l’artiste italien Lorenzo Quinn a réalisé une sculpture de 9 mètres de haut représentant deux mains d’enfant qui viennent soutenir les façades d’un bâtiment historique. Au travers de cette œuvre intitulée « Soutient », l’artiste à souhaité alerter les habitants et les pouvoirs publics sur la […]

Cet article Une sculpture pour sensibiliser au réchauffement climatique est apparu en premier sur Veille cartographique 2.0.

Cet article Marie-Galante en route pour la transition énergétique est apparu en premier sur Veille cartographique 2.0.

La loi de transition énergétique devra être mise en application en 2030 sur l’ensemble du territoire français. Un territoire se démarque des autres, il s’agit de l’île de Marie-Galante. Elle devrait réussir cette transition avec 10 ans d’avance, soit en 2020. Cette île fait partie de l’archipel de la Guadeloupe, elle est située au sud est […]

Cet article Marie-Galante en route pour la transition énergétique est apparu en premier sur Veille cartographique 2.0.

Cet article « Ceux qui ne sont jamais arrivés », réflexions sur ce que peut transmettre une carte est apparu en premier sur Veille cartographique 2.0.

La crise migratoire européenne a déjà fait l’objet de plusieurs articles dans ce blog : sur les migrations, sur son coût humain, ou sur les camps d’enfermement. Elle a même fait l’objet d’une journée d’étude il y a un an « La géomatique dans l’aide aux réfugiés ». Levi Westerveld apporte sa pierre à l’édifice des nombreuses cartographies […]

Cet article « Ceux qui ne sont jamais arrivés », réflexions sur ce que peut transmettre une carte est apparu en premier sur Veille cartographique 2.0.

Cet article Snap Maps : du nouveau du côté de SnapChat est apparu en premier sur Veille cartographique 2.0.

L’application gratuite SnapChat permet de partager des photos ou des vidéos entre utilisateurs. Disponible sur Android et iOS, celle-ci avait vu son nombre d’utilisateurs diminuer progressivement ces derniers temps et cette baisse de la popularité de l’application faisait peur aux investisseurs potentiels. Dans une volonté d’améliorer leur produit et d’attirer du nouveau public, SnapChat a […]

Cet article Snap Maps : du nouveau du côté de SnapChat est apparu en premier sur Veille cartographique 2.0.

After 3 years of development, we are very happy to share the news of Sen2Agri system release. Sen2Agri system is a fully automatic production system to produce agriculture information from Sentinel-2 data, with a focus on food security applications. For this reason, the final user meeting was held in Rome at Food and Agriculture Organization and World Food Program. The Sen2Agri project was funded and managed by ESA, and developed by a consortium led by Université Catholique de Louvain, with CESBIO, CS France and CS-Romania.

A very attentive audience at the User Final Meeting, in the impressive World Food Programm conference room

The system manages the following operations :

• Sentinel-2 and LANDSAT 8 data download,
• L2A processing with MACCS/MAJA software (developed by CNES and CESBIO)
• Monthly Synthesis product generation (with a method developed at CESBIO)
• Generation of LAI products (based on a method developed at INRA, France, and updated, integrated to Orfeo Toolbox by CESBIO)
• A Crop mask (issued several times per year), with two different methods :
  • without in situ data (method developed at UCL)
  • with in-situ data (method developed at CESBIO)
• A crop type product (with a method developed at CESBIO, an early version of iota2 processor)

The scientific work behind the methods was described in a special issue of MDPI remote sensing.

The system was developed by C-S company, in France and Romania. It may be downloaded from sen2agri platform, or from Sen2Agri github platform. It is a free software. You will also need to download the MACCS atmospheric correction software from CNES.

During the past year, the consortium processed or helped users processing data on 3 countries and 12 demonstration sites (such as our site in Occitanie, France below). The users seemed mostly happy with the results, but gave us constructive feedback and proposals that we will try to integrate in future versions.

 

Surface reflectance monthly synthesis of August over Occitanie, France

Cropland mask accuracy improvement along the season

 

Cet article #Metro est apparu en premier sur Veille cartographique 2.0.

Nos smartphones sont aujourd’hui tous doté d’un GPS et par conséquent de plus en plus d’applications font usage de ces données. Parmi ces applications, Instagram, le réseau social de partage de photo. Pour mettre en avant leur photographies, les utilisateurs accompagnent leur description par des hashtag (une sorte de mot clé) qui permettent de rattacher […]

Cet article #Metro est apparu en premier sur Veille cartographique 2.0.

Lorsque l’utilisateur double-clique sur un repère, Google Earth automatiquement zoome la vue directement sur le marqueur. Vous pouvez contrôler la vue initiale du marqueur en spécifiant un élément <LookAt> qui définit le point de vue exact du point d’intérêt. Nous décrirons ici comment spécifier un élément de type <LookAt> pour un repère.
Une fois que vous avez créé un ensemble de repères, vous pouvez voler successivement de l’un à l’autre.

Spécification d’un point de vue

L’élément <LookAt> décrit un point de vue en utilisant un point sur la surface de la Terre comme référence. Voici la syntaxe de cet élément:

<LookAt id="ID">
<longitude>0.0</longitude>
<latitude>0.0</latitude>
<altitude>0.0</altitude>
<heading>0.0</heading>
<tilt>0.0</tilt>
<range>0.0</range>
<altitudeMode>clampToGround</altitudeMode>
</LookAt>

Les éléments enfants pour <LookAt> sont les suivants:

• <longitude> : La longitude du point observé. C’est la distance angulaire en degrés par rapport au Meridien de référence (en principe Greenwich). Les valeurs à l’ouest du Meridien vont de -180 degrés à 0 degrés. Les valeurs à l’est du Meridien vont de 0 degrés à 180 degrés.
• <latitude> :Latitude du point observé. Degrés au Nord ou au Sud de l’équateur (0 degrés). Les valeurs varient de -90 degrés à 90 degrés.
• <altitude> :Distance de la surface de la Terre, en mètres. Voir <altitudeMode> pour savoir comment cette valeur est interprétée.
• <heading> :Direction (c’est-à-dire Nord, Sud, Est, Ouest), en degrés. Par défaut = 0 (Nord). Les valeurs varient de 0 degrés à 360 degrés, avec 90 degrés = Est, 180 degrés = Sud, 270 degrés = Ouest. Cette valeur peut également être spécifiée en degrés négatifs (dans le sens inverse des aiguilles d’une montre de 0).
• <tilt> :Angle entre la direction du point de vue et la surface de la Terre (voir Figure). Les valeurs varient de 0 degrés à 180 degrés. Les valeurs ne peuvent pas être négatives. Une valeur de 0 degrés indique l’observation à partir d’un point perpendiculaire à la localisation, en regardant vers le bas. Une valeur de 90 degrés indique l’observation horizontale, droit vers l’horizon.
• <range> :Distance en mètres entre le point spécifié par <longitude>, <latitude>, et <altitude>, et la position du point de vue.
• <altitudeMode> :Spécifie comment l’altitude définie pour le point (valeur de <altitude>)est interprétée. Les valeurs possibles sont les suivantes:
  • ClampToGround (par défaut): Indique d’ignorer la spécification de <altitude> et place la position de <LookAt> directement sur le sol.
  • RelativeToGround :Interprète <altitude> comme une valeur en mètres au-dessus du sol.
  • absolute :Interprète <altitude> comme une valeur en mètres au-dessus du niveau de la mer.

La manière la plus simple de créer un élément avec les valeurs souhaitées est d’utiliser le copier-coller décrit dans l’article précédent.

la fonctionnalité SnapShot de Google Earth.  Volez, inclinez ou faites pivoter l’affichage jusqu’à ce que vous soyez satisfait de la vue. Cliquez avec le bouton droit de la souris sur le repère et sélectionnez Copier. Ouvrez un éditeur de texte et faites un Coller.

Dans l’exemple suivant [www.nasca.ovh]

Le résultat du Copier-coller est le suivant:

<kml xmlns=" [www.opengis.net] xmlns:gx=" [www.google.com] xmlns:kml=" [www.opengis.net] xmlns:atom=" [www.w3.org]
<Placemark>
<name>Visite du 16 juin 2017</name>
<description><![CDATA[<p>Après vérification des capteurs mis en place, nous avons procédé à l’échantillonnage</p>
<p>Les échantillons ont été marqués et emballés sur place</p>]]></description>
<LookAt>
<longitude>-4.964173334596812</longitude>
<latitude>48.39543755926342</latitude>
<altitude>0</altitude>
<heading>8.905506807657265</heading>
<tilt>79.30646922221436</tilt>
<range>1174.810688535466</range>
<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
</LookAt>
<Point>
<coordinates>-4.964,48.392,0</coordinates>
</Point>
</Placemark>
</kml>

L’élément <LookAt> doit être placé immédiatement après la balise </description>.

Groupement de repères : la balise <Folder>

Utilisez un élément <Folder> pour grouper plusieurs repères. Un <Folder>, comme un <Placemark>, a les éléments <name> et <description>, qui apparaissent dans la vue des lieux. Dans Google Earth, vous pouvez visiter les différents repères dans un dossier en cliquant sur le dossier et en sélectionnant le bouton Lancer la visite dans liste des lieux

Si vous spécifiez des points de vue pour les repères, Google Earth passe automatiquement au point de vue spécifié pour chaque repère.

Le fichier [www.nasca.ovh] affiche un <Folder> qui contient trois éléments <Placemark>, chacun avec un point de vue spécifié par un élément <LookAt>.

"lookat.kml"<kml xmlns=" [www.opengis.net] xmlns:gx=" [www.google.com] xmlns:kml=" [www.opengis.net] xmlns:atom=" [www.w3.org]
<Folder>
<name>Vol vers des repères</name>
<open>1</open>
<Placemark id="1">
<name>Visite du 16 juin 2017</name>
<description><![CDATA[<p>Après vérification des capteurs mis en place, nous avons procédé à l’échantillonnage</p>
<p>Les échantillons ont été marqués et emballés sur place</p>]]></description>
<LookAt>
<longitude>-4.964173334596812</longitude>
<latitude>48.39543755926342</latitude>
<altitude>0</altitude>
<heading>8.905506807657265</heading>
<tilt>79.30646922221436</tilt>
<range>1174.810688535466</range>
<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
</LookAt>
<Point>
<coordinates>-4.964,48.392,0</coordinates>
</Point>
</Placemark>
<Placemark id="2">
<name>Visite du 17 juin 2017</name>
<description>
<![CDATA[
<p>Après vérification des capteurs mis en place, nous n’avons pas procédé à l’échantillonnage</p>
]]>
</description>
<LookAt>
<longitude>-4.964027085363179</longitude>
<latitude>48.39848639649534</latitude>
<altitude>0</altitude>
<heading>112.6147092667253</heading>
<tilt>43.68158406433638</tilt>
<range>1308.593420201757</range>
<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
</LookAt>
<Point>
<coordinates>-4.96559,48.40013,0</coordinates>
</Point>
</Placemark>
<Placemark id="3">
<name>Visite du 18 juin 2017</name>
<description>
<![CDATA[
<p>Après vérification des capteurs mis en place, nous avons procédé à l’échantillonnage</p>
<p>Les échantillons ont été marqués et emballés sur place</p>
]]>
</description>
<LookAt>
<longitude>-4.95766406933723</longitude>
<latitude>48.40344387516042</latitude>
<altitude>0</altitude>
<heading>-116.414218265003</heading>
<tilt>57.02348249571338</tilt>
<range>701.6067609970371</range>
<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
</LookAt>
<Point>
<coordinates>-4.95670,48.40211,0</coordinates>
</Point>
</Placemark>
</Folder>
</kml>

Si vous utilisez le bouton Lancer la visite, vous verrez successivement chaque repère à partir du point de vue défini dans le fichier kml pendant quelques secondes, puis la vue se déplacera au prochain point de vue, et ce jusqu’au dernier repère.

Les temps par défaut sont paramétrés dans le menu Outils -> Options -> Visite

Voici le résultat de la visite du fichier lookat.kml

[www.sigterritoires.fr]

Cet article Un métro pour l’Empire Romain ? est apparu en premier sur Veille cartographique 2.0.

Dès -300 av J-C, les romains ont décidé de mettre en place un système de routes pour asseoir leur domination sur les territoires conquis. Ces routes d’abord construites pour des raisons militaires, permettent de relier Rome à tout l’Empire et de développer le commerce. Les historiens estiment que la première représentation cartographique de ces routes aurait […]

Cet article Un métro pour l’Empire Romain ? est apparu en premier sur Veille cartographique 2.0.

Cet article Le SIG explore la Caverne du Dragon ! est apparu en premier sur Veille cartographique 2.0.

L’Histoire avec un grand « H » s’étudie, se partage et se raconte. Les SIG (Systèmes d’Information Géographique) se développent de plus en plus en faveur de l’Histoire. En effet, ils modernisent l’accès à l’information et retracent autrement les faits historiques. Ainsi, une application numérique au service de l’Histoire permet aux visiteurs de parcourir en ligne les […]

Cet article Le SIG explore la Caverne du Dragon ! est apparu en premier sur Veille cartographique 2.0.

Cet article « lecoincamping.com » vivons le camping différemment est apparu en premier sur Veille cartographique 2.0.

Les grandes vacances arrivent à grand pas et vous n’avez toujours pas trouvé votre bonheur ? Voici le site qui fera peut-être le vôtre, « lecoincamping.com ». Ce site propose des camping atypiques selon les goûts de chacun car oui, ce site est participatif. Qui sont les protagonistes à l’instar de la création du site ? Ce […]

Cet article « lecoincamping.com » vivons le camping différemment est apparu en premier sur Veille cartographique 2.0.

Cet article ToxicSites, état des lieux de la pollution industrielle aux États-Unis est apparu en premier sur Veille cartographique 2.0.

On les connaît, ils répondent au nom d’arsenic, de benzène ou encore de plomb etc. les éléments contaminants peuvent polluer de larges zones et provoquer des dommages majeurs sur l’homme et sur l’environnement. Aux États-Unis, les sites pollués par ces déchets dangereux sont classés Superfund. Ce classement provient d’une loi fédérale de 1980, mise en […]

Cet article ToxicSites, état des lieux de la pollution industrielle aux États-Unis est apparu en premier sur Veille cartographique 2.0.

Cet article La carte des satellites en orbite est apparu en premier sur Veille cartographique 2.0.

Près de 15500 satellites sont en orbite autour de la terre… dont 11500 débris! Esri offre la première carte des satellites en orbite disponible pour le grand public. En effet, en cliquant sur ce lien vous découvrirez l’application web développée par Esri  Prototype Lab en Californie.     Cette application représente le globe numérique et […]

Cet article La carte des satellites en orbite est apparu en premier sur Veille cartographique 2.0.

Cet article L’observatoire des territoires : mesurer le développement durable est apparu en premier sur Veille cartographique 2.0.

Le développement durable est un concept aujourd’hui largement développé et employé dans divers champs disciplinaires. Tout le monde s’accorde sur la définition du développement durable. Il est admis que ce dernier repose sur trois fameux piliers que sont l’économie, l’environnement et le social. Mais si nous pouvons le définir, pouvons nous pour autant le mesurer […]

Cet article L’observatoire des territoires : mesurer le développement durable est apparu en premier sur Veille cartographique 2.0.

Cet article L’amélioration des données géographiques dans la direction Centre-Est de l’IGN est apparu en premier sur Veille cartographique 2.0.

L’Institut National Géographique (IGN) est le référent national pour la production, la diffusion et la mise à jour des données géographiques sur l’ensemble du territoire français. Créé en 1940 à la suite d’un décret, faisant office de succession au Service Géographique de l’Armée, l’IGN fournit des informations géographiques sous forme de référentiels. Afin d’en assurer […]

Cet article L’amélioration des données géographiques dans la direction Centre-Est de l’IGN est apparu en premier sur Veille cartographique 2.0.