3e:null 3f:["$","title",null,{"children":"SVG Clipped Map Tiles | richard-antoine1985 | Observable"}] 45:T4f7,map1 = svg``; 46:[] 43:{"id":"85976376523c233f","slug":null,"title":"SVG Clipped Map Tiles","thumbnail":"926f38e09fa8687e9a1013a7eb2b0c69c19e208380cec1f9459dd4a19b79348b","access_level":"public","create_time":"$D2025-02-24T12:37:18.343Z","update_time":"$D2025-03-10T18:29:33.346Z","view_time":null,"first_public_time":"$D2025-03-13T12:34:00.507Z","has_unpublished_edits":null,"fork":{"id":"1583d93d5aa304b2","slug":"clipped-map-tiles","title":"Clipped map tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e38afd197d85a6f5","login":"antoinerichard","name":"richard-antoine1985","avatar_url":"https://avatars-next.observableusercontent.com/f6f2af4b6988fa48239435533faac013ad79496599bc652762b721c402b5d4a7","tier":"starter_2024","bio":"","following":false},"version":500,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a2577bc691c3d62c","login":"richard-antoine1985","name":"RICHARD Antoine","avatar_url":"https://avatars-next.observableusercontent.com/50bdd172580c3f3ea836d1d1a0c1620a440cd40d5268fff6e1e002001b0963d6","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a2577bc691c3d62c","login":"richard-antoine1985","name":"RICHARD Antoine","avatar_url":"https://avatars-next.observableusercontent.com/50bdd172580c3f3ea836d1d1a0c1620a440cd40d5268fff6e1e002001b0963d6","tier":null,"role":"editor"},{"type":"team","id":"e38afd197d85a6f5","login":"antoinerichard","name":"richard-antoine1985","avatar_url":"https://avatars-next.observableusercontent.com/f6f2af4b6988fa48239435533faac013ad79496599bc652762b721c402b5d4a7","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG Clipped Map Tiles","cells":[{"id":431,"value":"# SVG Clipped Map Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"Thanks to [@mbostock](https://observablehq.com/user/@mbostockn) for [notebook \"Clipped map tiles\"](https://observablehq.com/@d3/clipped-map-tiles) :)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"map2 = svg``;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"map3 = svg``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"map4 = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"projection = d3.geoMercator()\n .scale(1315) \n .center([params.get(\"lon\"), params.get(\"lat\")])\n .translate([305, 346]); //([centre[0], centre[1]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"tiles = Array.from({ length: 9 }, (_, i) => {\n const dx = (i % 2) - 1; // -1, 0, +1 (décalage X)\n const dy = Math.floor(i / 2) - 1; // -1, 0, +1 (décalage Y)\n return ``;\n}).join(\"\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"paris = projection([2.5, 48.8566])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"centre = projection([params.get(\"lon\"), params.get(\"lat\")])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"n = Math.pow(2, params.get(\"zoom\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"yTile = Math.floor(n * (1 - Math.log(Math.tan(params.get(\"lat\") * Math.PI / 180) + 1 / Math.cos(params.get(\"lat\") * Math.PI / 180)) / Math.PI) / 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"xTile = Math.floor(n * ((params.get(\"lon\") + 180) / 360));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"france = await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")\n .then(response => response.json()) \n .then(data => topojson.feature(data, data.objects.countries))\n .then(countries => {\n return {\n type: \"FeatureCollection\",\n features: countries.features.filter(d => d.id === \"250\")\n };\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"params = new Map([[\"width\", 400],\n [\"height\", 400],\n [\"zoom\",5],\n [\"tileSize\",256],\n [\"lat\",46.2276],\n [\"lon\",2.2137]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"