HTML5 Editor proof of concept

With rendering you mean converting OSM data into SVGs? I don’t think so.

Again I think browsers can render Canvas faster.

That would be perfect. I’ve played around a little with http://paulwagener.nl/osm/editor.xhtml, as soon as zoom level goes down your script uses too much time. With level 16 SeaMonkey starts complaining.

Could you tell me/us from which database (format) you start and if you convert to a single SVG or multiple.

Wyo

I transform .osm format to svg in javascript but it’s not as static as it sounds. All the ways and circles are part of the HTML dom so it’s easy to manipulate them. The tag in this context is only a container element.

I haven’t tested SeaMonkey but with Chrome and Firefox I haven’t had any performance problems. It only starts slowing down when it displays a significant chunk of downtown london, and even then it’s usable.

Seamonkey is using Gecko like Firefox and the difference is only the UI.

Well maybe my computer is becomming too slow and too old. Still we have to keep an eye on the performance.

I’ve now looked more closely into canvas and realized it’s not done via Dom. Then SVG might really be the better choice. Also SVG might be easier if style changes are wished.

Wyo

Could you tell me how to set up my own testing site? What are the requirements and what else is needed?

Wyo

Here are the sources:
http://trac.paulwagener.nl/browser/PaulWagener.nl/osm

If you comment out line 40 and re-enable line 42-45 you can even do without php.

PHP is no problem for me.

Could you change the web page so the map an the editor are next to each other. This would allow for a much better overview.

So far you style the vectors all in the same color, could you style at least some like they are done as in Potlatch? Just set up a starting css and I’ll all more colors according to the tags.

Wyo

I’ve enabled the ability to style ways and nodes according to their tags.

Are these the right sources? My page looks completely different.

Otti
PS I tried to reach you by email without success.

They were indeed different. For some reason trac got out of sync. Fixed now.

And my error was I didn’t saw the “original format” download link. See now http://www.orpatec.ch/osm/editor/editor.xhtml

I’ve commented out “parentNode.removeChild” in loadEditor and some other changes so that map and editor are both visible. Seems there’s a problem with exact sizing of the vectors.

BTW is it possible to add a title element to show the actual zoom level on the +/- handle? Or is such a feature missing in OpenLayers?

Your “editor.css”, does it have a similar structure as in OpenLayer? Is the format anywhere documented?

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

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.

Well how difficult is it to make it match?

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

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

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

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

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.

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