HTML5 Editor proof of concept

wyo · 2010-09-21T17:41:04.000Z

BTW why can’t I mark and copy a text from the fields of a seleced node?

paulwagener · 2010-09-22T13:42:09.000Z

The svg editor doesn’t zoom to the correct level. It’s just a hardcoded value.
The CSS is just like HTML css. In fact it IS HTML CSS. I’ve given all ways and nodes classes according to their tags. A quick look through the DOM should reveL their pattern.
Why the inputs aren’t editable is black magic to me. Seems like they should work.

wyo · 2010-09-22T19:55:38.000Z

paulwagener:

The svg editor doesn’t zoom to the correct level. It’s just a hardcoded value.

Well how difficult is it to make it match?

paulwagener:

The CSS is just like HTML css. In fact it IS HTML CSS. I’ve given all ways and nodes classes according to their tags. A quick look through the DOM should reveL their pattern.

Seems you convert tags like “buildings=yes” to “building-yes”. Could change that to “building_yes”? It might be that “-” is contained in a tag. Isn’t it possible to convert “name=…” to the name statement or doesn’t SVG items have a name?

What’s the meaning of the “null” class?

Wyo

wyo · 2010-09-23T16:11:59.000Z

wyo:

Could change that to “building_yes”? It might be that “-” is contained in a tag.

Scrap that, any map feature tag uses “_”. Unfortunaltely names (usually man made) do contain “-”. Yet names could be moved to the name statement instead of another class.

I’ve colored the vectors a little see http://www.orpatec.ch/osm/editor/editor.xhtml. It would help if the zoom level would match somehow and if the map could be moved around in a larger area.

Filling rectangles overlaps other buildings (see Tower of London). You have to add the inner/outer rules of the buildings.

Wyo

WBSKI · 2010-12-06T23:37:16.000Z

Great work! Seems to be working fine in Chrome! I am interested in helping out with this if you are still interested Paul

Cheers
Russell

wyo · 2010-12-07T09:39:10.000Z

WBSKI:

Great work! Seems to be working fine in Chrome! I am interested in helping out with this if you are still interested Paul

I’m equally interested in an SVG editor and have set up a project page (http://wiki.openstreetmap.org/wiki/SVG-Editor). I’ll collect any information about the project there.

Wyo

paulwagener · 2010-12-07T17:36:32.000Z

Nice to see there is still interest in it.

I’ve created a project on google code:
https://code.google.com/p/svg-mapeditor/

For everybody that wants to help out just send me a mail and i’ll add you to the project.

wyo · 2010-12-07T19:22:37.000Z

paulwagener:

https://code.google.com/p/svg-mapeditor/

Fine. I think it’s easier for any visitors to have the project info here in the wiki while the code, etc goes into google. Is that okay for you?

First lets discuss the concept, e.g. I’ve alter the internal organisation (g-element) of the SVG. Any objections (see http://wiki.openstreetmap.org/wiki/SVG-Editor))?

Another issue is adding the tag information as -, I’m not satisfied with this yet haven’t found a better solution.

I’ve set up my own test page (http://www.orpatec.ch/osm/editor/editor.xhtml) and added a CSS (http://www.orpatec.ch/osm/editor/editor.css) to colorize everything a little more.

Wyo

paulwagener · 2010-12-07T21:02:26.000Z

The Google project is purely for the code hosting so we can work with multiple people on it. I’ve deleted a few tabs to clear that up.

As for the key-values: We could just add each of them as actual attributes to the and and use the css attribute selectors to style them. I don’t know if this is allowed and could be problematic for keys that happen to overlap with the existing attributes.

Wyo: Could you send me a private message with your e-mail so you can merge your changes into the source?

E-Malte · 2010-12-07T21:52:55.000Z

paulwagener:

As for the key-values: We could just add each of them as actual attributes to the and and use the css attribute selectors to style them. I don’t know if this is allowed and could be problematic for keys that happen to overlap with the existing attributes.

In fact you have to introduce an own namespace then with valid DTD etc. But it should work with the arguments theirselves.
But I would prefer classes for that, as you can give multiple classes to an Element and I don’t like CSS’s handling of attributes.

wyo · 2010-12-08T08:50:15.000Z

E-Malte:

paulwagener:

As for the key-values

But I would prefer classes for that, as you can give multiple classes to an Element and I don’t like CSS’s handling of attributes.

I prefer classes as well. First I though the key/value pair could be split into 2 classes but then the relationship gets lost. Maybe 2 classes (class=, class=-) are possible. Yet we easily can postpone this until later.

Another question, would be possible to compute all positions (coordinates) as in zoom level 18 and then zoom the map to the correct level by using transform and clipping? Then each element has to be computed just once. If yes it might be possible to have these preprocessed on a server and directly retrieving SVG g-elements.

Do we agree in having a separate g-element for each way, containing name, points and tags of a way? Same for nodes, yet what about relations?

Wyo

E-Malte · 2010-12-08T20:49:03.000Z

wyo:

First I though the key/value pair could be split into 2 classes but then the relationship gets lost. Maybe 2 classes (class=, class=-) are possible. Yet we easily can postpone this until later.

In fact you have to write all classes into one attribute, so it would be more like class=“k_ kv__” or something similar. Although you could have several options to style it. Osmarender does it this way: class=“-” [1].

Another question, would be possible to compute all positions (coordinates) as in zoom level 18 and then zoom the map to the correct level by using transform and clipping?

This is actually possible without zooming and clipping by using the viewBox Element or if it should be more complex with a transform-Element.
In my opinion the view Box would be better for this.
But it wouldn’t be possible to keep the same projection when scrolling far away, if you choose a viewport-depening projection (which usual tiles are). For smaller areas you can ignore it, and for larger ones you could choose a projection depending not on the viewport.
When zooming in or out it should be possible to set some kind of zoom level to an Element, so that the style should be dependent on the zoom level…

Another solution for all that would be the usage of OpenLayers, as its Vector-Layer-Feature uses SVG itself, and you can access all attributes…

[1] See i.e. defs-Element of this Osmarender-Stylesheet: http://svn.openstreetmap.org/applications/rendering/osmarender/stylesheets/osm-map-features-z17.xml

Malte

paulwagener · 2010-12-08T23:06:46.000Z

You can solve the different styles for different zoom levels by adding the zoom information as a class to a container element and then use selectors like “.z18 .keyvalue {}”

wyo · 2010-12-09T07:47:49.000Z

E-Malte:

Another question, would be possible to compute all positions (coordinates) as in zoom level 18 and then zoom the map to the correct level by using transform and clipping?

This is actually possible without zooming and clipping by using the viewBox Element or if it should be more complex with a transform-Element.

Sorry I’m not familiar with the viewBox element.

E-Malte:

But it wouldn’t be possible to keep the same projection when scrolling far away, if you choose a viewport-depening projection (which usual tiles are). For smaller areas you can ignore it, and for larger ones you could choose a projection depending not on the viewport.

Well transforming (maybe also viewBox) could be handled as UTM coordinates are handled, just apply different transformation to different UTM zones. Of course this means the SVG has to be devided into these zones. BTW I don’t think people will edit the map in any of these levels albeit it might be good to keep an eye on this issue.

E-Malte:

When zooming in or out it should be possible to set some kind of zoom level to an Element, so that the style should be dependent on the zoom level…

As Paul already said, styling can depend on zoom levels.

What’s more interesting is, how to limit the stream of downloaded elements. As we currently seen the API is completely overloaded. Therefore we need to be able to filter elements either according to visiblity (styling) and/or to user requests. Also we need a caching structure which stores retrieved but invisible elements. Maybe this could be done inside the SVG itself.

Where are the rules for, which elements are retrieved in each level. I’d like to have this information combined into the styling. In other words whenever a style for an element in a level doesn’t exist, it’s not retrieved from the DB. Is it possible to check for the existens of a style and then set up a filter accordingly?

E-Malte:

Another solution for all that would be the usage of OpenLayers, as its Vector-Layer-Feature uses SVG itself, and you can access all attributes…

Can you explain this more?

Wyo

E-Malte · 2010-12-09T15:47:34.000Z

The viewBox-Attribute is an attribute which can be applied to the svg-root-Element.
It’s used like: “<svg … viewBox=‘ ’ >…” where those coordinates are handled the same like in the rectangle. This viewBox-rectangle is then zoomed into the drawing area (either set by height and width on the svg-root-Element or otherwise the whole “drawable” browser-window).
SVG-Spec to viewBox with some examples: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

If I understood UTM correctly, could be probably used as the SVG-Transformation only includes:

scaling
translation
rotation
skewing
combinations of it and everything else which can be displayed by an affine transformation in the style of
X’ = ( a b ) * X + ( e )
( c d ) ( f )
which is used in SVG this way: “<someelement transform=‘matrix(a, b, c, d, e, f)’ … />”
Wikipedia link to affine transformations: http://en.wikipedia.org/wiki/Affine_transformation
SVG-Spec to transform with further explaination: http://www.w3.org/TR/SVG/coords.html#TransformAttribute

I guess if one recalculates the matrix after every translation (moving) an scaling (zooming) of the map, it should be possible to display them without replacing the original coordinates.

What’s more interesting is, how to limit the stream of downloaded elements. As we currently seen the API is completely overloaded. Therefore we need to be able to filter elements either according to visiblity (styling) and/or to user requests. Also we need a caching structure which stores retrieved but invisible elements. Maybe this could be done inside the SVG itself.

Set CSS-Style: “display: none” to a specific class or id?

Where are the rules for, which elements are retrieved in each level. I’d like to have this information combined into the styling. In other words whenever a style for an element in a level doesn’t exist, it’s not retrieved from the DB. Is it possible to check for the existens of a style and then set up a filter accordingly?

This should be possible by some programming work, but it couldn’t send its result to the server, as it just replies all elements in a current bounding box.

OpenLayers is applicable to draw OSM-files onto its Vector layer. Probably one can use it to display and modify the OSM-Data.
This (quite old) exaple shows the basics of what I mean: http://openlayers.org/dev/examples/osm-layer.html
But it’s not fully working anymore, as the referenced tiles are not available anymore, and it uses API 0.5…

Malte

wyo · 2010-12-10T07:51:04.000Z

E-Malte:

I guess if one recalculates the matrix after every translation (moving) an scaling (zooming) of the map, it should be possible to display them without replacing the original coordinates.

Fine, this makes moving (panning) and zooming much easier.

E-Malte:

What’s more interesting is, how to limit the stream of downloaded elements…

This should be possible by some programming work, but it couldn’t send its result to the server, as it just replies all elements in a current bounding box.

As even Potlatch2 shows, retrieving all elements in levels > 15 are almost impossible. Data has to be reduced somehow. Therefore I started another thread so API 0.7 will have this features. So far API 0.6 can filter multiple elements yet I don’t know much but the API isn’t designed for as many elements as the SVG-Editor possibly needs.

Wyo

unxed · 2011-06-24T13:56:00.000Z

Any news on this editor?

paulwagener · 2011-06-28T12:43:41.000Z

unxed:

Any news on this editor?

Nope, as a proof of concept it is pretty much done. If a lot of people are interested in making this something full-fledged then I’ll start working on it again.

Janjko · 2011-09-20T10:45:19.000Z

I need this, I’m stuck on a java-flash-free machine

duncaninnes · 2012-07-12T09:40:49.000Z

The current state of Flash would suggest that working on a fully fledged HTML5 editor now would not be a waste of time.

There isn’t a browser out there (I’ll gloss over IE < 9 for now) that doesn’t have good HTLM5 support. Flash won’t die a death any time soon on the web, but the sooner projects turn to HTML5 the better.

Being a Sys Admin, I’m of little use other than for testing. But for now I’ll just add my voice to the “Please continue this development” crowd.

D