repeat-image-phase: visualisation, group of icons and repeating.

[Allroads]

After solving #14926 and working in latest.
Thanks.

The next problem to solve.

A group of icons, when this is repeated, I expected that it is repeated in the same distance to other icons lined out in the mapcss. Now further on the way icons crossing each other, makes it also less good to read.
The attached image shows it.

Mostly I used 480x300 icons SVG, but some icons must be wider, because the vehicle image is wider.
All the same height. In JOSM 15px. It should not be needed to make all the images the same wide and height.

I needed to use dash -215 to make it visible
for node icon-offset-x: 225; same direction.

way|z17-[highway][psv=yes]::psv_waylayer {
    repeat-image: psv-NL-green.svg;
        repeat-image-align: bottom;
        repeat-image-height: 15;
        repeat-image-offset: 49;
        repeat-image-phase: -215;
        repeat-image-spacing: 400;
        z-index: 100;
}

[Allroads]

Visualisation repeat-image-phase

[Allroads]

phase mixed up

[bastiK]

If I understand your goal correctly, then this is possible already. Basically you have to remember the current phase and increase that phase by a certain number of pixels each time a new icon is added.

Have a look at the OsmcSKCZPL style, it uses this trick to draw hiking marker color along the paths. (There can be multiple markers for one trail.) Please let me know, if this was helpful for you!

[Allroads]

What I expected with this tag combination is this.
That the second, third, ..... looks like the first.

The OsmcSKCZPL style, as you said a trick. I do not understand it right now. So not knowing as this is a solution for me.

[bastiK]

The following style should do what you like to have:

way|z17-[highway]::psv_waylayer {
    repeat-image-phase: 10;
}

way|z17-[highway][psv=yes]::psv_waylayer {
    repeat-image: "presets/transport/tram.svg";
    repeat-image-phase: prop("repeat-image-phase") - 22;
    repeat-image-spacing: 400;
}

way|z17-[highway]::foot_waylayer {
    repeat-image-phase: prop("repeat-image-phase", "psv_waylayer");
}

way|z17-[highway][foot=yes]::foot_waylayer {
    repeat-image: "presets/shop/supermarket.svg";
    repeat-image-phase: prop("repeat-image-phase") - 22;
    repeat-image-spacing: 400;
}

way|z17-[highway]::horse_waylayer {
    repeat-image-phase: prop("repeat-image-phase", "foot_waylayer");
}

way|z17-[highway][horse=yes]::horse_waylayer {
    repeat-image: "presets/leisure/horse_riding.svg";
    repeat-image-phase: prop("repeat-image-phase") - 21;
    repeat-image-spacing: 400;
}

/* ... */

What it does, is to carry the repeat-image-phase value from one layer to the next and decrease it as needed. Please see if you can adapt the pattern to your use case.

[Allroads]

First I adressed all prop repeat-image-phase to the first waylayer (access_waylayer)
The gap between different size images is growing, the images cluster is not as it should be.

way|z17-[highway]::vehicle_waylayer {
    repeat-image-phase: prop("repeat-image-phase", "access_waylayer");
}
way|z17-[highway]::foot_waylayer {
    repeat-image-phase: prop("repeat-image-phase", "access_waylayer");
}

Then I adressed a waylayer to a previous waylayer
The gap between different size images is growing, the images cluster is not as it should be.

way|z17-[highway]::foot_waylayer {
    repeat-image-phase: prop("repeat-image-phase", "vehicle_waylayer");
}

Conclusion: not the phase is the problem but the repeat-image-spacing.
Workaround for phase is probably not needed.

Start way line, first images cluster.

Gap is growing between bicycle and mofa, because of different wide sizes after reduce height to 15 px.

What is needed, a new key repeat-image-repeat spacing from center images to center image for repeated images.
Or repeat-image-centerspacing or else.

Workround is to calculate by hand, what is the needed wide value.
prop("repeat-image-spacing")

difference between images in wide, when it is 15px height
0,6105

400 - 0,6105 = 399,3895

repeat-image-spacing:prop("repeat-image-spacing") 399,3895; for one different size image.
I do not like this workaround, to much failure possibilities.
Could be so easy, if possible.

[bastiK]

I don't think it is necessary to add another keyword for this purpose. As you said, repeat-image-spacing can be calculated from the suggested repeat-image-centerspacing by subtracting the image width.

First of all, let me suggest you solve one problem at a time and start with plain .png images that already have the correct size. Next, a practical solution to your problem would be, to add padding to the icons, so they all have the same width. I.e. add transparent pixels to the right of the vehicle, so every icon is for example 40px wide.

A proper solution (with icons of different size) is also possible. You need to modify the .mapcss a bit, the following pattern should work:

way|z17-[highway]::psv_waylayer {
    myphase: -10;
}

way|z17-[highway][psv=yes]::psv_waylayer {
    repeat-image: "presets/transport/tram.svg";
    repeat-image-width:16;
    repeat-image-phase: prop("myphase");
    myphase: prop("myphase") - 16 - 5;
    repeat-image-spacing: 400 - 16;
}

way|z17-[highway]::foot_waylayer {
    myphase: prop("myphase", "psv_waylayer");
}

way|z17-[highway][foot=yes]::foot_waylayer {
    repeat-image: "presets/shop/supermarket.svg";
    repeat-image-width: 30;
    repeat-image-phase: prop("myphase");
    myphase: prop("myphase") - 30 - 5;
    repeat-image-spacing: 400 - 30;
}

way|z17-[highway]::horse_waylayer {
    myphase: prop("myphase", "foot_waylayer");
}

way|z17-[highway][horse=yes]::horse_waylayer {
    repeat-image: "presets/leisure/horse_riding.svg";
    repeat-image-width: 16;
    repeat-image-phase: prop("myphase");
    myphase: prop("myphase") - 16 - 5;
    repeat-image-spacing: 400 - 16;
}

[Allroads]

If a another key would make it simple to do it, so that a workaround is not needed, this is desirable.

Less text in mapcss.
Less difficult workaround.
Less mistakes.
Less time consuming.
Flexible in images, must not have all the same size.

Maybe it should go from bug to enhancement.

I started with images all the same height 300 px, but not taking the bus as biggest wide size.
I already have over 500 images.

Maybe a note on the JOSM page by repeat-image-spacing is needed.
"between" is two ways explainable. Plant two trees there must be 25 meter between them, who is measuring the trunk?
Maybe, i got the warning to do it different.

For me the image-height is important.
0,6105 is not workable in this workaround.
Avoid calculation by hand.

[bastiK]

Having both properties repeat-image-spacing and repeat-image-centerspacing side by side would be a strange redundancy. What if both are specified? There are pros and cons, but we had to settle for one choice and repeat-image-spacing it was.

I agree, the other choice would be slightly more convenient in your particular use case. Nevertheless, it is still possible to achieve what you want, and not excessively complicated.

Replying to Allroads:

Flexible in images, must not have all the same size.

In the second proposed solution, they don't have to be the same size.

[...]
I already have over 500 images.

That's not my problem. :)

Closing the ticket for now as "won't fix". I'm always interested to see what people create with the mapcss style language and happy to help if I can. Please feel free to suggest other enhancements, that fit better with the current scheme.

[Allroads]

Some experience info:

Shifting left

Sometimes this behaviour is wanted.
On node this works the same icon-offset-x: prop("icon-offset-x") +28;

+ is needed ( 28; without it did not work, bug?)

On way
But sometimes it is not wanted.
The bicycle should line up vertically and moped should shift up to the right.
key bicycle
key bicycle:forward
key bicycle:backward

Different keys that should line up, also when the key bicycle=* is not there. Leaving a blank spot.

Prop phase set to first object.

[Allroads]

Thanks for all the help.

The first try:

​http://mijndev.openstreetmap.nl/~allroads/JOSM/Styles/Road_extended_JOSM_style_info.html

forum​https://forum.openstreetmap.org/viewtopic.php?id=58694

[bastiK]

Impressive work! You can add it to this page, so it will show up in the list of available styles in the JOSM preferences.

[stoecker]

Another comment: Many external links in a style are usually not a good idea. Delivering the whole thing as a single Zip-Archive with included style and icons is much better.

[anonymous]

Replying to stoecker:

Another comment: Many external links in a style are usually not a good idea. Delivering the whole thing as a single Zip-Archive with included style and icons is much better.

So I did,
the zip file for in JOSM.

http://mijndev.openstreetmap.nl/~allroads/JOSM/Styles/Road_Extended_JOSM_style.zip

And changed, extended other features.
INFO:
​http://mijndev.openstreetmap.nl/~allroads/JOSM/Styles/Road_extended_JOSM_style_info.html

About add it to JOSM page,..........
I, first like to work with it and get some response, what is wrong, what can be better, other features for the road.

I did see sometimes strange combinations, asking myself, why? Often not right.
People miss good presets for traffic_sign, a conclusion of mine.
I use a traffic_sign style of our country. But visualization undersigns is not good. Undersigns are very important, change partly, the meaning of the traffic sign.
mofa, moped, are often not good tagged, cycleway with "not" access mofa and moped on it.

The preset traffic_sign ticket is still open. Hope for a solution!

[Allroads]

Was not logged in, wrote the above comment.

[Allroads]

A question:

You see on this image

The OSM drawing way is from left to right.
The walk, drive of the images (traffic_sign image) is from right to left, this is forward walk/drive.
Then it is strange that this is not in the direction of the OSM drawn way.
Also (on the bottom line < image forward)this should also be in the OSM way direction.

Forward is forward, and it is not correct to place the images the direction, they are now.

One possibility is to flip the image horizontal and vertical and then save the image.
This feel strange to me.

A other option,...
Is to flip the image in the mapcss.
If possible, is it?

[bastiK]

Replying to Allroads:

One possibility is to flip the image horizontal and vertical and then save the image.
This feel strange to me.

A other option,...
Is to flip the image in the mapcss.
If possible, is it?

This is not possible at the moment.

[Allroads]

Should I make a new ticket to ask for the flip proces enhancement development?

Before I do all these svg image flip changes.

"at the moment." How realistic is it to get such enhancement?

[bastiK]

Replying to Allroads:

Should I make a new ticket to ask for the flip proces enhancement development?

Please do. Best would be something akin the CSS ​transform feature.

Before I do all these svg image flip changes.

"at the moment." How realistic is it to get such enhancement?

Cannot give you any predictions, but not impossible...