MapRoulette Integration

[voscarmv]

Solution to issue #1150

This PR allows users to access the MapRoulette API from Rapid

I started by conforming MaptrouletteService to OsomseService. _loadStringsAsync() is missing from MapRouletteService and it is needed to populate the _mapRouletteStrings property that will be used by getStrings, which in turn is used by TaskStrings() in maproulette_details.js to display the task details on the sidebar.

This PR is a draft.

[voscarmv]

@Bonkles my two main questions are:

I don't remember personally changing the contents of data/languages.js in this commit bef6c89

Do you know why it might have changed?

Also, I used maproulette.org and found that their interface DOES have a BBOX feature for challenges, not just tasks. Here's a screenshot of the network tab using a bb parameter for the /challenges/extendedFind API call, which is NOT mentioned in https://maproulette.org/docs/swagger-ui/index.html#/Challenge/extendedFind

My question is: do you think this might be a feature that is closed to the public? Does it maybe need maproulette.org auth of some kind?

EDIT: So that screenshot shows a failed request, but her is bb working for challenges

[voscarmv]

Okay so in these last few commits I've bypassed a lot of the OsmoseService stuff that does not conform to the data structure of the MapRoulette Tasks that we are showing on the left sidepanel. I finally got it to look like this:

The description is not the actual Task description, which is actually named Task Instruction in MapRoulette, but the name of the Parent Challenge of the Task.

A lot of tasks (most for what I've seen so far) don't even have an instruction, so I'm forced to use the Parent name to describe them.

Question: Should we take a chance and use Challenges instead of Tasks to display on the map? I think the bb parameter from before could work.

[voscarmv]

Plan:

Create a function bboxZoom(p1, p2) in context.systems.map to zoom into a TaskCluster BBox.

For this, use MapSystem is extentZoom() to convert the upper left corner p1 point and lower right cornet p2 world coordinate points of the TaskCuster Bbox into a set of parameters that centerZoom(loc2, z2, duration = 0) can handle.

[voscarmv]

@Bonkles

Here are some preliminary questions for our upcoming meeting today:

So I just found the function context.systems.map.extent(extent) in MapSystem.js L734 and I want to use under SelectMode.js L145 to "rezoom" the map when a user clicks on a Task Grouping (aka TaskCluster)

I already figured out how to extract an "extent" from the TaskCluster plolygon bounding. I'm just going to sort the points of the polygon and get the smallest and biggerst X coordinates. as well as smallest and biggest Y coordinates, to produce the extent object that context.systems.map.extent(extent) takes in as an argument.

My question here is

1. how do I pass this extent object to SelectMode.js so that it zooms in on click?

Another thing I figure our how to do is determining when to stop zooming in on-click. The maproulette TaskCluster API call will return an array of Cluster JSON objects where all the clusters have only 1 task. This is to know when to display tasks instead of clusters on the map.

My other question is

2. How might I display a different icon for Tasks and TaskClusters?

I'd like to use icons with "number of tasks" for clusters, and maybe just a single pointer for tasks when zooming reaches it's end. Just the same way that MapRoulette does it on ther UX

Thanks Ben and see you later today!

[voscarmv]

Also, for the record the MapRoulette API has been malfunctioning for the last 2 days not allowing for tests to be run

[Bonkles]

Great questions! I think we should focus on getting something land-able for you to focus on- handling tasks, taskGroups, and Challenges will start to get unwieldy pretty fast. Let's try for the following:

Just Display challenges only. When clicked, we can display the selected challenge's information in Rapid's sidebar, but also provide a link to view/edit the challenge on MapRoulette.org, a clear call to action to lead the user over there.

For the remainder of the cohort, with extra time, you can document your API findings and we can collab on a feature proposal for implementing / doing the rest of this work in future cohorts. That way you can pass all the great API exploration / learning you have been doing onto the next implementer- also an extremely valuable skill to practice!

---

Re: how to display a different map pin- you will see in the PixiTextures.js file we have a bunch of icons that we create using draw calls- very similar to the SVG format.

on / around line 380 of PixiTextures we have something like:

    //
    // Markers
    //
    const pin = new Graphics()                          
      .lineStyle(1, 0x444444)                             
      .beginFill(0xffffff, 1)                                    
      .moveTo(0, 0)                                            
      .bezierCurveTo(-2,-2, -8,-10, -8,-15)     
      .bezierCurveTo(-8,-19, -4,-23, 0,-23)    
      .bezierCurveTo(4,-23, 8,-19, 8,-15)       
      .bezierCurveTo(8,-10, 2,-2, 0,0)           
      .closePath()                                            
      .endFill();                                                 
                                                                     

//              [0,-23]
//              _,-+-,_
//            /'       `\
//           :           :
//           :           :  [8,-15]
//            \         /
//             \       /
//              \     /
//               \   /      -y
//                `+`        |
//               [0,0]       +-- +x

The formatting is not perfect here in this comment UI but it gets the point across. we draw a shape, give it a style and thickness with .lineStyle(), then fill it with white .beginFill(0xfffff, 1), then do a bunch of positioning with bezier curves, close the path, and end the fill.

This 'graphic' gets coverted to a texture later on in the process.

I can walk you through the process of converting a MapRoulette challenge to one of these if you'd like!

[voscarmv]

@Bonkles this is working for the most part. The buttons to Close or Remove tasks are still non-functional, but they might be easy to implement.

My biggest concern atm is that some MapRoulette links seem broken for tasks shown on Rapid. Here are two problems:

1. For example, this task returns a blank page: https://maproulette.org/challenge/41509/task/205483113
2. And this challenge, although it shows up on Rapid, returns a "Challenge does not exist" from MR: https://maproulette.org/browse/challenges/17733

I think 1 is a site-wide bug on MR because actually NO task pages seem to be working right now, not even if you navigate to the task from MR's UI itself.

As for 2, I'm not sure what's going on. API returns tasks from 17733, yet maproulette.org says 17733 does not exist (???)

Maybe the folks at MR will like to have a look at this.

[atiannicelli]

If you are logged in the first link works. But before logging in I get a black page too. It would be nice if MR promoted you to log in.

The second link goes to a challenge that has been deleted. Filter out challenges that are "deleted" = true

[atiannicelli]

Oh and that forest link is a tasks I own so you may be running into an issue with access. Before I logged in I got a blank screen. After I logged in I could see it. I'll have to look at what the visibility of that challenge and project is set to.

[voscarmv]

@atiannicelli thanks for the info.

I have a few questions:

The URL I'm using for loading my task list looks like this:

https://maproulette.org/api/v2/tasks/box/-71.08040103202916/42.363936378907745/-71.06639896797085/42.375063128349666?sort=parent_id&order=DESC&cStatus=0%2C3

Note the use of cStatus=0,3 here.

This is how I'm trying to filter out tasks whose parent challenge is deleted: by using the cStatus= attribute.

Now, this attribute is not detailed at all in https://maproulette.org/docs/swagger-ui/ and is actually not even associated to /tasks/box there either.

However, it DOES work for /tasks/box/. I found this out by pretty much taking a leap of faith and trying it out myself. Actually, I only found out about cStatus from using chrome Inspect on the maproulette.org website. My guess is it stands for Challenge Status.

Also, the documentation says this about Challenge status, from /challenge/{id}/tasks/extract

Again, this information is extracted from another API call because /tasks/box/ has no info on the status or cStatus filter.

My hope with using cStatus for /tasks/box/ was that this would show me only tasks with a parent Challenge of Status 0 or 3.

However, cStatus seems to filter tasks for /tasks/box/, NOT by filtering out tasks whose parent Challenge has status 0 or 3, but Tasks with status 0 or 3 themselves.

If you read the output of https://maproulette.org/api/v2/tasks/box/-71.08040103202916/42.363936378907745/-71.06639896797085/42.375063128349666?sort=parent_id&order=DESC&cStatus=0%2C3 you will notice absolutely all of them have a status:0, however, you will see for example tasks from parent challenge 14932 which have themselves Task status = 0, but whose parent challenge is deleted (challenge status = 4).

My question here is: is there a way filter from /tasks/box/ that will return only tasks with non-deleted parent challenges? This would be great because Task information from /tasks/box/ does not itself come with parent Challenge status. I would have to make one /challenge/{id} API call for each of the tasks listed in /tasks/box/ to get parent challenge status, and that would be too much traffic for MR probably.

[voscarmv]

One thing I can do to patch this is to just flag the challenge as "Deleted" on the left side panel of Rapid so the user won't be surprised to find a "Challenge does not exist" page.

This would not require me to download every single parent challenge for the tasks lists, because parent challenge information from /challenge/{id} is only loaded once when the user clicks on a Task in the Rapid UI, so as to show it on the side panel.

[voscarmv]

Also, something weird is that challenge 14932 which is deleted has status 3 which is "Skipped", and it should be 4? Maybe the API isn't changing challenge status accordingly when they are deleted? Or Task status when their parent challenge is deleted either for that matter.

[atiannicelli]

Hmmm, I don't know what the "status" in the challenge response means. That may map to a different set of values for challenges. The data you were looking at is the task status. But I see your issue... Basically you are searching for tasks in a bbox and you get some that are part of a challenge that has been deleted... I would ask on the Map Roulette Slack channel for ideas as to how to filter out tasks that are members of challenges that have been deleted.

[voscarmv]

Thanks @atiannicelli , I don't have acces to MR's Slack but I think @Bonkles has access to that Slack channel.

[tordans]

I don't have acces to MR's Slack

https://slack.openstreetmap.us/

[atiannicelli]

Until they fix the blank page issue (when not logged in) you can change the link to: https://maproulette.org/c/42081
notice the c instead of challenge. This will land you on the challenge front page instead of jumping right to the first task. And if you are not logged in then it tells you to login.

OH, But if you want to jump directly to a task... like I think you probably want to then you are stuck.

[voscarmv]

Here's a gif of the feature working

For contrast, this is how MR works: progressive zoom-in into task clusters.

[voscarmv]

@Bonkles @atiannicelli @tordans here's a gist for a future cohort to continue the work here:

https://gist.github.com/voscarmv/8e1e1329dfc56634b0b0dcb67b8b4116

I would appreciate any feedback and comments.

Cheers and thanks for the great experience! Happy hacking all!

[bhousel]

moved to #1369