30:[{"id":"5fc8b44c94bc48489c6752645fe54f2b767127a76ca5480732eb2b2ec9c8b894f2a154de99726763bdb89c6bddaf869101b1ba7af8218e838d053a7ffe8c6adc","href":"https://static.observableusercontent.com/files/5fc8b44c94bc48489c6752645fe54f2b767127a76ca5480732eb2b2ec9c8b894f2a154de99726763bdb89c6bddaf869101b1ba7af8218e838d053a7ffe8c6adc","name":"proj.jpg","type":"image/jpeg","lastModified":1687181812408.645,"size":270336}] 2e:{"title":"proj4js library","cells":[{"id":0,"value":"# `proj4js` library","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"proj = FileAttachment(\"proj.jpg\").image({ width: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"**`proj4js`** is a JavaScript library to transform coordinates from one coordinate system to another, including datum transformations.","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"- **`npm`** - https://www.npmjs.com/package/proj4\n- **`github`** - https://github.com/proj4js/proj4js\n- **`doc`** - http://proj4js.org/","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"To load the library","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"proj4 = require(\"proj4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"## How it works?","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"The library lets you transform coordinates from one projection to another. Projections can be in proj or wkt format.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"firstProjection = 'PROJCS[\"NAD83 / Massachusetts Mainland\",GEOGCS[\"NAD83\",DATUM[\"North_American_Datum_1983\",SPHEROID[\"GRS 1980\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"7019\"]],AUTHORITY[\"EPSG\",\"6269\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.01745329251994328,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"4269\"]],UNIT[\"metre\",1,AUTHORITY[\"EPSG\",\"9001\"]],PROJECTION[\"Lambert_Conformal_Conic_2SP\"],PARAMETER[\"standard_parallel_1\",42.68333333333333],PARAMETER[\"standard_parallel_2\",41.71666666666667],PARAMETER[\"latitude_of_origin\",41],PARAMETER[\"central_meridian\",-71.5],PARAMETER[\"false_easting\",200000],PARAMETER[\"false_northing\",750000],AUTHORITY[\"EPSG\",\"26986\"],AXIS[\"X\",EAST],AXIS[\"Y\",NORTH]]'","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"secondProjection = \"+proj=gnom +lat_0=90 +lon_0=0 +x_0=6300000 +y_0=6300000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"proj4(firstProjection, secondProjection, [-122.305887, 58.9465872, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"If the first projection is not specified, then the default starting projection is wgs84.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"proj4(secondProjection, [-71, 41])","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"Si aucune coordonnée n'est donnée, un objet avec deux méthodes est renvoyé.\n- **`forward()`** transforms the coordinates of the first projection into the second\n- **`inverse()`** transforms the coordinates of the second projection into the first","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"transform = proj4(firstProjection, secondProjection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"transform.forward([-71, 41])","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"transform.inverse([-2690599.9886444192, 3662814.7663661353])","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"## Named Projections","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"Thanks to **`proj4.defs`**, it is possible to define projections in the form of character strings (EPSG or other).","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"proj4.defs([\n [\n \"EPSG:4326\",\n \"+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees\"\n ],\n [\n \"EPSG:4269\",\n \"+title=NAD83 (long/lat) +proj=longlat +a=6378137.0 +b=6356752.31414036 +ellps=GRS80 +datum=NAD83 +units=degrees\"\n ]\n])","pinned":true,"hidden":true,"mode":"ojs"},{"id":122,"value":"proj4(\"EPSG:4326\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"proj4(\"EPSG:4326\").oProj","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"## Project and display a geoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"Now, let's transform a geoJSON.","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"Here we load a basemap of the countries of the world in wgs84.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"world = d3\n .json(\n \"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas@0.1.0/world/110m.json\"\n )\n .then((d) => topojson.feature(d, d.objects.countries))","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"And let's define a projection","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"prj = `+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"Now you can use this projection directly in [`bertin`](https://github.com/neocarto/bertin).","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":406,"value":"bertin.draw({\n params: { projection: prj },\n layers: [\n { geojson: world, fill: \"#909ede\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"## Retrieve a projected geoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"For that, we need two things. The function **`geoProject`** of the **`d3-geo-projection`** library. And a function **`proj4d3`** designed by [@fil](https://observablehq.com/@fil).","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"d3 = require(\"d3\", \"d3-geo-projection\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":496,"value":"import { proj4d3 } from \"@fil/proj4js-d3\"","pinned":false,"hidden":true,"mode":"ojs"},{"id":238,"value":"Now, let's define a projection (my geoJSON is wgs84)","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"And let's go!","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"worldMollweide = d3.geoProject(world, proj4d3(prj).reflectY(true))","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"button(worldMollweide, \"worldMollowoide.geojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"You can also use it with [`bertin`](https://github.com/neocarto/bertin) by specifying the projection as \"user\".","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"bertin.draw({\n params: { projection: \"user\" },\n layers: [{ geojson: worldMollweide, fill: \"#909ede\" }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"

\n TODO

\nAdapt proj4d3 to allow transformations between 2 projections (not just from wgs84)

(feel free to contribute)

","pinned":false,"hidden":false,"mode":"html"},{"id":486,"value":"#### Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"button = (data, filename = \"data.csv\") => {\n if (!data) throw new Error(\"Array of data required as first argument\");\n\n let downloadData;\n if (filename.includes(\".csv\")) {\n downloadData = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n } else {\n downloadData = new Blob([JSON.stringify(data, null, 2)], {\n type: \"application/json\"\n });\n }\n\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n `Download ${filename} (~${size} KB)`\n );\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}