forum.webdiplomacy.net

webDip dev coordination forum / public access todo list
It is currently Mon Aug 21, 2017 9:47 pm

All times are UTC




Post new topic Reply to topic  [ 59 posts ]  Go to page Previous  1, 2, 3, 4, 5, 6  Next
Author Message
 Post subject: Re: SVG Map
PostPosted: Tue Sep 01, 2009 11:12 pm 
Offline

Joined: Wed Jun 17, 2009 10:45 pm
Posts: 3
NPRZ wrote:
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.


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Fri Oct 30, 2009 4:42 am 
Offline
Site Admin

Joined: Sat Jun 28, 2008 6:24 am
Posts: 892
monkeyangst wrote:
Some of the ideas on this thread are quite good. I had been working on an SVG version of the map myself, which can be seen here:
http://phpdiplomacy.monkeylaw.org/map-svg.php?gameID=17&turn=3
(you can of course change the turn attribute around)

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 !


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Fri Oct 30, 2009 5:56 pm 
Offline

Joined: Wed Sep 09, 2009 2:37 pm
Posts: 156
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):

Code:
AddOutputFilterByType DEFLATE text/xml image/sgv+xml


By adding this one little line to .htaccess, my 411k svg file was transferred to the client in 108k (example used: http://beta.visitedmap.com/statesvg.php?showmap=7 ).

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.


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Sun Nov 01, 2009 1:29 am 
Offline
Site Admin

Joined: Sat Jun 28, 2008 6:24 am
Posts: 892
Interesting gilgatex, I wonder if there's a way to convert between SVG and VML. The problem with converting SVG to PNG is you lose the JavaScript interactiveness


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Sun Nov 01, 2009 2:22 pm 
Offline

Joined: Wed Sep 09, 2009 2:37 pm
Posts: 156
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.)


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Mon Nov 02, 2009 1:37 pm 
Offline

Joined: Wed Sep 09, 2009 2:37 pm
Posts: 156
I definitely want to push toward this now. I just created a map with 524 territories (35-player variaint :D ) 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.


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Mon Nov 02, 2009 2:03 pm 
Offline

Joined: Wed Sep 09, 2009 2:37 pm
Posts: 156
looks like it works with a gif. I'm just going to put in an "if png doesn't exist, look for gif" check in drawMap.php for now.


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Mon Nov 02, 2009 2:37 pm 
Offline
Site Admin

Joined: Sat Jun 28, 2008 6:24 am
Posts: 892
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


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Mon Nov 02, 2009 3:13 pm 
Offline

Joined: Wed Sep 09, 2009 2:37 pm
Posts: 156
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...


Top
 Profile  
 
 Post subject: Re: SVG Map
PostPosted: Mon Nov 02, 2009 4:40 pm 
Offline

Joined: Wed Sep 09, 2009 2:37 pm
Posts: 156
Hah! I tricked it! I have two map files, both with fewer than 256 colors, so I perform the fills on them individually, then merge them at the end :)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 59 posts ]  Go to page Previous  1, 2, 3, 4, 5, 6  Next

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


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

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group