Making a map - how to use coordinates like on w3schools

[Vihart]

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.

[Dilated]

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.

[Vihart]

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

[Vihart]

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

[Dilated]

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];

[Vihart]

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

[Ingolme]

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.

[Dilated]

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.

[Vihart]

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

[jeffman]

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.

[Vihart]

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 ?

[boen_robot]

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.

[jeffman]

Another advantage to PHP is that the syntax and control structures are very similar to those in JavaScript. Learning one usually makes learning the other one easier.

[Vihart]

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?

[Synook]

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.

[Vihart]

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?

[thescientist]

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.

[Vihart]

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