Le blog de Philippe Poisse - Mot-clé - OpenStreetMap
2024-03-28T22:26:21+01:00
Philippe Poisse
urn:md5:461e3511a43adbbb7d3a84a8af2d4212
Dotclear
Carte des caméras de vidéosurveillance
urn:md5:239e3b9913e2bad0203f201bae3a7f70
2021-03-04T01:00:00+01:00
2023-05-02T13:47:22+02:00
Philippe Poisse
Axiomachie
OpenStreetMapVidéosurveillance
<p>Le truc quand on est enfermé chez soi à partir de 18 h et que l’on sait programmer, dans un sens très laxiste de « savoir programmer », c’est que l’on finit par programmer des trucs. Donc j’ai commencé à mettre à jour une partie des frameworks que j’utilise pour la cartographie.<br />
Et comme il fallait bien cartographier un truc utile, j’ai décidé d’attaquer les caméras de vidéosurveillance.<br />
Et quand je dis « attaquer », on est pas loin du sens militaire du terme.</p> <div>
<p><a href="http://www.philippe-poisse.eu/cartes/camera/index.html" target="_blank">Voir la carte en pleine page.</a></p>
</div>
<div><iframe height="500px" id="camera" src="http://www.philippe-poisse.eu/cartes/camera/index.html" style="display:block; position: relative; border: black solid 1px;" width="100%"> </iframe></div>
<h2>Pourquoi une telle carte ?</h2>
<p>La technopolice, ça vous parle ? Si la réponse est non, je vous conseille qu’aller visiter le site <a href="https://technopolice.fr/">technopolice.fr</a> histoire de mieux cerner le problème.<br />
Si la réponse est oui, vous comprenez déjà l’intérêt de mieux connaître les outils technologiques mis en place dans chaque commune. OpenStreetMap permet de cartographier les caméras de vidéosurveillance, ainsi que d’autres équipements du même acabit. Disposer de ce type d’information permet de commencer à analyser les politiques publiques mises en œuvre en termes de sécurité et de pouvoir baser sa réflexion sur des faits objectivables.<br />
Il faut se rendre à l’évidence, la gestion de la vidéosurveillance est particulièrement opaque, alors qu’elle est réalisée avec de l’argent public et impacte directement la vie quotidienne de million de personnes. La sécurité est un besoin important, il est normal que les pouvoirs publics y répondent. Il n’est par contre pas normal que cette réponse soit tout sauf transparente.</p>
<p>La cartographie des caméras de vidéosurveillance fait partie des données qui devraient être rendues publiques dans le cadre d’une stratégie OpenData des collectivités territoriales.<br />
En attendant que les pouvoirs publics libèrent ces données, il est toujours possible de cartographier les caméras soi-même. Et il n’y a pas de raison de s’en priver.</p>
<h2>D’autres projets de cartographie des caméras de vidéosurveillance</h2>
<p>Deux projets sont à signaler.<br />
D’abord le projet <a href="https://www.sous-surveillance.net/presentation-du-projet-sous.html">sous-surveillance.net</a> qui est sans doute le plus ancien projet français sur le sujet. Le site n’est plus très actif mais les infirmations sont très intéressantes.<br />
Le projet <a href="https://carto.technopolice.be/">technopolice.be</a> est l’homologue belge du projet technopolice.fr. La carte de Bruxelles qui est mise en ligne sur ce site est très complète et montre toutes les formes d’urbanisme hostile qu’une grande ville peut connaître.</p>
<p class="conclusion" id="conclusion">Dès que j’ai un peu de temps et beaucoup de motivation j’écrirais un tutoriel pour expliquer dans le détail comment cartographier des caméras de vidéosurveillance installées dans l’espace public. En attendant, si ce type d’action vous intéresse vous trouverez plein d’informations en ligne pour vous aider, et il existe sûrement un groupe OpenStreetMap ou un groupe GNU/Linux près de chez vous pour vous accompagner.</p>
<h2>Liens</h2>
<ul>
<li><a href="https://technopolice.fr/">https://technopolice.fr/</a></li>
<li><a href="https://carto.technopolice.be/">https://carto.technopolice.be/</a></li>
<li><a href="https://www.sous-surveillance.net/presentation-du-projet-sous.html">https://www.sous-surveillance.net/presentation-du-projet-sous.html</a></li>
</ul>
http://blog.philippe-poisse.eu/index.php?post/2021/03/04/Carte-des-cam%C3%A9ras-de-vid%C3%A9osurveillance#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/278
Nouvelles cartes thématiques
urn:md5:ac58af74a3de2add5dc94b5611b8c9fc
2015-08-08T21:54:00+02:00
2015-08-08T21:54:00+02:00
Philippe Poisse
Un p'tit gars perdu à Perpignan
Cartographie en ligneOpenStreetMap
<p>Bien qu'il n'y ait pas de saison pour ça l'été est toujours un bon moment pour diffuser de nouvelles cartes thématiques.<br />
Voici donc la liste et le but de ces cartes millésime 2015.</p> <h2>Les équipements de voiries</h2>
<p><a href="http://www.philippe-poisse.eu/index.php?page=%C3%A9quipement&template=carte" hreflang="fr" title="la carte des équipements de voiries">http://www.philippe-poisse.eu/index.php?page=%C3%A9quipement&template=carte</a></p>
<p>Cette carte permet de visualiser les bancs publics, les parkings vélo, les parkings réservés aux personnes handicapés et les parkings moto.<br />
Si elle est utile pour se déplacer et se garer en ville elle l'est aussi pour mieux connaître la politique d'aménagement de votre ville.</p>
<h2>Les bancs publics</h2>
<p><a href="http://www.philippe-poisse.eu/index.php?page=bancs_publics&template=carte" hreflang="fr" title="La carte des bancs publics">http://www.philippe-poisse.eu/index.php?page=bancs_publics&template=carte</a></p>
<p>Vous avez envie de vous bécoter mais vous ne savez pas où, cette carte est faite pour vous.<br />
Plus sérieusement, l'idée m'est venue après plusieurs polémique concernant le retrait de bancs ou la modification d'équipements pour empêcher les sdf, entre autres, de pouvoir «↫stagner↫» dans les parcs, les places et les grands axes.</p>
<h2>Les points de collectes des déchets</h2>
<p><a href="http://www.philippe-poisse.eu/index.php?page=recycling&template=carte" hreflang="fr" title="La carte des points de collecte des déchets">http://www.philippe-poisse.eu/index.php?page=recycling&template=carte</a></p>
<p>L'association AddicTerra travaille depuis pas mal de temps avec les acteurs des Pyrénées-Orientales pour que ceux-ci diffuse en Open Data les coordonnées des points de collectes. Devant un refus flagrant d'entrer dans la modernité de ces braves gens, autant que ce soit les citoyens qui s'en occupent.<br />
Maintenant vous n'avez plus d'excuse pour les décharges sauvages.</p>
<h2>Les mise à jour</h2>
<p><a href="http://www.philippe-poisse.eu/index.php?page=parkings&template=carte" hreflang="fr" title="La carte des parkings réservés">http://www.philippe-poisse.eu/index.php?page=parkings&template=carte</a></p>
<p>La carte des parkings réservés a une nouvelle icône. C'est un peu du fait maison et l'icône s'inspire d'un logo alternatif pour l'accessibilité.<br />
Vous pouvez trouver ce logo sur Wikipedia à cette adresse↫: https://en.wikipedia.org/wiki/International_Symbol_of_Access<br />
Et un peu d'informations à cette adresse↫: http://www.bostonglobe.com/metro/2013/12/13/disability-icon-revamped-guerilla-art-project/HZDJAIORZvL68dukN9L0TL/story.html</p>
http://blog.philippe-poisse.eu/index.php?post/2015/08/08/Nouvelles-cartes-th%C3%A9matiques#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/178
Limite des communes avec Leaflet et overpass-turbo: version statique
urn:md5:0b961754ca2bf323a401e6b71fd269fe
2015-07-24T00:35:00+02:00
2015-07-24T12:59:29+02:00
Philippe Poisse
Leaflet
geoJSONJavaScriptLeafletLimites administrativesLimites des communesOpenStreetMapOverpass-turbo
<p>L’affichage des limites des collectivités territoriales peut être très utile dans le cadre d’un travail cartographique web.<br />
Donc voici le premier tutoriel d’une série dédiée à Leaflet pour l’affichage des limites administratives.</p> <div id="map"> </div>
<h2>Logique de la démarche</h2>
<p>Dans ce tutoriel je pars du principe que le développeur ou le gestionnaire du site dispose des limites de la carte et que ce sera toujours la ou les mêmes collectivités territoriales qui seront affichées.<br />
Dans un premier on va donc récupérer le tracé au format geoJSON avec overpass-turbo puis on va l’afficher avec Leaflet dans une carte.<br />
Les données au format geoJSON seront stockées en dur sur le serveur Web.</p>
<h2>Récupérer le tracé des limites</h2>
<p>Aujourd’hui nous allons travailler sur la commune de <a href="https://fr.wikipedia.org/wiki/Mont-Louis_%28Pyr%C3%A9n%C3%A9es-Orientales%29" hreflang="fr" title="La page Wikipedia sur Mont-Louis">Mont-Louis</a>, sympathique petit village de montagne. Comme cette commune fait 0,39 km² le fichier geoJSON ne sera pas trop compliqué à gérer.</p>
<p>Pour récupérer les données il suffit de passer une requête avec overpass-turbo.<br />
Le site officiel : <a href="http://overpass-turbo.eu/" hreflang="fr" title="Le site d'overpass-turbo">http://overpass-turbo.eu/</a></p>
<p><a class="media-link" href="http://blog.philippe-poisse.eu/public/tutoriels/osm/mont-louis.jpeg"><img alt="mont-louis.jpeg" class="media" src="http://blog.philippe-poisse.eu/public/tutoriels/osm/.mont-louis_s.jpg" style="margin: 0 auto; display: block;" title="mont-louis.jpeg, juil. 2015" /></a></p>
<pre>
Code de la requête :
relation
["name"="Mont-Louis"]
["boundary"="administrative"]
["admin_level"="8"];
>;
out;
</pre>
<p>La valeur de « name » est celle de votre commune/département/région/État. Pour « boundary » c’est « administrative ». Pour « admin_level » il faut mettre le numéro qui correspond à votre collectivité territoriale.</p>
<p>Pour la France ça donne :</p>
<ul>
<li>1 => État</li>
<li>4 => région</li>
<li>6 => département</li>
<li>7 => arrondissement (sous-préfecture)</li>
<li>8 => commune</li>
<li>9 => arrondissements municipaux (Paris, Lyon et Marseille uniquement)</li>
<li>10 => quartier</li>
</ul>
<p>Vous trouverez plus d’informations sur le wiki officiel : http://wiki.openstreetmap.org/wiki/Tag:boundary=administrative?uselang=fr</p>
<p>Si vous avez un doute sur l’orthographe exacte du nom de la commune ou son « admin_level » vous pouvez effectuer une requête dans le moteur de recherche d’openstreetmap. La réponse vous donnera toutes les informations nécessaires pour overpass-api et l’identifiant de la relation, qui sera utile pour le prochain tutoriel.</p>
<p><img alt="mont-louis-osm.jpeg" class="media" src="http://blog.philippe-poisse.eu/public/tutoriels/osm/.mont-louis-osm_s.jpg" style="margin: 0 auto; display: block;" title="mont-louis-osm.jpeg, juil. 2015" /></p>
<p>Une fois le tracé récupéré il suffit d’exporter les données au format geoJSON et d’enregistrer tout ça sur votre serveur (de développement).</p>
<p>Comme je suis une grosse feignasse, après l’enregistrement on va un peu modifier le fichier. Au début du tableau geoJSON on rajoute le code suivant :</p>
<pre>
<code>var nom_de_la_commune =</code>
</pre>
<p> </p>
<p>et à la fin du tableau on met un point virgule. Ainsi on a transformé le tableau en variable JavaScript directement utilisable. Je sais c’est limite du travail bâclé, mais vu ce que je suis payé…</p>
<p> </p>
<h2>Affichage</h2>
<p>Une fois le tracé récupéré il suffit d’afficher une carte toute simple. Le tracé sera traité comme un banal layer geoJSON. Le code JavaScript est donc très simple.</p>
<p>Le code complet</p>
<pre>
/*
* Création de la carte
*/
//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/phil6611.ikebkh58/{z}/{x}/{y}.png', {
attribution: 'Carte Verte des Pyrénées-Orientales © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
});
//Création de la carte.
var map = L.map('map', {
center: new L.LatLng(42.5096936, 2.1208774),
zoom: 15,
maxZoom: 18,
layers: [mapbox]
});
//Récupếration des données GEOJSON.
var mont_louis_layer = L.geoJson(mont_louis);
mont_louis_layer.addTo(map);
/*
* Création des contrôles.
*/
//Contrôles pour les fonds de cartes.
var baseMap = {
"Rendu Mapbox" : mapbox
};
//Contrôles pour les layers contenant les données.
var overlaysMaps = {
"Mont Louis" : mont_louis_layer
};
L.control.layers(baseMap, overlaysMaps,{ collapsed: false }).addTo(map);
L.control.scale({imperial: false}).addTo(map);
</pre>
<p>Le code est assez classique. À la ligne 22 on instancie la variable qui va contenir le layer :</p>
<pre>
var mont_louis_layer = L.geoJson(mont_louis);
</pre>
<p>Puis on l’ajoute à la carte :</p>
<pre>
mont_louis_layer.addTo(map);
</pre>
<p>À la ligne 37 on ajoute le tracé de la commune dans le menu de contrôle. Ainsi l’internaute pourra choisir d’afficher ou non les limites administratives.</p>
<h2>Code HTML</h2>
<p>Pareil pour la page Web le code est très simple. Avant la fermeture de la balise « body » il faudra rajouter les deux lignes suivantes :</p>
<pre>
<code><script src="http://blog.philippe-poisse.eu/index.php?post/2015/07/24/./geojson/communes/mont-louis.js" type="text/javascript"></script></code>
<code><script src="http://blog.philippe-poisse.eu/index.php?post/2015/07/24/./js/communes/communes.js" type="text/javascript"></script></code>
</pre>
<p>Vous n’oublierez pas d’adapter le nom des variables et les url des fichiers en fonction de votre configuration.</p>
<p class="conclusion" id="conclusion">Ce premier tutoriel présente une méthode « brut de décoffrage » mais efficace. Le prochain volet sera consacré à l’utilisation de jQuery pour la récupération des données. Cela donnera un code plus propre et plus « professionnel ».</p>
<script src="http://www.philippe-poisse.eu/leaflet/leaflet.js"></script><script src="http://www.philippe-poisse.eu/geojson/communes/mont-louis.js" type="text/javascript"></script><script src="http://www.philippe-poisse.eu/js/communes/communes.js" type="text/javascript"></script>
http://blog.philippe-poisse.eu/index.php?post/2015/07/24/Limite-des-communes-avec-Leaflet-et-overpass-turbo%3A-version-statique#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/150
Nouvelle section dédiée à la cartographie
urn:md5:7d1b9f6e3ebe93b5cab06cecd07b9ef8
2014-08-15T16:42:00+02:00
2014-08-15T16:42:00+02:00
Philippe Poisse
Web
Cartographie en ligneLeafletOpenStreetMap
<p>Même si en été j’ai tendance à lever le pied (mais pas le coude) je mets quand même mon site à jour de temps en temps. Ce coup-ci il s’agit d’une section dédiée à la cartographie.</p> <h2>Cartes thématiques</h2>
<p>Cette section doit contenir à terme des cartes thématiques réalisées principalement avec OpenStreetMap.<br />
Pour l’instant la seule carte en ligne concerne les panneaux de libre expression sur la commune de Perpignan. Elle est réalisée à l’aide de Leaflet avec un rendu MapBox.</p>
<p>La section cartographie est accessible depuis la page projet. L’url pour y aller directement est <a href="http://www.philippe-poisse.eu/index.php?page=cartes" hreflang="fr" title="La page cartographie sur le site de Philippe Poisse">http://www.philippe-poisse.eu/index.php?page=cartes</a></p>
<p>D’autres cartes arriveront dès la fin de l’année 2014, du moins j’espère.</p>
http://blog.philippe-poisse.eu/index.php?post/2014/08/15/Nouvelle-section-d%C3%A9di%C3%A9e-%C3%A0-la-cartographie#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/94
Leaflet: marqueurs, cercles et polygones
urn:md5:8d88abf040b0670464cc076d12cf2e21
2014-07-10T19:20:00+02:00
2014-07-18T22:51:40+02:00
Philippe Poisse
Leaflet
cercleLeafletmarkermarqueurOpenStreetMappolygonepopup
<p>Après un tuto sur la création d’une carte avec Leaflet en voici un autre sur l’insertion de marqueurs, de cercles et de polygones.</p> <div id="map_tuto"></div>
<h2>Les marqueurs</h2>
<p>Les marqueurs sont les éléments les plus simples à afficher sur une carte. Il suffit juste d’avoir les coordonnées du point.</p>
<pre>
<code>
var marker = L.marker([42.63685, 2.59415]).addTo(map);
</code>
</pre>
<p>Vous remarquez que les coordonnées sont entre crochets [ ].<br />
En gros on instancie la variable marker, on lui passe les coordonnées et on l’ajoute à la carte avec la fonction addTo().<br />
Pour insérer plusieurs marqueurs il suffit de multiplier les variables : marker1, marker2, etc.</p>
<h2>Les cercles</h2>
<p>
Les cercles peuvent être utiles pour créer des cartes servant à comparer des données. Un exemple est disponible à cette adresse : <a href="http://www.portailsig.org/content/leaflet-la-simple-2-cercles-proportionnels" hreflang="fr" title="Un tutoriel sur les cercles avec Leaflet.">http://www.portailsig.org/content/leaflet-la-simple-2-cercles-proportionnels.</a></p>
<p>Le code est très proche de celui utiliser pour les marqueurs.</p>
<pre>
<code>
var circle = L.circle([42.7, 2.7], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
</code>
</pre>
<p>Entre crochets il faudra écrire les coordonnées du centre du cercle ; le chiffre après les coordonnées indique le rayon (radius en anglais) du cercle, il est exprimé en mètre (le développeur de Leaflet est européen) ; entre accolades les données sur le style de cercle seront passées, il s’agit de la couleur du disque (color), de la couleur du cercle extérieurs (fillColor) et de l’opacité du disque (fillOpacity). Les couleurs peuvent être indiquées en hexadécimal ou en utilisant des couleurs nommées. En gros c’est du CSS, pas de quoi fouetter un chat.
</p>
<p>Comme pour les marqueurs, vous pouvez afficher autant de cercles que vous le voulez.</p>
<h2>Les polygones</h2>
<p>
Les polygones sont simplement des points reliés par des segments. Il suffit donc de passer en arguments de la variable polygon les coordonnées des points.</p>
<pre>
<code>
var polygon = L.polygon([
[42.75, 2.75],
[42.76, 2.75],
[43, 2.75]
]).addTo(map);
</code>
</pre>
<p>
En pratique pour dessiner un segment il suffira de n’indiquer que 2 points.</p>
<h2>Ajouter un popup</h2>
<p>Lorsque l’utilisateur clique sur un point, un cercle ou polygone il peut être intéressant d’afficher des informations via une infobulle (popup).</p>
<pre>
<code>
marker.bindPopup("<strong>Hello world!</strong><br />Je suis un popup.") ;
circle.bindPopup("<strong>Je suis un cercle</strong>");
polygon.bindPopup("<strong>Je suis un polygone</strong>");
</code>
</pre>
<p>La fonction bindPopup permet d’attacher une infobulle à un marqueur, un cercle ou un polygone. Le texte à afficher dans l’infobulle est passé en paramètre. Ce texte peut être du HTML, ce qui permet une mise en forme ou l’affichage d’images, de vidéos, etc.<br />
Pour afficher un popup dès le chargement de la carte il faudra rajouter la fonction openPopup().</p>
<pre>
<code>
marker.bindPopup("<strong>Hello world!</strong><br />Je suis un popup.").openPopup();
</code>
</pre>
<h2>Le code complet de l'exemple</h2>
<pre>
<code>
//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/phil6611.ikebkh58/{z}/{x}/{y}.png', {
attribution: 'Carte des Pyrénées-Orientales © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
});
//Création de la carte. La div a pour identifiant "map_tuto"
var map = L.map('map_tuto', {
center: new L.LatLng(42.63685, 2.59415),
zoom: 10,
maxZoom: 15,
layers: [mapbox]
});
//Création d'un marqueur
var marker = L.marker([42.63685, 2.59415]).addTo(map);
//Création d'un cercle
var circle = L.circle([42.65, 2.65], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
//Création d'un polygone
var polygon = L.polygon([
[42.6, 2.7],
[42.67, 2.7],
[42.7, 2.75]
]).addTo(map);
//Création des popup
marker.bindPopup("<strong>Hello world!</strong><br />Je suis un popup.").openPopup();
circle.bindPopup("<strong>Je suis un cercle</strong>");
polygon.bindPopup("<strong>Je suis un polygone</strong>");
</code>
</pre>
<p id="conclusion">Après la lecture de ces deux premiers tutoriels vous devez être capable de réaliser une carte simple avec des points et des formes géométriques.</p>
<script src="http://www.philippe-poisse.eu/cartes/leaflet/leaflet.js"></script>
<script src="http://www.philippe-poisse.eu/cartes/js/carte_tuto2.js"></script>
http://blog.philippe-poisse.eu/index.php?post/2014/07/10/Leaflet%3A-marqueurs%2C-cercles-et-polygones#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/92
Leaflet: créer une carte simple
urn:md5:4f8e1323c30086de49622bb4ba5ea76d
2014-07-08T20:40:00+02:00
2014-07-10T18:23:23+02:00
Philippe Poisse
Leaflet
Cartographie en ligneJavaScriptLeafletOpenStreetMap
<p>Leaflet et OpenStreetMap sont de solides alternatives libres à Google Maps. Il est donc intéressant de les utiliser pour intégrer des cartes dans un site Web.<br />
Voici un tutoriel sur la création d’une carte basique.</p> <div id="map_tuto"></div>
<h2>Pré-requis</h2>
<p>
Leaflet est un framework JavaScript, pour travailler avec il faut donc avoir de bonnes bases en développement avec ce langage.
Des connaissances basiques en cartographie suffisent pour utiliser OpenStreetMap dans ce contexte.<br />
Si vous avez l’habitude des <a href="http://fr.wikipedia.org/wiki/Application_composite" hreflang="fr" title="Page Wikipedia sur les mashup">mashup</a> avec Google Maps vous n’aurez pas trop de soucis à passer à Leaflet.</p>
<h2>Insertion de Leaflet</h2>
<p>Comme tous frameworks JavaScript il faudra inclure Leaflet dans votre page Web. Deux solutions s’offrent à vous. Soit vous l’installez directement sur votre hébergement Web soit vous le récupérez directement sur le site officiel.<br />
Personnellement je suis plutôt du genre à héberger les frameworks sur mon site, mais vous êtes maître chez vous.<br />
Dans tous les cas le code à insérer dans l’en-tête de la page sera du type :</p>
<pre>
<code>
<script src="http://blog.philippe-poisse.eu/index.php?post/2014/07/08/ADRESSE DU FRAMEWORK"></script>
</code>
</pre>
<p>
Leaflet utilise aussi du code CSS spécifique du l’affichage de la carte et les icônes par défaut. Il faudra aussi l’insérer dans la page.</p>
<pre>
<code>
<link rel="stylesheet" href="http://blog.philippe-poisse.eu/index.php?post/2014/07/08/ADRESSE DU FICHIER CSS" />
</code>
</pre>
<p>
Je vous invite à télécharger Leaflet sur le site officiel. Avoir le framework installé sur votre serveur de développement vous permettra de jeter un œil sur le code, ce qui est toujours didactique.<br />
La page de téléchargement : <a href="http://leafletjs.com/download.html" hreflang="en" title="Page de téléchargement de Leaflet">http://leafletjs.com/download.html</a></p>
<h2>La page HTML et le code CSS</h2>
<p>Dans votre page il faudrait créer une balise DIV qui contiendra la carte.</p>
<code>
<div id="map"></div>
</code>
<p>Dans votre feuille de style CSS il suffira de donner une taille à cette DIV.</p>
<pre>
<code>
#map {
width: 300px;
height: 300px;
}
</code>
</pre>
<h2>Les bases du fonctionnement de la carte</h2>
<p>La carte est instanciée via du JavaScript. Il va falloir lui donner un fond de carte (tileLayer), un centre défini par sa latitude et sa longitude, un niveau de zoom. Il est aussi possible de définir un niveau de zoom maximal, ce qui limite le chargement de tuiles depuis le serveur.<br />
Si vous ne maîtrisez pas trop le concept de zoom voici une page à ce sujet sur le wiki d’OpenStreetMap : <a href="http://wiki.openstreetmap.org/wiki/FR:Zoom_levels" hreflang="fr" title="La page sur les niveaux de zoom sur le wiki d'OpenStreetMap">http://wiki.openstreetmap.org/wiki/FR:Zoom_levels</a></p>
<h2>Le fond de carte</h2>
<p>Pour afficher le fond de carte il faut avoir accès à un serveur de tuiles. Si vous ne pouvez pas vous créer votre propre serveur il faudra utiliser un serveur offrant ce type de service.<br />
J’utilise Mapbox mais comme toujours vous êtes libre d’en utiliser un autre.<br />
Pour vous inscrire et avoir une clé chez Mapbox : <a href="https://www.mapbox.com/" hreflang="en" title="La page d'accueil du site de Mapbox">https://www.mapbox.com/</a></p>
<p>
Pour créer le fond de carte il faut instancier une variable.</p>
<pre>
<code>
//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/ID_CARTE/{z}/{x}/{y}.png', {
attribution: 'Ma Carte à partir de Leaflet © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
});
</code>
</pre>
<p>
Il faudra remplace ID_CARTE par l’identifiant de votre carte.<br />
Les informations qui suivent « attribution » seront affichées en bas à droite de la carte. C’est à cet endroit que vous pouvez passer les informations sur le copyright par exemple.</p>
<h2>Création de la carte en elle-même</h2>
<p>Tout va se passer au niveau de la variable « map ».</p>
<pre>
<code>
var map = L.map(
'map',
{
center: new L.LatLng(42.63685, 2.59415),
zoom: 10,
maxZoom: 15,
layers: [mapbox]
}
);
</code>
</pre>
<p>La deuxième ligne indique l’identifiant de la DIV qui contient la carte.<br />
Entre les accolades on va passer les options de base :<br />
le centre avec ses coordonnées géographiques ;<br />
le niveau de zoom lors du premier affichage de la carte ;<br />
le niveau de zoom maximal autorisé ;<br />
les layers (calques) à afficher au chargement.</p>
<p>
Dans la plupart des tutoriels vous ne trouverez pas l’option « layers ». À la place la carte sera instanciée en premier puis le fond de carte sera ajouté à la carte via la fonction « addTo() ». Jetez un coup d’œil sur le site officiel vous comprendrez de quoi je parle.<br />
Je n’utilise pas cette méthode de manière à pouvoir simplifier la gestion des layers en cas d’applications un peu plus complexe. Vous remarquerez que « layers » est écrit au pluriel et non pas au singulier.<br />
J’en parlerai dans un autre billet.</p>
<h2>
Optimisation</h2>
<p>Pour améliorer « l’expérience utilisateur », comme on dit chez les gens biens, le code JavaScript devrait être contenu dans fichier extérieur. Le lien pour l’insérer doit être à la fin de la page, juste avant la fermeture de BODY.</p>
<h2>Le code de l'exemple</h2>
<p>Voici le code JavaScript écrit dans le fichier carte_tuto.js.</p>
<pre>
<code>
//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/phil6611.ikebkh58/{z}/{x}/{y}.png', {
attribution: 'Carte des Pyrénées-Orientales © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
});
//Création de la carte. La div a pour identifiant "map_tuto"
var map = L.map('map_tuto', {
center: new L.LatLng(42.63685, 2.59415),
zoom: 10,
maxZoom: 15,
layers: [mapbox]
});
</code>
</pre>
<p>Votre carte est crée. Elle ne contient qu’un fond de carte tout simple.<br />
Dans le prochain billet je vous montrerai comme ajouter des marqueurs, des cercles et des polygones.<br />
Si vous êtes pressé n’hésitez pas à lire la documentation officielle :<br />
<a href="http://leafletjs.com/examples/quick-start.html" hreflang="en" title="Le tutoriel sur Leaflet sur le site officiel">http://leafletjs.com/examples/quick-start.html</a><br />
<a href="http://leafletjs.com/reference.html" hreflang="en" title="La page de document sur Leaflet sur le site officiel">http://leafletjs.com/reference.html</a></p>
<script src="http://www.philippe-poisse.eu/cartes/leaflet/leaflet.js"></script>
<script src="http://www.philippe-poisse.eu/cartes/js/carte_tuto.js"></script>
http://blog.philippe-poisse.eu/index.php?post/2014/07/08/Leaflet%3A-cr%C3%A9er-une-carte-simple#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/91
Cartopartie : Rendez-vous le 1er juin à Collioure
urn:md5:dc22d9beefbe71a559c6134dcb4b9af3
2013-05-28T16:32:00+02:00
2013-05-28T16:32:00+02:00
Philippe Poisse
Vie associative
Annexe21CartopartieOpenStreetMapPerpinux
<p>Le samedi 1<sup>er</sup> Juin, rendez-vous à Collioure à partir de 11h pour (re-)découvrir ses points d'intérêt et les mettre en avant sur OpenStreetMap.</p> <p>En collaboration, annexe21, perpinux et les contributeurs d'OpenStreetMap localisés dans les Pyrénées-Orientales, organisent le 1er Juin 2013, une cartopartie dans la ville de Collioure.</p>
<p>Pourquoi Collioure ? Après avoir passé en revue les différentes villes du département, l'équipe s'est rendue compte que Collioure, riche de commerces, d'artisans et d'artistes, ne présentait pourtant sur la carte d'OpenStreetMap que peu de points d'intérêt localisés.
</p>
<p>La cartographie libre c'est donc ça ! Vous souhaitez mettre en avant un certain patrimoine, parce que vous estimez qu'il a un intérêt. Libre à vous de le faire, sans passer par des commissions contraignantes, des modérations lourdes et qui vous laissent peu de marge de manœuvre. OpenStreetMap vous donne les outils pour créer les cartes que vous voulez, avec les informations que vous souhaitez.
</p>
<p>Lire la suite sur le site de l'annexe21 :<br />
<a href="http://annexe21.net/index.php/actualites-34/items/cartopartie-rendez-vous-le-1er-juin-a-collioure.html" hreflang="fr" title="La cartopartie sur le site de l'annexe21.">http://annexe21.net/index.php/actualites-34/items/cartopartie-rendez-vous-le-1er-juin-a-collioure.html</a></p>
http://blog.philippe-poisse.eu/index.php?post/2013/05/28/Cartopartie-%3A-Rendez-vous-le-1er-juin-%C3%A0-Collioure#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/65
Samedi 18 mai : présentation d'OpenStreetMap
urn:md5:a28569150d8a7bb4ee3074f0de221c88
2013-05-06T17:32:00+02:00
2013-05-06T17:32:00+02:00
Philippe Poisse
Vie associative
OpenStreetMapPerpinux
<p>Le samedi à partir de 9h30 18 mai une présentation d’OpenStreetMap aura lieu à Perpinux.</p> <p>Cette présentation, assurée par les contributeurs de Catalogne Nord, a pour but de mieux faire connaître cet outil de cartographie libre et collaboratif. La présentation aborde les parties théoriques concernant le projet, les différentes utilisations des cartes et les outils pour mettre à jour la base de données OpenStreetMap.<br />
La cartopartie du 1er juin sera aussi abordée.</p>
<p>OpenStreetMap est un outil en ligne, libre et collaboratif, fondée en 2004 dans le but de réaliser une cartographie du monde.<br />
De nombreux outils et logiciels permettent de réaliser et d’imprimer des cartes à partir de la base de données OpenStreetMap. Ces cartes peuvent être thématiques (pistes cyclables, accessibilités des lieux publics, etc.) ou généralistes.<br />
OpenStreetMap est devenu célèbre en 2010 lors du tremblement de terre à Haïti, de nombreux contributeurs ayant participé à la réalisation de la carte de Port aux Princes en quelques jours. Cette carte a pu alors être utilisée par les associations humanitaires sur place.</p>
<p>Voir l'affiche (fichier PDF, 600ko) : <a href="http://www.philippe-poisse.eu/pdf/osm/presentation_osm_ane.pdf" title="L'affiche de la présentation d'OpenStreetMap">http://www.philippe-poisse.eu/pdf/osm/presentation_osm_ane.pdf</a></p>
http://blog.philippe-poisse.eu/index.php?post/2013/05/06/Samedi-18-mai-%3A-pr%C3%A9sentation-d-OpenStreetMap#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/57
OpenStreetMap : cartopartie et présentation
urn:md5:c0627bd1a28a0f9b4a1ed5f3da8ae40d
2013-03-15T15:50:00+01:00
2013-03-15T15:59:29+01:00
Philippe Poisse
Vie associative
CartopartieHandicapOpenStreetMapPerpinux
<p>La communauté OpenStreetMap de Catalogne Nord annonce le planning de ses activités pour le printemps.<br />
Les dates pourraient toutefois changer en fonction des disponibilités des salles. N’hésitez pas à vous renseigner avant de venir.</p> <h2>Présentation de OpenStreetMap</h2>
<p>
Pour le 18 avril, l’association Vélo en Têt a confié les responsables <acronym title="OpenStreetMap">d’OSM</acronym> Catalogne Nord à une présentation d’OpenStreetmap et de la Cartographie Libre.
Les places sont limitées.<br />
Vous pouvez vous renseigner auprès de<a href="http://veloentet.free.fr/spip.php" hreflang="fr" title="Le site de Vélo en Têt"> Vélo en Têt.</a></p>
<h2>Cartopartie spéciale handicap</h2>
<p>
Le 25 mai ou le 1<sup>er</sup> juin (la date n’est pas définitivement fixée) un cartopartie aura lieu à Perpignan. Cette année le thème sera les stationnements réservés aux personnes en situation de handicap.<br />
Le but sera de relever les coordonnées GPS des emplacements dans le centre ville et ensuite de les mettre en ligne sur openstreetmap.org.
Plusieurs associations (dont <a href="http://www.annexe21.net/" hreflang="fr" title="le site de l'annexe21">l’Annexe21</a> et<a href="http://www.perpinux.org/" hreflang="fr" title="Le site de perpinux"> Perpinux</a>) devraient participer.<br />
Toutes les bonnes volontés et les GPS sont les bienvenus.</p>
<p>
Vous trouvez plus d’information sur la liste de diffusion :<a href="http://listes.openstreetmap.fr/wws/arc/local-po" hreflang="fr" title="La liste de diffusion d'OSM Catalogne Nord"> http://listes.openstreetmap.fr/wws/arc/local-po</a>
</p>
http://blog.philippe-poisse.eu/index.php?post/2013/03/15/OpenStreetMap-%3A-cartopartie-et-pr%C3%A9sentation#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/51
Limites des communes dans Google Maps
urn:md5:9ac128ae2397ca1bb5551950987a4a08
2012-10-19T23:00:00+01:00
2015-07-23T23:09:19+01:00
Philippe Poisse
Système d'information géographie
Google MapsjsonkmlOpenStreetMapshapefile
<p>Depuis quelques mots Google Maps affiche les limites administratives des communes.<br />
Pour l'instant je n'ai pas trouvé comment les récupérer directement, ce qui serait utile pour les afficher dans un mashup.<br />
Mais bon, avec un esprit tordu, on arrive toujours à ses fins.</p> <p>Petite mise à jour de janvier 2013 : si vous désirez intégrer un contour dans une carte vous pouvez lire ce billet <a href="http://blog.philippe-poisse.eu/index.php?post/2013/01/02/Dessiner-les-limites-des-communes-dans-Google-Maps">" Dessiner les limites des communes dans Google Maps. "</a></p>
<p>Mise à jour de juillet 2015 : pour les utilisateurs d'OpenStreetMap ou pour les développeurs pressés un nouveau tuto est disponible dans ce billet "<a href="http://blog.philippe-poisse.eu/index.php?post/2015/07/24/Limite-des-communes-avec-Leaflet-et-overpass-turbo%3A-version-statique">Limite des communes avec Leaflet et overpass-turbo: version statique"</a></p>
<h2>OpenStreetMap à la rescousse</h2>
<p>Les contributeurs d'OSM ont eu la gentillesse de géocoder pas mal de communes de France, et d'ailleurs. Quand on sait que le cadastre est géocodé en Lambert et que les SIG comme Google Maps et OSM n'acceptent que des coordonnées GPS en base 10 (et non pas en Degré/Minute/Seconde, c'est à dire en sexagésinal) on se rend compte du boulot que c'est.</p>
<p>En trainant un peu sur les sites liés à OSM il est possible de récupérer ces données.<br />
Par exemple ici : <a href="http://export.openstreetmap.fr/contours-administratifs/" hreflang="fr" title="la page de téléchargement des contours administratifs sur OSM">http://export.openstreetmap.fr/contours-administratifs/</a><br />
Seul hic, en général il s'agit de fichier du genre *.shp.</p>
<h2>Shapefile</h2>
<p>Si le shapefile est un format bien documenté, il n'est pas directement utilisable dans Google Maps.<br />
Il faudra donc convertir vers un autre format, de préférence du JSON.</p>
<h2>Un SIG, un vrai !</h2>
<p>Pour ce travail j'utilise gvSIG.<br />
Vous pouvez le télécharger à cette adresse : <a href="http://www.gvsig.org/web/" hreflang="es" title="Page d'accueil du site du projet gvSIG">http://www.gvsig.org/web/</a><br />
Vous trouverez ici un tutoriel sur ce logiciel : <a href="http://www.geonet.fr/upload/gedit/18/dec_concepts_interface1.1.pdf" hreflang="fr" title="Un tutoriel sur gvSIG">http://www.geonet.fr/upload/gedit/18/dec_concepts_interface1.1.pdf</a></p>
<p>Une fois la carte ouverte dans gvSIG il faut transformer les limites de la carte en layer (un claque en bon français). Puis il suffit d'exporter ce layer en KML.<br />
L'opération est assez simple et ne demande pas de réelles compétences dans la gestion d'un SIG.</p>
<h2>KML vers JSON</h2>
<p>Pourquoi exporter en KML ?</p>
<p>Parce que c'est utilisable dans Google Earth (entre autre), ce qui permet de tester le chemin, et que c'est du XML. Et qui dit XML dit « facile à manipuler ».<br />
Passer du KML ou JSON est une opération toute bête. Dans un éditeur de texte, notepad++ par exemple, il suffit d'effacer les balises XML et de modifier avec l'outil « rechercher-remplacer » la structure des données (points virgules, ajout de parenthèse, etc.).<br />
Il faut toutefois faire attention au premier point de la liste. En effet la latitude de ce point est au début de la liste et la longitude à la fin. Il faudra donc faire une petite opération manuelle pour corriger ça. Vous n'avez plus qu'à vérifier votre fichier est l'affaire est jouée.</p>
<h2>JSON ou SQL ?</h2>
<p>Une fois la liste nettoyée des balises XML vous avez deux manières de l'utiliser. Soit vous faites des fichiers JSON, soit vous importez les données point par point dans vote base de données.<br />
À l'arriver ça ne fera pas une grosse différence vu que l'api Google Maps utilise JavaScript. La question est juste de savoir si vous êtes meilleurs côté client ou côté serveur.</p>
<h2>Conclusion</h2>
<p>J'en connais qui vont me dire qu'utiliser des données OSM avec Google Maps est limite stupide. C'est vrai qu'on peut directement utiliser OpenLayer. Mais tant qu'Arles sur Tech ne sera pas correctement géocoder, je crois pas que je ferais le portage. Et puis je suis plutôt fainéant, faut dire.</p>
http://blog.philippe-poisse.eu/index.php?post/2012/10/19/Limites-des-communes-dans-Google-Maps#comment-form
http://blog.philippe-poisse.eu/index.php?feed/atom/comments/31