I'm curious, where did you guys source your vector-format map graphics for this, and what are you using to generate the SVG paths? (I'm guessing Monkey's source material didn't start out so highly stylized.)

I think the reason my map was so huge is that every territory had three shapes associated with it -- I spent a little time trying to get that reduced before other projects got in the way.

Where I got the map was... phpDiplomacy! I took the large map from the phpDip package, opened it in Illustrator, and traced it. I adjusted the settings to be intolerant of color variations, and voila! A vector-based Dip map.

I got a little disillusioned by the way it seems to slow down browsers... I've been thinking of simplifying the map a little, and am looking for ways to simplify the methods by which it adds the touches like outlines that I so like.

Anyone care to pool efforts?

I hadn't seen this up until now and I have to say your map looks just stunning, perhaps it could be adapted with fig's somehow to load in a reasonable time while still using those nice explosions, arrows, and country borders

By the way fig if you see this before I spot you on IM could you upload your svg map code? I'd like to carry on the work on it now that I've got javascript order creation going and XML maps are ready to be served, all the pieces seem to be there and now we just need to put them together !

I don't know how I missed this thread until now... I actually have a lot of experience working with SVG, php, mysql, and ajax!

Imagemagick has an excellent command-line converter for SVG. In the past, I've used a php script to create an svg file, call imagemagick to convert it to png, then output the png file instead. You really need to do this any time you are going to have zero interaction with the user.

I have a fair amount of experience getting SVG to work with various browsers (since it doesn't work natively with IE) on this one app I've been working on for a couple years:

If you want to see my work, go to http://beta.visitedmap.com/. All the county borders are stored in a geospacial mysql table. If you want to see the ajax interaction with the database, create an account, then go to State Map Selection and start clicking. The browser refreshes the svg file immediately while ajax works asynchronously in the background to update the database. It even works with IE 7 without the defunct adobe plugin (which was a PAIN to code, because I basically have to have an "if (IE)" before every single output, since the only native vector format for IE is Microsoft's VML, which is very similar, but not identical to SVG).

Another SVG trick that IMMENSELY sped things up was to set my .htaccess file to compress all svg files and let the client uncompress them. Really this is a good idea any time you have large uncompressed files of any kind. You can do that like this (if you have mod_deflate):

As far as the slowness of monkeyangst's svg, the slowness is basically the browser going "woah, waaaay too much information to handle all at once," and doesn't have an awful lot to do with server-side issues. In order to speed that up, he's going to have to make the svg a little less complicated. For example, the polygons in monkeyangst's SVG can be scaled all the way up to 100,000 x 80,000 pixels! His points range from 0.000 to 99.999. So say, for example, the largest you'd ever need to show the map is 2,000 x 1,600 pixels. I would write a script to go through the entire svg file and multiply every point by 20, then chop off the remainder (giving you a range from 0 to 2,000 instead, with no remainder). Then, while looping through the script, toss out redundant points. This will not only make the file size smaller because you don't have redundant points and thousands of decimal point "characters," but it also makes it easier for the browser to handle.

They are extremely similar. The biggest downside to VML is that you can't set a style in a group; you have to set the style in each individual polygon, but the format is almost exactly the same (<v:g> instead of <g>, etc.)

I definitely want to push toward this now. I just created a map with 524 territories (35-player variaint ) and I'm finding it impossible to work into the current map rendering system, because it can't be an indexed png, because it has to be more than 256 colors. imagecolorset doesn't seem to work with truecolor images because it ignores all indexes above the color count. I can't figure out a way around it.

Fair enough, though the next order code will have all the territories data (coordinates, country owning, name, etc) so hopefully in the future we'll be able to move it towards SVG/VML/canvas rather than server-side rendering

And nevermind on the gif, I accidentally saved as indexed and so it merged some of my territory colors. At least I got my points fine tuned Still gotta figure out how to have an indexed file format with greater than 256 colors...

Who is online

Users browsing this forum: No registered users and 1 guest

You cannot post new topics in this forumYou cannot reply to topics in this forumYou cannot edit your posts in this forumYou cannot delete your posts in this forumYou cannot post attachments in this forum