1

First, you have a total newbie here with absolutely no programming experience. I apologize if I am not using the correct terminology.

Background: I took a class for educators that is supposed to teach us how to teach a high school computer science class. The course is supposed to be designed for teachers with zero programming knowledge. We have been provided with no coding instruction.

Our assignment is to use EXIF.js and Mapbox together to create an HTML document that will display a set of images (icons) on a map at their GPS coordinates (imagine a small photo of the Eiffel Tower displayed on a map at the exact coordinates where it is located). We are to use EXIF.js to extract GPS coordinates from the EXIF data. Then those coordinates are supposed to be automatically inserted in the code to place the icons at the correct location on the map.

All I have to work with are the samples on the Mapbox web site and EXIF.js documents.

By working with the code from the following sample, I have been able to make something that approximates the end result the professor is looking for. It looks correct. However, that is only one part of the assignment. Instead of having the GPS coordinates extracted from the photos and inserted in the code, I have typed the coordinates in manually.

I have code that should extract the coordinates. But I seem to be missing the code that connects the coordinates with the icon/image.

sample: https://docs.mapbox.com/mapbox-gl-js/example/add-image/

Is anyone able to give me some direction on where to look for instructions or how to tackle this? I am utterly lost. TIA

Tamara Denby
  • 11
  • 1
  • When you extract the image/image name from the exif data isn’t the coordinate meta tag also visible? The coordinate should be accessed at the same time you access the image. Have had the format/structure of the exif data format explained? – Magnas Jul 21 '20 at 06:16
  • Hi Magnas, thanks for taking a look at my question! The meta data and meta tags do not display anywhere and are not visible when looking at the map or at the code. There is code to extract it from the image files, changed to decimal format and then assigned to a variable (lonDec and latDec). Then those variables are supposed to be placed as the coordinates for the images. But I assume I'm missing something in my code that ties the variable values to the specific images. – Tamara Denby Jul 21 '20 at 17:57

1 Answers1

0

According to the The GeoJSON Format RFC 7946 section 3.1.1:

A position is an array of numbers. There MUST be two or more elements. The first two elements are longitude and latitude, or easting and northing, precisely in that order and using decimal numbers

So looking at the example of the cat icon, the position it has been drawn in is [0.0, 0.0] longitude and latitude, respectively.

The bit of code doing this is here, in your example:

{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}

Going through the example in greater detail, you can see the call to map.loadImage(..) takes two parameters, the first being the URL of the image you wish to load, and the second being a function that is called once that image has been loaded from it's original location and is available for your use.

Within that function you can see a call to map.addImage(..) that takes the now-loaded image data and associates it with a name; here that is "cat".

It then calls map.addSource(..) which takes an object of GeoJSON format and a name to associate that source with. That name has been given as "point".

Lastly it calls map.addLayer(..) which adds a layer to the map. You can think of this a bit like placing a 'transparency' from on old overhead projector over the top of the map. In the example here the layer is transparent except for the image of the cat, alowing the rest of the map underneath to show through.

This layer is specified in terms of the items we've just being working with above:

map.addLayer({
  'id': 'points',
  'type': 'symbol',
  'source': 'point',
  'layout': {
    'icon-image': 'cat',
    'icon-size': 0.25
  }
});

The layer is given a unique id ("points") and it is given a 'source' to tell it where to place the layer in relation to the map. The example names the source "point", but you should substitute whatever name was used in the call to map.addSource(..) earlier. Lastly, the layout of this layer is specified as an icon - identified by the name given in the map.addImage(..) call that was given the data of the loaded image. The name given to this was "cat", and that's what appears here.

So, in summary, the code that associates the image with the co-ordinates you are retrieving from the photograph EXIF data should be in that example, albeit maybe not in the order and form you might be expecting.

Good luck with your assignment.

Community
  • 1
  • 1
Justin Otto
  • 584
  • 3
  • 11
  • HI Justin! Thank you very much for your thorough response. I genuinely appreciate the help! The last paragraph has me stumped. But other than that, I followed along just fine. – Tamara Denby Jul 23 '20 at 17:58