0

Question: If I need to display a GeoTIF in response to a user picking from a web page, a day and a camera type, could I use LeafletJS, and if so, with what plugin? I store a GeoTIF for each camera type taken on a certain day.

Background: I'm making a web interface that looks at day-by-day images of the same plot of land. For each day you choose, you can see the land image toggled between the same four cameras. Think of the cameras as options, like "show me Monday with camera one" or "show me Monday with camera two", etc. The key here is to pick a day, and then pick the camera image. The camera images are all stored as as GeoTIFs. The GeoTIFs will be tiled as they are quite large, and I'm currently using Leafletjs to display them.

The problem is in the UI. I'm unclear if a library like Leaflet is correct, as I can't find how to build a UI that "links" two options, like a day and a camera, to display tiles that are chose by the intersection of both options.

I've thought of using the day as the basemap, and then they cameras as layers, but again, I'm unclear of the logical way to accomplish this.

Dave Strickler
  • 151
  • 1
  • 7

1 Answers1

0

It's hard to answer this because it is a architectural question, without any code posted. That said, it sounds like an interesting project! It sounds like you have already solved the problem of displaying the geotiff by first tiling and converting to jpeg or some format the browser can display.

I can envision this working something like:

  • The Cameras locations are a Markers layer in leaflet

  • The Mon-Sun data sources are Layers which can be toggled on and off. This should be one layer at a time (would be confusign to have say Mon, Tues, Weds all selected.

  • Assign a click event to the Camera Markers layer, and in that event callback do some javascript coding to update the currently selected camera Id, and swap in the tile layer for the currently selected camera, into the currently select Mon-Sun layer.

I'm unclear if a library like Leaflet is correct

Leaflet seems like a good choice, you may just need to dig into the api some more.

edit:

as I think about this further, I am uncertain this would work. Are the camera images oblique or orthogonal? A tiling layer in leaflet expects ortho, I think. I noticed there is a plugin which looks like it might be useful

Leaflet.Photo Plugin to show geotagged photos on a Leaflet map. Demo. Bjørn Sandvik

http://leafletjs.com/plugins.html

Alex G Rice
  • 1,561
  • 11
  • 16
  • Thanks for the suggestion. My images are georeferenced orthomaps, so they lay right over a leaflet background in the correct spot just fine. The tricky bit is creating the JS to allow the correct image to be displayed ("toggled on" in HTML). Assuming leaflet is a good place to start, it sounds like I need to search harder for a plugin to avoid writing it in JS. – Dave Strickler Dec 16 '16 at 17:11
  • You are welcome! Please upvote my answer if it was helpful. Also if you post some code sample, we can help debug or improve. The best questions on SO generally include some example code or attempted code. – Alex G Rice Dec 16 '16 at 19:52