27:null 28:["$","title",null,{"children":"Faire du SIG dans la navigateur | Riate | Observable"}] 2d:[{"id":"c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","href":"https://static.observableusercontent.com/files/c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","name":"world.json","type":"application/json","lastModified":1776423839355.326,"size":276863}] 2b:{"id":"ca80cadbda7347fe","slug":null,"title":"Faire du SIG dans la navigateur","thumbnail":"c77540a0b48934198e3c3cbcdccd9f80007990841e281ff06fab3e0c38b334e6","access_level":"public","create_time":"$D2026-04-17T11:03:59.355Z","update_time":"$D2026-04-17T11:03:59.355Z","view_time":null,"first_public_time":"$D2026-05-12T08:20:28.501Z","has_unpublished_edits":null,"fork":{"id":"6c62274c3787cb47","slug":"faire-du-sig-dans-la-navigateur","title":"Faire du SIG dans la navigateur","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"481f46f0ac5d20d8","login":"riate","name":"Riate","avatar_url":"https://avatars-next.observableusercontent.com/49c549201ca74c0c64940ab802ea6944ddd0469dd2143bc60e3d5f495b10e691","tier":"starter_2024"},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"},{"type":"team","id":"481f46f0ac5d20d8","login":"riate","name":"Riate","avatar_url":"https://avatars-next.observableusercontent.com/49c549201ca74c0c64940ab802ea6944ddd0469dd2143bc60e3d5f495b10e691","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"636c1a36b50a6050","slug":"ecole-doctorale","title":"Ecole doctorale","owner":{"id":"481f46f0ac5d20d8","login":"riate","name":"Riate"}},"type":"notebook","body":{"title":"Faire du SIG dans la navigateur","cells":[{"id":0,"value":"# Faire du SIG dans la navigateur","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Il existe plusieurs bibliothèques JavaScript pour réaliser des opérations SIG dans le navigateur.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"bertin.draw({\n params: { projection: \"user\", width: 600 },\n layers: [{ geojson: world, fill: \"#CCC\", stroke: \"#a63878\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

GEOTOOLBOX

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"[**`geotoolbox`**](https://github.com/neocarto/geotoolbox) est un outil javascript pour géographes basé sur [d3geo](https://github.com/d3/d3-geo), [topojson](https://github.com/topojson/topojson) et [geos-wasm](https://github.com/chrispahm/geos-wasm). Il permet de traiter simplement les propriétés geoJSON et fournit plusieurs opérations SIG utiles pour la cartographie thématique. Pour charger la dernière version de la bibliothèque, il suffit de copier la ligne suivante :\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"L'avantage de cette bibliothèque c'est qu'elle prend directement en compte des **FeatureCollection**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"geo = require(\"geotoolbox@3\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"geo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"- **Simplify**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"viewof k = Inputs.range([0.01, 0.5], { label: \"k\", step: 0.01, value: 0.05 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"world_light = geo.simplify(world, { k })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: world_light,\n stroke: \"#a63878\",\n fill: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"- **Union**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"union = geo.union(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: union,\n stroke: \"#a63878\",\n fill: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"- **Union by id**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"union2 = geo.union(world, { id: \"region\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"union2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: union2,\n stroke: \"white\",\n fill: { type: \"typo\", values: \"id\" }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"- ** Buffer**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"africa = geo.filter(world, { func: \"region = Africa\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"buff = geo.rewind(await geo.buffer(africa, { dist: dist, each: true }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"viewof dist = Inputs.range([1, 4000], { label: \"Distance\", step: 100 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: buff,\n stroke: \"#a63878\",\n fill: \"none\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"- ** Clip**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"clipworld = geo.clip(world, { clip: buff })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: clipworld,\n fill: \"#a63878\",\n stroke: \"white\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"- ** Documentation**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"thumbs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"

TURF

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"**`Turf`** est la bibliothèque JavaScript de référence pour faire des opération SIG. Elle comprend des opérations spatiales traditionnelles, des fonctions d'aide pour la création de données GeoJSON, ainsi que des outils de classification des données et de statistiques. Contrairement à geotoolbox, ici les fonctions sont développées en JavaScript/TypeScript. Voir https://github.com/Turfjs/turf & https://turfjs.org/.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"turf = require(\"@turf/turf@7\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"turfbuff = turf.buffer(africa, dist2, {\n units: \"kilometers\",\n endCapStyle: \"round\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof dist2 = Inputs.range([1, 4000], { label: \"Distance\", step: 100 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: turfbuff,\n stroke: \"#a63878\",\n fill: \"none\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"- **Voyager en \"ligne droite\"**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"Paris = turf.point([2.335042434318193, 48.85859730057634])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Shangai = turf.point([121.5685920321606, 31.557068992422167])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"distance = Math.round(turf.distance(Paris, Shangai, { units: \"kilometers\" })) +\n \" km\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"greatCircle = turf.greatCircle(Paris, Shangai, {\n properties: { name: \"Paris to Shangai\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"bertin.draw({\n params: { projection: \"user\", width: 800, extent: greatCircle, margin: 100 },\n layers: [\n {\n geojson: greatCircle,\n stroke: \"#a63878\",\n strokeWidth: 2,\n strokeDasharray: 5,\n fill: \"none\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"Et beaucoup d'autres choses : https://turfjs.org/docs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"

JTS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"**``jsts``** est une bibliothèque javaScript contenant des fonctions spatiales pour le traitement de la géométrie, conforme à la Simple Features Specification for SQL publiée par l'Open Geospatial Consortium. `jsts` a été réalisée en utilisant la traduction automatique de la source **Java JTS**. Voir https://github.com/bjornharrtell/jsts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"jsts = require(\"https://unpkg.com/jsts@2.10.0/dist/jsts.min.js\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"On extrait un pays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"usa = ({\n type: \"FeatureCollection\",\n features: world.features.filter((d) => d.properties.ISO3 == \"USA\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"Imports et exports dans jsts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"reader = new jsts.io.GeoJSONReader()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"writer = new jsts.io.GeoJSONWriter()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"usajsts = reader.read(usa)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"Calculons un buffer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"a = usajsts.features[0].geometry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"abuff = a.buffer(dist3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"buffer = writer.write(abuff)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof dist3 = Inputs.range([-5, 8], {\n label: \"Distance (unités de la couche)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"bertin.draw({\n params: { margin: 100 },\n layers: [\n {\n geojson: buffer,\n stroke: \"#a63878\",\n strokeWidth: 2,\n strokeDasharray: 5,\n fill: \"none\"\n },\n { geojson: usa, stroke: \"none\", fill: \"#CCC\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {thumbs} from \"@neocartocnrs/hello-geotoolbox\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"