I'm developing a gps tracking app for android using custom SVG maps. I can print my exact position at the SVG map through the device's GPS but I'm having some difficulties when I want to pan/center the screen at my position. Basically the idea is to keep moving/panning the map automatically while i'm moving so the user won't have to do it by himself. I'm using the jquery.panzoom (https://github.com/timmywil/jquery.panzoom). Has anyone did this before, would appreciate any suggestions. Thanks
You could try using SVG fragment identifiers.
http://www.w3.org/TR/SVG11/linking.html#SVGFragmentIdentifiers
Basically you can supply a viewBox in the URL of the SVG you are linking to. That's assuming you are using an external SVG file (ie not embedded).
So for instance, if you want to show the top left 200x200 of an SVG, you can do:
http://url.of.my.svg/map.svg#svgView(viewBox(0,0,200,200))
An example: http://upload.wikimedia.org/wikipedia/commons/2/21/New_Zealand_location_map.svg#svgView(viewBox(800,1600,400,400))
Then when the GPS position changes, you just update the URL. It saves having to mess about with the contents of the file.
The only proviso is that I haven't checked that the Android WebView supports it. I'm assuming you are using a WebView??
Related
I am trying to make a copy of the popular browser game Travian.com. I am currently working on the maps and I was able to get the farms overview image as a png.
What I am trying to accomplish with that map is:
Each element (farm) should be clickable) and redirect to that specific farm page.
As you could see on the map, farms are not just simple squares.
Once I had the farms.png picture, I used on online tool to convert a png into a .svg file. Using a free software, I was able to draw circles around each map to build my svg.
This is the result:
I recently read about canvas and I was wondering if canvas would be a better option in my case rather using svg?
You need to try it yourself and see if it gets redrawn quickly enough that the game is sufficiently responsive for you. If the map is very detailed, the redraw may be too slow and make your game feel slow. You really need to try it and see. If it's too slow for you, then you may need to either:
use bitmap images, or
keep the maps as SVGs, but render them to a Canvas on first load. This way they'll be sharp at whatever resolution screen the user has.
Please can someone help?
I need to drag and drop small spot circles representing room sensors onto a floor Layout rendered inline (binary) into the browser.
How can I achieve this.
Download the SVG, add points via SVG program (for example InkScape), upload the SVG again.
If the SVG is displayed completely as a file in your browser (i.e. the URL ends with ".svg" or something like that), so the browser handles the drag and drop, which probably isn't implemented to work with SVG in any way, as your browser is probably not layed out to edit SVG files.
If the SVG is embedded somehow into an HTML site you might have a chance if you use JavaScript or something alike to edit the SVG in the browser, implying you can change the JavaScript on that site because you can access it or have a plugin for that.
Oh yeah, maybe there is a plugin for your browser to edit SVGs, who knows?
Can anyone tell me how I would add a label to the center of a polygon by way of kml like the ones in the link: http://maps.huge.info/zip.htm.. I don't want a marker and I don't need the info to pop up when its clicked, I need it to be there from load, it would just have the zip code for the particular polygon. I wont be drawing the entire US zip code, maybe just a few at a time. Oh, and I'm using mapquest API not google or anything else
Use the Leaflet.label plugin, that does exactly this.
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
I need to create a sprite graphic, I hope that's the right name for it, to use that with jQuery to move that graphic from position to position to make it look like a gif animation.
As I have 400 graphics (all the same size) which should become one single image later, is there a way to create that sprite automated with Photoshop CS5 or any other Software?
So that it will create that sprite image from all my 400 pics?
I was searching for such a thing now for weeks ...
http://css-sprit.es/
This service might help you.
Also google "generate sprite"
Some css sprite generator are already available. Just upload your images and it will automatically give u the sprite image file and css for it.
http://spritegen.website-performance.org
http://www.csssprites.com
http://csssprites.org
You can use sprite-me. Just bookmark the link provided in the website than open your website and run sprite-me, it will automatically show images used in the website in groups and when clicking on generate sprite, you will get sprite image and css.
I found a little tutorial explaining how to create sprites. It might help you to write your own java program.
https://sites.google.com/site/javagamescorner/home/creating-sprites