33:T63e,viewof map = { const container = html`

`; yield container; // Give the container dimensions. const map = container.value = new mapboxgl.Map({ container, center: centerLL, zoom: zoomLevel, style: "mapbox://styles/mapbox/streets-v10", scrollZoom: false }); map.on('load', () => { map.addLayer({ id: 'green', type: 'fill', layout: {}, paint: { 'fill-color': '#0c4', 'fill-opacity': 0.32 }, source: { type: 'geojson', data: squareGeoJSON } }); map.addLayer({ id: 'red', type: 'fill', layout: {}, paint: { 'fill-color': '#900', 'fill-opacity': 0.22 }, source: { type: 'geojson', data: square45GeoJSON } }); map.addLayer({ id: 'corners', type: 'circle', paint: { 'circle-color': 'darkred', }, source: { type: 'geojson', data: corners45GeoJSON } }); map.addLayer({ id: 'points', type: 'circle', paint: { 'circle-color': 'red', 'circle-radius': 3 }, source: { type: 'geojson', data: points45GeoJSON } }); map.addLayer({ id: 'points0', type: 'circle', paint: { 'circle-color': 'green', 'circle-radius': 3 }, source: { type: 'geojson', data: pointsGeoJSON } }) }); invalidation.then(() => map.remove()); }34:[] 32:{"title":"Squares on Maps","cells":[{"id":0,"value":"md`# Squares on Maps\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"html`desired area:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof area = number({ value: 20000000, step: 2000 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"md`zoom level:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"viewof zoomLevel = number({value: 12, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"mutable centerLL = [13.416463, 50.543784]","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"html`interpolation steps:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof steps = number({ value: 10, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"html`\n\n\n \n \n \n \n \n\n\n \n \n \n\n\n\n \n\n\n \n \n \n \n\n \n\n

	green area	green error	red area	red error
TurfJS	`${turf.area(squareGeoJSON)}`	`${diff(turf.area(squareGeoJSON)).toFixed(5)}%`	`${turf.area(square45GeoJSON)}`	`${diff(turf.area(square45GeoJSON)).toFixed(5)}%`
Proj4	`${proj4Area(squareGeoJSON)}`	${diff(proj4Area(squareGeoJSON)).toFixed(5)}%	`${proj4Area(square45GeoJSON)}`	${diff(proj4Area(square45GeoJSON)).toFixed(5)}%

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"side = Math.sqrt(area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"outerRad = Math.sqrt(side*side + side*side) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"md`## Attempt 1\n\nDirectly compute corner points`","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`## Attempt 2: 45 degree rotated square\n\nCompute square corners using Azimuthal equidistant projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"cornersLL = {\n const center = aeqd.forward(centerLL);\n const sideH = side/2;\n const corners = [\n [center[0]-sideH, center[1]-sideH],\n [center[0]-sideH, center[1]+sideH],\n [center[0]+sideH, center[1]+sideH],\n [center[0]+sideH, center[1]-sideH],\n [center[0]-sideH, center[1]-sideH],\n ];\n return corners.map(p => aeqd.inverse(p));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"pointsLL = {\n const corners = cornersLL.map(p => gnom.forward(p));\n const points = [];\n for (let s=0; s<4; s++) {\n for (let i=0; i gnom.inverse(p));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"pointsGeoJSON = {\n return {\n \"type\": \"GeometryCollection\", \n \"geometries\": pointsLL.map(p => ({\n type: \"Point\",\n coordinates: p\n }))\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"squareGeoJSON = {\n return {\n \"type\": \"Polygon\",\n \"coordinates\": [pointsLL]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"corners45LL = {\n const center = aeqd.forward(centerLL);\n const corners = [\n [center[0]-outerRad, center[1]],\n [center[0], center[1]+outerRad],\n [center[0]+outerRad, center[1]],\n [center[0], center[1]-outerRad],\n [center[0]-outerRad, center[1]],\n ];\n return corners.map(p => aeqd.inverse(p));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`Then interpolate between corner points in Gnomonic projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"points45LL = {\n const corners = corners45LL.map(p => gnom.forward(p));\n const points = [];\n for (let s=0; s<4; s++) {\n for (let i=0; i gnom.inverse(p));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"corners45GeoJSON = {\n return {\n \"type\": \"GeometryCollection\", \n \"geometries\": corners45LL.map(p => ({\n type: \"Point\",\n coordinates: p\n }))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"square45GeoJSON = {\n return {\n \"type\": \"Polygon\",\n \"coordinates\": [points45LL]\n \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"points45GeoJSON = {\n return {\n \"type\": \"GeometryCollection\", \n \"geometries\": points45LL.map(p => ({\n type: \"Point\",\n coordinates: p\n }))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"aeqd = proj4(`+proj=aeqd +lat_0=${centerLL[1]} +lon_0=${centerLL[0]} +x_0=4321000 +y_0=3210000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"gnom = proj4(`+proj=gnom +lat_0=${centerLL[1]} +lon_0=${centerLL[0]} +x_0=4321000 +y_0=3210000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"aea = proj4(`+proj=aea +lat_1=${centerLL[1]>0?20:-20} +lat_2=${centerLL[1]>0?60:-60} +lat_0=${centerLL[1]} +lon_0=${centerLL[0]} +x_0=4321000 +y_0=3210000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n // This is @tmcw’s. https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"proj4 = require('https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"proj4Area = feature => {\n if (feature.type != 'Polygon') return -99; // not implemented\n // project feature in aea\n console.log(feature.coordinates[0]);\n const points = feature.coordinates[0].map(p => {\n return aea.forward(p)\n });\n // compute cartesian area\n return areaCartesian(points);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"areaCartesian = vertices => {\n var total = 0;\n\n for (var i = 0, l = vertices.length; i < l; i++) {\n var addX = vertices[i][0];\n var addY = vertices[i === vertices.length - 1 ? 0 : i + 1][1];\n var subX = vertices[i === vertices.length - 1 ? 0 : i + 1][0];\n var subY = vertices[i][1];\n\n total += addX * addY * 0.5;\n total -= subX * subY * 0.5;\n }\n\n return Math.abs(total);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"diff = area2 => Math.abs(100-100*(area2/area))","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"turf = require('https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"import {number} from \"@jashkenas/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"import {select} from \"@jashkenas/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}