Open task in OSM.org

[miurahr]

Allow user to open task extent on openstreetmap.org site in another tab or window on browser. This will help users to work with iD editor, or another favorite editors in addition to JOSM.

Implement #87

Signed-off-by: Hiroshi Miura miurahr@linux.com

[hauke96]

I guess 99% of all users clicking your button will probably open iD afterwards, shouldn't we then open iD directly and pre-set the hashtag and comment URL-parameters? Otherwise a mapped task with iD wouldn't contain any information that this changeset belongs to a stm project.

I don't like the idea of opening iD but I see, that most people use it. Specifying hashtag/comment gives other people at least some more information when doing QA.

I already tried it and so far this works (even though the zoom is a default value iD chooses):

public openInOsmOrg(task: Task, projectId: string) {
  const e = this.getExtent(task);
  const lat = (e[0] + e[2]) / 2;
  const lon = (e[1] + e[3]) / 2;
  window.open('https://openstreetmap.org/edit?editor=id#lat=' + lat + '&lon=' + lon + '&comment=' + encodeURIComponent('#stm #stm-project-' + projectId + ' ') + '&hashtags=' + encodeURIComponent('#stm,#stm-project-' + projectId));
}

It would be great to have a correct zoom level but as far as I can see from the iD API doc one can not specify an extent like in JOSM. Maybe you can find a solution?

[miurahr]

I'm also JOSM user and not sure about iD editor. OSM API has a bbox parameter that help a correct zoom level. Because iD API don't have a similar API, it is not possible directly. Only we can do is that stm detect browser canvas size such as platform.width(); , and calculate a zoom level.

I'm not good at front-end, so I cannot say anything better suggestions.

[miurahr]

A leaflet doing the conversion from bbox to zoom level as following way:

    // @method getBoundsZoom(bounds: LatLngBounds, inside?: Boolean, padding?: Point): Number
    // Returns the maximum zoom level on which the given bounds fit to the map
    // view in its entirety. If `inside` (optional) is set to `true`, the method
    // instead returns the minimum zoom level on which the map view fits into
    // the given bounds in its entirety.
    getBoundsZoom: function (bounds, inside, padding) { // (LatLngBounds[, Boolean, Point]) -> Number
        bounds = toLatLngBounds(bounds);
        padding = toPoint(padding || [0, 0]);

        var zoom = this.getZoom() || 0,
            min = this.getMinZoom(),
            max = this.getMaxZoom(),
            nw = bounds.getNorthWest(),
            se = bounds.getSouthEast(),
            size = this.getSize().subtract(padding),
            boundsSize = toBounds(this.project(se, zoom), this.project(nw, zoom)).getSize(),
            snap = Browser.any3d ? this.options.zoomSnap : 1,
            scalex = size.x / boundsSize.x,
            scaley = size.y / boundsSize.y,
            scale = inside ? Math.max(scalex, scaley) : Math.min(scalex, scaley);

        zoom = this.getScaleZoom(scale, zoom);

        if (snap) {
            zoom = Math.round(zoom / (snap / 100)) * (snap / 100); // don't jump if within 1% of a snap level
            zoom = inside ? Math.ceil(zoom / snap) * snap : Math.floor(zoom / snap) * snap;
        }

        return Math.max(min, Math.min(max, zoom));
    },

We can do a similar things on an angular typescript.

[miurahr]

and we can get screen size -> SO answer

[hauke96]

I also found some code snippets on the internet calculation all kinds of things. I pushed one calculating the center and zoom level of the map for a given extent (which is a task in our case). I also directly call iD with comment and hashtags set. Please take a look at this. This solution looks fine to me.

[miurahr]

It looks good and works on my local, but it would be better that the button label named as "open iD Editor".