HTML5 Editor proof of concept

Hi guys!

I wanted to post this to the mailinglist but for some reason it’s blocking me. So I’ll just post it here.

A few weeks ago there was talk about an iPad editor and that we should
instead work on an html5 editor because it would have more forward
compatibility. Inspired by this idea I set off to make an actual html5
Tada! The editor uses SVG which is pretty well supported in modern
browsers. Nodes are rendered as and ways are rendered as .
All interaction is done through javascript in onmouse* callbacks. It’s
still very rough around the edges, selecting nodes and ways shouldn’t be as
hard as it is now.

So here’s the good news:

  • It works in Firefox, Safari & Chrome (though Firefox works the best). I
    didn’t even bother testing it in IE.
  • Performance is surprisingly good, especially on Chrome.
  • It renders on the iPhone and presumably also the iPad!
  • It is possible to style the editor directly with css. It should be
    fairly easy to make them look identical to their bitmap counterparts.

But the bad news is that it’s impossible to control the editor on the
iPhone. This is because all zooming and dragging operations are hijacked by
Safari for controlling the browser viewport. I haven’t found a way to
disable this.

Is there any interest in making this a full-fledged official shiny html5
editor? I know the community isn’t very liberal towards new editors. So I’m
just going to throw this out there and see what you guys have to say.

Kind regards,

Lucky for me, I don’t read the mailing list.

Perfect! I wanted to do a similar project yet due to my limited time, I haven’t started. While my time still is rather limited, I can’t do much programming. But I can support you with ideas, critism, suggestion, tests and so on. Anything which doesn’t need much time.

So first, why did you choose SVG? I would have choosen Canvas instead. I haven’t really checked but guess Canvas are much simpler and need much less download capacity and performs better. Just think in a tight area there might be thousends of elements be downloaded and displayed. Openlayers already uses Canvas ( so it might be possible to share knowledge.

Please tell me your reasons for choosing SVG.


The reason I chose svg is that it’s more suitable for rendering vector data. Atleast I think, that’s what the internet says.
It’s also easier because I don’t have to worry about which ways to render, hopefully the browser does that for me in an efficient way. We should do a canvas version to see which performs better.

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, 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.


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.


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


Here are the sources:

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.


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

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

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

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?


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 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.


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