Integrating distribution map and seasonality graph in third-party web page

General
, ,
1

Hi everyone,

I’m building an online knowledge base for animal track identification, and for each species I’d like to also include the following info, which is very relevant for identification:

  • Distribution (map): Is this species usually present in my area?

  • Seasonality (graph): Is this species usually active this time of year?

This data is already available on the iNat taxon page, in exactly the kind of graphs I’d also want to show, so I can think of two approaches:

  1. Static: Getting screenshots of the distribution map and seasonality from the iNat taxon page (with proper attribution, of course) and manually updating these every once in awhile.

  2. Dynamic: Pulling this information async directly from iNat via API by passing a taxon ID, which I can add to each species via my CMS, so that it’s always up-to-date and even interactive like on iNat.

Evidently I would prefer to do it dynamically as described in option #2, but I kind of got stuck and this is where I need your help.

I’ve read the docs at api.inaturalist.org but I’m not sure how exactly to experiment with the API myself, let alone to generate a map and graph. I’ve had a look at pyinaturalist and saw that a V2 of the API is also in the works. I’ve also read that to make authenticated requests I would need to apply to create iNat applications, however my usage of the API would be read-only (just to pull and render data) because the info should be visible regardless of whether users have iNat accounts or not. Would I still need to apply for that as well?

Now, I do have some coding experience myself which is why I’m building this knowledge base myself in WordPress (PHP, MySQL, Javascript). That being said, I’m not a full-time developer by any means, so I’m reaching out for any kind of help, guidance or advice on how I can integrate the iNat distribution map and seasonality graph into my platform, especially if it’s possible to do it just via Javascript or another similar way.

I’ve already reached out to the iNat staff and they suggested I’d post a help request here for the community. Any help would be greatly appreciated!

1 Like
2

you don’t need to register an app if you don’t need to use authorization in your requests.

assuming you’ll code the site to make requests from the end user client (browser), if you want to identify your site to the iNat server when making requests for some reason, you could include a custom x-User-Agent header, but i don’t think it’s strictly necessary, since the iNat server should already receive Origin and Referrer from the browser that will identify your site. if you’re making requests from your own server to the iNat server for some reason, then you should pass a User-Agent header to identify your site.

yes, you could use vanilla JavaScript like i do, or you could use a package like inaturalistjs to make API requests. for mapping, i use Leaflet, but there are other options, depending on what you want to do.

if you just need visualization (no option for user to click to get more details about a particular observation), and you’re satisfied with the way iNaturalist represents observations in its own maps on the website, then you can use their observation tiles as the basis for your maps. see https://forum.inaturalist.org/t/in-pursuit-of-mappiness-part-1/21864 for more information about map tiles.

you’ll still need to figure out your own solution for basemap tiles. i use mostly OpenStreetMap and EOX tiles for my own limited personal use, but there are other providers, and if you’re running a commercial website, you probably should either host your own tiles or contract with a map tile provider to serve up basemaps.

if you need interactivity for your maps, you could use iNaturalist’s UTF grids, but it makes things a bit more complicated. there are plugins that will add UTF grid interactivity to Leaflet. you could also use the UTF grids without the observation grids as the basis for customizing your observation visualizations (if you don’t like iNaturalist’s own standard observation tiles for some reason). this provides some links to understand UTF grids generally and a way to visualize iNaturalist’s UTF grids: https://jumear.github.io/stirfry/iNat_UTFGrid_data_interpreter.

generally, you can use the GET /observations/histogram endpoint from the API to get the data that you need to create graphs and charts for observation seasonality. you can also use the same endpoint to get the data for phenology, or you can also use GET /observations/popular_field_values endpoint.

from there, there are plenty of packages out there that will help you do the visualizations using that data. i’m not going to recommend a particular one, but there are many out there. do a search for JavaScript data visualization packages or libraries.

3 Likes