2e:null 2f:["$","title",null,{"children":"Mapbox Non-Mercator Projections | Malcolm Meyer | Observable"}] 34:[] 32:{"id":"e4a38d63fe60d5ce","slug":"mapbox-non-mercator-projections","title":"Mapbox Non-Mercator Projections","thumbnail":"f040f2d9bf77bd19c91a9e7c0f4ee3fcd2f606f7af63b68d5bd06500297b8312","access_level":"public","create_time":"$D2021-11-17T13:12:17.775Z","update_time":"$D2021-11-18T00:36:02.999Z","view_time":null,"first_public_time":"$D2021-11-17T20:34:34.465Z","has_unpublished_edits":null,"fork":{"id":"8df4248910c363e5","slug":"using-mapbox-gl-js","title":"Using Mapbox GL JS","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":2,"starred":false,"owner":{"type":"team","id":"88c7fe0cd656118d","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":"starter_2024"},"version":516,"publish_version":516,"role":null,"authored":false,"authors":[{"type":"individual","id":"9771754028a69c47","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":null}],"members":[{"type":"individual","id":"9771754028a69c47","login":"reyemtm","name":"Malcolm Meyer","avatar_url":"https://avatars-next.observableusercontent.com/63d208bab84d375e8528e0cd635061f24b1f6efceb935cfdc883c0f494fc8450","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mapbox Non-Mercator Projections","cells":[{"id":0,"value":"md`# Mapbox Non-Mercator Projections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`While it has been possible to use custom projections in web mapping, this often meant reprojecting the source data. Mapbox has now made it much easier to deploy web maps in non-mercator projections. These are available starting with Mabox GL SJ version 2.6 and can be used with existing raster and vector tile sources. For more information see the [Mapbox Documentation](https://docs.mapbox.com/mapbox-gl-js/guides/projections/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof projection = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof map = {\n let container = html`

`;\n\n yield container;\n\n let map = new mapboxgl.Map({\n container,\n center: [-9.3,52.5],\n zoom: 1.5,\n style: \"mapbox://styles/lancasteroh/ckw3hzch80etw14nsapfsdayt\",\n scrollZoom: false,\n touchZoom: false,\n projection: \"naturalEarth\"\n });\n\n // Wait until the map loads.\n map.on(\"load\", () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n console.log(map.getCenter())\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### Variables\n\nResources and variables needed for the map and interaction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"map.flyTo(currentProjection[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"map.setProjection({\n name: projection\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"aliases = [\n {\n center: [-9.3,52.5],\n zoom: 0,\n projection: \"mercator\",\n name: \"Mercator\"\n },\n {\n center: [11.5,49.5],\n zoom: 0,\n projection: \"albers\",\n } ,\n {\n center: [-12.8,0.8],\n zoom: 0,\n projection: \"equirectangular\"\n } ,\n {\n center: [0.5,0],\n zoom: 0,\n projection: \"winkelTripel\"\n } ,\n {\n center: [2.26,1.21],\n zoom: 0,\n projection: \"naturalEarth\"\n } ,\n {\n center: [1,0.3],\n zoom: 0,\n projection: \"equalEarth\"\n } ,\n {\n center: [-0.3,9.8],\n zoom: 0,\n projection: \"lambertConformalConic\"\n }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"aliases.map(p => p[\"speed\"] = 0.8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"aliases.map(p => {\n p[\"zoom\"] = 0.8;\n p[\"bearing\"] = 0;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.6.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoibGFuY2FzdGVyb2giLCJhIjoiY2t3M2plOGtkMG50ejMycGQxNzN4ZjY5eSJ9.6V43GwujmVAsOTX6WJWAqA\";\n const href = await require.resolve(\"mapbox-gl@2.6.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"currentProjection = aliases.filter(a => a.projection === projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"css = await require.resolve(\"https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.9/wing.min.css\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"//document.head.appendChild(html``);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"