Im not exactly sure how to implement this in JS.

So I want to have a 2d infinite map, but not tiled. The coordinates are there only so that if you are travelling around space you know in what coordinates you are. Or if I want to add a couple of things here and there I can specify the coordinates for the placement.

So the coordinates only serve as grid points, but how would I got about implementing this in JS?

Also, how would I go about storing the different things I want to add to the map. Meaning this is not procedural or anything, it's static, a static map.

Could I just use the canvas grid system?

  • 1
    \$\begingroup\$ I'm a bit confused... you want an "infinite space" but you also say it's "not procedural" just "a static map" ..so, are you planning to spend infinite time and infinite storage populating this infinite map statically? Or do you really want a finite map? Try describing in more detail what problem you're trying to solve. You mention the canvas grid system - if you try using that for what you want to achieve, do you hit any snags? Tell us about them. \$\endgroup\$
    – DMGregory
    Oct 5, 2016 at 22:04
  • \$\begingroup\$ @DMGregory I want an infinite "empty space". From there on I can add single elements into the map. So the players can go as far as they want, but there would be nothing there, only the coordinates. All objects would be added by hand. \$\endgroup\$ Oct 5, 2016 at 22:07
  • \$\begingroup\$ You appear to have it backwards. You normally start from a void and add limits on the edges of the world. Just skip that part. \$\endgroup\$
    – MickLH
    Oct 5, 2016 at 22:12

1 Answer 1


Simple Implementation

map = {
    this.mapObjects: [],
    this.myCoords: [0,0,0],
    this.whereAmI: function(){
    this.AddObjectToMap: function(obj,x,y,z){
        //assume obj contains it's own coordinates in the map.
        obj.x = x;
        obj.y = y;
        obj.z = z;
    this.findobj: function(x,y,z){
        for each (obj in this.mapObjects) {
            //will fail if the coords are stored as floats, doubles, etc.
            if ((x==obj.x) && (y==obj.y) && (z==obj.z)){
                return obj;

This implementation uses an implicit space of infinite size (without bounds). If your system had a fixed boundary (say 2000 x2000), an array would suffice, and would probably be better due to faster indicing. Since it isn't, I recommend using a list containing the map objects, which in turn contains their positions. The trade-off here lies in the speed of retrieval of objects from that list as when the list gets long, it'll take much longer to loop through it.

Personally, I'd recommend using a tree to store the map objects. It's more complex, but becomes much faster since tree mechanics could be exploited to remove sections of the search space rapidly. (see the binary tree or k-d tree on wikipedia for an example.) Unfortunately, the tradeoff here is the complexity, as you'd have to insert objects into the tree based upon their coordinates.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .