Jump to content

Making a map - how to use coordinates like on w3schools


Vihart
 Share

Recommended Posts

Im playing a browser game and ive joined an alliance, i was talking to my leader about having our own space on the net for the alliance to talk things out and most of all strategies we can use against other alliances. I then thought of a forum called evolliance that is used just for this purpose. But its used only for another browser game.Can i create an interactive map on a forum?If i cant intergrate this idea onto a map and have to create a website can i create log in system (any good websites with this kind of specific info would be very helpful)I would create the map as simple as possible - it would have a x and y axis and would be customizable to place cities and territories on it. Then you would click on an area and get specific information about it.Can all this be done by using only html and css?Im fairly new to html so i thought it would be a good idea to ask experienced programmers what they think of the idea, thanks.

Edited by Askey
Link to comment
Share on other sites

Can all this be done by using only html and css?
Yes, it could be done only using html, css and a serverside language, but it wouldn't be very responsive (imagine using a no-JS version of Google Maps). It depends on how advanced/complex you want it to be. You'd probably want to use JS. If you want to do something innovative, you could look into using the <canvas> element.
Link to comment
Share on other sites

Yes, it could be done only using html, css and a serverside language, but it wouldn't be very responsive (imagine using a no-JS version of Google Maps). It depends on how advanced/complex you want it to be. You'd probably want to use JS. If you want to do something innovative, you could look into using the <canvas> element.
hey thanks for information
Link to comment
Share on other sites

On w3schools on javascript it talks about coordinates but it doesnt give us the example of code used - i want to do exactly what it shows. Ive created the canvas the right size - i know how to pin point certain locations on the canvas (which is really cool) i was actually a little afraid about using javascript but its awesome Understanding CoordinatesThe fillRect method above had the parameters (0,0,150,75).This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).The canvas' X and Y coordinates are used to position drawings on the canvas.Mouse over the rectangle below to see the coordinates:Can someone direct me to a website that can show this example or help fill in the blanks please

Link to comment
Share on other sites

On w3schools on javascript it talks about coordinates but it doesnt give us the example of code used - i want to do exactly what it shows. Ive created the canvas the right size - i know how to pin point certain locations on the canvas (which is really cool) i was actually a little afraid about using javascript but its awesome Understanding CoordinatesThe fillRect method above had the parameters (0,0,150,75).This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).The canvas' X and Y coordinates are used to position drawings on the canvas.Mouse over the rectangle below to see the coordinates:Can someone direct me to a website that can show this example or help fill in the blanks please
Honestly, I've never worked with the canvas element personally. I've only seen demonstrations of its wonders. Sorry I can't be of more help, but the mozilla doc center is usually great at providing documentation and tutorials. Here's the canvas tutorial there: https://developer.mozilla.org/en/canvas_tutorialKeep in mind this is a relatively new technology. People will need to be using a modern browser in order to see your canvas element.edit: Also, if you want a quick example, the example the html5 spec gives is:
  // canvas is a reference to a <canvas> element  var context = canvas.getContext('2d');  context.fillRect(0,0,50,50);  canvas.setAttribute('width', '300'); // clears the canvas  context.fillRect(0,100,50,50);  canvas.width = canvas.width; // clears the canvas  context.fillRect(100,0,50,50); // only this square remains

You'll have to actually fill in the canvas variable with something like this at the top:

var canvas = document.getElementsByTagName('canvas')[0];

Edited by Dilated
Link to comment
Share on other sites

Honestly, I've never worked with the canvas element personally. I've only seen demonstrations of its wonders. Sorry I can't be of more help, but the mozilla doc center is usually great at providing documentation and tutorials. Here's the canvas tutorial there: https://developer.mozilla.org/en/canvas_tutorialKeep in mind this is a relatively new technology. People will need to be using a modern browser in order to see your canvas element.edit: Also, if you want a quick example, the example the html5 spec gives is:
  // canvas is a reference to a <canvas> element  var context = canvas.getContext('2d');  context.fillRect(0,0,50,50);  canvas.setAttribute('width', '300'); // clears the canvas  context.fillRect(0,100,50,50);  canvas.width = canvas.width; // clears the canvas  context.fillRect(100,0,50,50); // only this square remains

You'll have to actually fill in the canvas variable with something like this at the top:

var canvas = document.getElementsByTagName('canvas')[0];

thanks alot youve been very helpful again
Link to comment
Share on other sites

Javascript, HTML and CSS won't be any use without a server-side language to store all the information.You can make an interactive map, but without anything on the server-side only you will be able to see what you're doing on the map, and it won't get saved for next time you return to the page.

Link to comment
Share on other sites

Javascript, HTML and CSS won't be any use without a server-side language to store all the information.You can make an interactive map, but without anything on the server-side only you will be able to see what you're doing on the map, and it won't get saved for next time you return to the page.
Yes, I mentioned this above but I don't think I stressed it. Be prepared to code a backend and myriads of XHRs.
Link to comment
Share on other sites

Yes, I mentioned this above but I don't think I stressed it. Be prepared to code a backend and myriads of XHRs.
okay ive got it up and running on a website its not interactive and just gives a basic overview - but i would like to be able to hover my mouse over and get information about the specific dotshttp://hummingbird2.x10.mx/website%20creation/mainpage.htm
Link to comment
Share on other sites

As far as I know, there is no way to trigger an event in response to particular set of coordinates in a canvas.You will probably need to capture the mouseover or mousemove event of the whole canvas element, get the current coordinates of the pointer, and compare them to the coordinates of every city/territory/whatever on your map. Dpending on the number of coordinates you want to compare, this could get sluggish.In the long run, it might be more effective to create your image in a server-side language and create a map element along with it. The image map would respond very quickly to mouse/hover events.

Link to comment
Share on other sites

ok lets say im going to jump into server side languages to make my map more effective - which one do i use? there are so many :/ Which server side language is the best to use and how do i start off ? w3schools have tutorials on server side languages ?

Link to comment
Share on other sites

W3Schools has tutorials on PHP, ASP and ASP.NET.All server side scripting languages can do the same things. They're equally powerful.PHP has more people using it on this forum, and is generally more popular. Inherently, this means more users will be able to help you out if you use that and encounter problems. Just keep in mind that doesn't make ASP.NET any worse (ASP is worse than ASP.NET for various other reasons though, but that's another story...) or any other language not covered by W3Schools for that matter.

Link to comment
Share on other sites

thanks for the information guys youve been very helpful - well il have to look into php then thanks againOkay ive never downloaded or used php before - so ive made the plan and i would like you guys to check it and tell me if everythings fine or if i need to add something else.Create a free new domain website Download php - 2 types i can download 1 ->PHP 5.3.5 (tar.bz2) [10,553Kb] not sure what the difference is or if i need to download both 2 PHP 5.3.5 (tar.gz) [13,775Kb] Then i was going to use this free server host http://www.100webspace.com/order/ The preinstalled scripts ? few different types there of php should i download one of those ? or is all part of the package when i download php straight from the site ?When everythings finally set up i get to practice php for free it seems.Am i missing something in my cunning plan?

Edited by Askey
Link to comment
Share on other sites

If you go with a remote host you will not need to, and will not be able to, install PHP, as the host will have control over the server. Only if you plan to set up a webserver on a machine you have control over, such as a local computer, will you need to install the components yourself.gzip and bzip2 are just two different compression formats.

Link to comment
Share on other sites

If you go with a remote host you will not need to, and will not be able to, install PHP, as the host will have control over the server. Only if you plan to set up a webserver on a machine you have control over, such as a local computer, will you need to install the components yourself.gzip and bzip2 are just two different compression formats.
but i thought these servers supported php - thats what i typed in the internet - server host that supports php - it even says in the tutorial on w3 schools that if you dont have your own server you can use another thats supports php :/so basically are you saying that i dont need to download php just use the hosts or something? Edited by Askey
Link to comment
Share on other sites

What Synook said was if you rent space from a host, and they have PHP running in that space, then you

you will not need to, and will not be able to, install PHP, as the host will have control over the server
if they have PHP on there, you're all set. What might be important is the version of PHP they have installed, and what options they have enabled/disabled. If you download a server package to run it locally, you can change the settings there, but that's not to say those settings will match the configuration settings of your host. So figure out what you are trying to do, find a host with options for executing what stuff you need, and then get an AMP stack with a version of PHP that most closely meets those requirements so your testing environment as closely reflects what the live environment will be.edit: an no, you don't need to download PHP if you don't want to, but's it's much more convenient to be able to test locally instead of having to FTP your files everytime you want to test/check a one line change. Edited by thescientist
Link to comment
Share on other sites

What Synook said was if you rent space from a host, and they have PHP running in that space, then you if they have PHP on there, you're all set. What might be important is the version of PHP they have installed, and what options they have enabled/disabled. If you download a server package to run it locally, you can change the settings there, but that's not to say those settings will match the configuration settings of your host. So figure out what you are trying to do, find a host with options for executing what stuff you need, and then get an AMP stack with a version of PHP that most closely meets those requirements so your testing environment as closely reflects what the live environment will be.edit: an no, you don't need to download PHP if you don't want to, but's it's much more convenient to be able to test locally instead of having to FTP your files everytime you want to test/check a one line change.
thanks alot youve been a great help
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...