31:T4eb,// https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/ { let src; // https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format if (pictureObj.name.toUpperCase().includes(".HEIC")) { src = await pictureObj .arrayBuffer() .then((arrayBuffer) => new Blob([arrayBuffer], { type: "image/heic" })) .then((blob) => heic2any({ blob })) .then((conversionResult) => { return URL.createObjectURL(conversionResult); }); } else { src = await pictureObj.url(); } return html`

${ mapData ? worldMapCoordinates({ value: [mapData.latitude, mapData.longitude], read: false, showLatLong: false, width: 300 }) : `` }

${ mapData ? `` : md` File ***${imgfile.name}*** does not have any geolocation metadata to map.` }

`; }32:T865,## Usage * This notebook uses the [ExifReader](https://github.com/mattiasw/ExifReader) JavaScript library to extract the [**Ex**changeable **I**mage file **F**ormat (EXIF) geolocation](https://en.wikipedia.org/wiki/Exif#Geolocation) values for latitude and longitude ([geotags](https://en.wikipedia.org/wiki/Geotagging)) embedded in a picture. * The [geotags](https://en.wikipedia.org/wiki/Geotagging) are then visualized with one of the following mapping services: * [Google](https://observablehq.com/@mariodelgadosr/embedding-google-maps-in-an-iframe-without-an-api-key) * [Bing](https://docs.microsoft.com/en-us/bingmaps/articles/create-a-custom-map-url) * [OpenStreeMap](https://www.openstreetmap.org) * ***Note***: The Bing mapping services currently has [limited support](https://social.msdn.microsoft.com/Forums/en-US/11dc0e1d-cf33-4413-84d7-a7b5bfd417ca/bing-map-in-iframe?forum=bingmaps) for an HTML [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) if your current browser session is not logged into a [Microsoft Account](https://support.microsoft.com/en-us/windows/what-is-a-microsoft-account-4a7c48e9-ff5a-e9c6-5a5c-1a57d66c3bfa). The notebook's logic will create a [map link](https://learn.microsoft.com/en-us/bingmaps/articles/create-a-custom-map-url) you can use to display a map directly on Bing's website. * A world map shows the metadata's relative location. * As a demonstration, a geotagged picture of [London's Tower Bridge](https://en.wikipedia.org/wiki/Tower_Bridge) is initially displayed with its metadata. * Alternatively, you can *[Browse](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)* the picture file(s) on your device to upload a [JPEG](https://en.wikipedia.org/wiki/JPEG), [WebP](https://en.wikipedia.org/wiki/WebP) or [HEIC](https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format) file with embedded EXIF metadata to map its location attributes. * The [***Configuring Your Smartphone for Geotagging***](https://observablehq.com/d/1f4ec58cdf51423b) notebook has instructions for enabling a smartphone to include geotag metadata within a picture. 33:T89e,mapData = { if (exifObj.GPSLatitudeRef) { // Extract lat/long from exifObj const latitudeSign = exifObj.GPSLatitudeRef.description == "North latitude" ? `` : `-`; const longitudeSign = exifObj.GPSLongitudeRef.description == "West longitude" ? `-` : ``; const latitude = parseFloat( `${latitudeSign}${exifObj.GPSLatitude.description}` ); const longitude = parseFloat( `${longitudeSign}${exifObj.GPSLongitude.description}` ); const latLong = `${latitude},${longitude}`; // Google const googleURL = `https://maps.google.com/maps`; // https://observablehq.com/@mariodelgadosr/embedding-google-maps-in-an-iframe-without-an-api-key const googleEmbedURL = `${googleURL}?&ie=UTF8&output=embed&q=${latLong}`; // Bing // https://docs.microsoft.com/en-us/bingmaps/articles/create-a-custom-map-url // Known issue with iFrame: https://social.msdn.microsoft.com/Forums/en-US/11dc0e1d-cf33-4413-84d7-a7b5bfd417ca/bing-map-in-iframe?forum=bingmap const bingURL = `https://bing.com/maps/default.aspx?lvl=16&where1=${latLong}`; // OpenStreetMap // https://wiki.openstreetmap.org/wiki/Export#Embeddable_HTML const opsURL = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=20/${latitude}/${longitude}`; const bBox = fnGetBBox(parseFloat(latitude), parseFloat(longitude)); const bBoxLayerMarker = `bbox=${bBox.lonMin},${bBox.latMin},${bBox.lonMax},${bBox.latMax}&layer=mapnik&marker=${latLong}`; const opsEmbedURL = `https://www.openstreetmap.org/export/embed.html?${encodeURI( bBoxLayerMarker )}`; const embedURL = map == `Google` ? googleEmbedURL : map == `Bing` ? bingURL : opsEmbedURL; const linkURL = map == `Google` ? `${googleURL}?q=${latLong}` : map == `Bing` ? bingURL : opsURL; return { latLong, latitude, longitude, embedURL, linkURL }; } // https://wiki.openstreetmap.org/wiki/Bounding_Box function fnGetBBox(lat, lng) { return { latMin: lat - 0.001, lonMin: lng - 0.001, latMax: lat + 0.001, lonMax: lng + 0.001 }; } // fnGetBBox }34:Tbd2,// Customized original version of https://observablehq.com/@jashkenas/inputs#worldMapCoordinates // This version allows read=false, if showLatLong: display lat/lon display vs lon/lat // value parameter is entered as [lat,lon] vs [lon,lat] function worldMapCoordinates(config = {}) { const { value = [], heading, showLatLong = true, // default behavior, except lon/lat are flipped to lat/lon read = true, // default behavior title, description, width = 400 } = Array.isArray(config) ? { value: config } : config; const height = Math.round((210 / 400) * width); let [lat, lon] = value; lat = lat != null ? lat : null; lon = lon != null ? lon : null; const formEl = html``; const htmlHeading = html`

${heading}

`; if (heading) formEl.append(htmlHeading); const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "10px 0 3px"; const projection = d3geo .geoNaturalEarth1() .precision(0.1) .fitSize([width, height], { type: "Sphere" }); const path = d3geo.geoPath(projection, context).pointRadius(2.5); formEl.append(canvas); function draw() { context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.beginPath(); path(graticule); context.lineWidth = 0.35; context.strokeStyle = `#ddd`; context.stroke(); context.beginPath(); path(land); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(countries); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon, lat]] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } } if (read) { canvas.onclick = function (ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX, offsetY]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; } draw(); const form = input({ type: "worldMapCoordinates", title, description, display: (v) => showLatLong ? html`

Latitude: ${ lat ?? "" } Longitude: ${ lon ?? "" }

` : ``, getValue: () => [lat, lon], // simplified logic and return as lat/long form: formEl }); return form; }35:[{"id":"dcb700492f83c74eb82b7d79bf34ad89821cf5517bc2ab9a2b9ddb12f6ff3be38372f45857c1d6e83743c90c62787b8fea6097762089d5a0cd2656013ef9fb3b","href":"https://static.observableusercontent.com/files/dcb700492f83c74eb82b7d79bf34ad89821cf5517bc2ab9a2b9ddb12f6ff3be38372f45857c1d6e83743c90c62787b8fea6097762089d5a0cd2656013ef9fb3b","name":"Tower Bridge-Tower Bridge Rd.jpg","type":"image/jpeg","lastModified":1665705016771.127,"size":595705}] 2f:{"title":"EXIF Geotag Reader","cells":[{"id":0,"value":"# [EXIF](https://en.wikipedia.org/wiki/Exif) Geotag Reader","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"// https://github.com/observablehq/inputs/blob/main/README.md#Radio\nviewof picture = Inputs.radio([\"Picture of Tower Bridge\"], {\n label: \"Picture\",\n value: imgfile || \"Picture of Tower Bridge\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// https://observablehq.com/@observablehq/input-file\nviewof imgfile = Inputs.file({\n label: \"Uploaded Picture File\",\n accept: \".jpg,.jpeg,.webp,.heic\",\n required: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"{\n if (exifObj.GPSLatitudeRef) {\n return md`EXIF Metadata extracted from ${pictureObj.name}: \nLatitude: ${mapData.latitude} Longitude: ${mapData.longitude}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"// https://github.com/observablehq/inputs/blob/main/README.md#Radio\nviewof map = {\n if (exifObj.GPSLatitudeRef) {\n return Inputs.radio([\"Google\", \"Bing\", \"OpenStreetMap\"], {\n label: \"Map\",\n value: \"Google\"\n });\n } else {\n return html``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"{\n if (picture == \"Uploaded Picture File\" && !imgfile) return md``;\n if (exifObj.GPSLatitudeRef) {\n return md`${map} Map URL: \n${mapData.linkURL}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":252,"value":"## Objects used by Notebook","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"pictureObj = picture == \"Picture of Tower Bridge\"\n ? await FileAttachment(\"Tower Bridge-Tower Bridge Rd.jpg\")\n : await imgfile\n/*\n : imgfile != \"Picture of Tower Bridge\"\n ? await imgfile\n : await FileAttachment(\"Tower Bridge-Tower Bridge Rd.jpg\") */","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"exifObj = {\n if (!pictureObj) return md``;\n try {\n return ExifReader.load(await pictureObj.arrayBuffer());\n } catch (error) {\n return error;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"### [ExifReader](https://github.com/mattiasw/ExifReader)","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// require.resolve(\"exifreader@4.6.0\")\n// https://www.npmjs.com/package/exifreader\n// https://github.com/mattiasw/ExifReader\nExifReader = require(\"exifreader@4.6.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"### [Heic2any](https://alexcorvi.github.io/heic2any/) to support viewing of [HEIC files](https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format)","pinned":false,"hidden":false,"mode":"md"},{"id":738,"value":"// https://alexcorvi.github.io/heic2any/\nheic2any = require(\"heic2any\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"import {\n input,\n topojson,\n world,\n land,\n countries,\n d3geo,\n graticule\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}