HTML/Javascript 2D zoomable grid of square tile images
up vote
1
down vote
favorite
I need to display a grid of images of arbitrary length in tiles. I have the ability to lookup a position based on its x an y coordinates in the overall grid and retrieve an image source string. I also have where the "center" coordinate is. Is there a framework or library I can use to make this easy? I want to display a portion of a 2d array of images, and I need to be able to change the size of that portion. I could want to display 5x5 square images or 25x25 images, depending on the zoom factor. The overall map is essentially infinite, consisting of progressively generated data based on the input coordinates. I am at a complete loss of how to do this effectively and efficiently in terms of Html and javascript integration. how do I get the html to tell the javascript what coordinate it is trying to display so it can call the coordinatesToSrcString(x,y) method. Examples of methods I have written thus far are as follows. X and y coordinates can be any integer, negative or positive.
getCenter() //this method returns the current center point, an object
with keys x and y, holding integers
getZoomFactor() //this method gets the current zoom factor, or the
amount of tiles to display on a side. This will always be odd to allow
for a center tile, and no weird offset.
coordinatesToSrcString(x,y) //this method converts a set of
coordinates to the string that points to the image file to display at
that position.
How do I get this to work? Do I need to make an update method that needs to be called constantly to account for changes to the zoom factor or tiles since the data changes after user actions. Is there a way to have a framework that will keep this updated on data changes or constantly up to date?
javascript html frontend web-development-server
asked Nov 9 at 21:38
Douglas Kihlken
133
add a comment |
up vote
1
down vote
favorite
I need to display a grid of images of arbitrary length in tiles. I have the ability to lookup a position based on its x an y coordinates in the overall grid and retrieve an image source string. I also have where the "center" coordinate is. Is there a framework or library I can use to make this easy? I want to display a portion of a 2d array of images, and I need to be able to change the size of that portion. I could want to display 5x5 square images or 25x25 images, depending on the zoom factor. The overall map is essentially infinite, consisting of progressively generated data based on the input coordinates. I am at a complete loss of how to do this effectively and efficiently in terms of Html and javascript integration. how do I get the html to tell the javascript what coordinate it is trying to display so it can call the coordinatesToSrcString(x,y) method. Examples of methods I have written thus far are as follows. X and y coordinates can be any integer, negative or positive.
getCenter() //this method returns the current center point, an object
with keys x and y, holding integers
getZoomFactor() //this method gets the current zoom factor, or the
amount of tiles to display on a side. This will always be odd to allow
for a center tile, and no weird offset.
coordinatesToSrcString(x,y) //this method converts a set of
coordinates to the string that points to the image file to display at
that position.
How do I get this to work? Do I need to make an update method that needs to be called constantly to account for changes to the zoom factor or tiles since the data changes after user actions. Is there a way to have a framework that will keep this updated on data changes or constantly up to date?
javascript html frontend web-development-server
asked Nov 9 at 21:38
Douglas Kihlken
133
pixi js, not saying this from experience though
– Vitaliy Terziev
Nov 9 at 22:45
It sounds like you want to use leaflet.js with some images. Check this out: leafletjs.com/examples/crs-simple/crs-simple.html If you have a huge image with all of your cells, you can create the depth tiles by installing gdal (a GIS program) then using gdal2tiles.py. Implementing this from scratch will be nontrivial, but if you're feeling ambitious you could render to WebGL for performance (pixi.js can render to webgl for you). If your number of images is small, and you want to build from scratch, I'd use d3.js.
– duhaime
Nov 9 at 22:49
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I need to display a grid of images of arbitrary length in tiles. I have the ability to lookup a position based on its x an y coordinates in the overall grid and retrieve an image source string. I also have where the "center" coordinate is. Is there a framework or library I can use to make this easy? I want to display a portion of a 2d array of images, and I need to be able to change the size of that portion. I could want to display 5x5 square images or 25x25 images, depending on the zoom factor. The overall map is essentially infinite, consisting of progressively generated data based on the input coordinates. I am at a complete loss of how to do this effectively and efficiently in terms of Html and javascript integration. how do I get the html to tell the javascript what coordinate it is trying to display so it can call the coordinatesToSrcString(x,y) method. Examples of methods I have written thus far are as follows. X and y coordinates can be any integer, negative or positive.
getCenter() //this method returns the current center point, an object
with keys x and y, holding integers
getZoomFactor() //this method gets the current zoom factor, or the
amount of tiles to display on a side. This will always be odd to allow
for a center tile, and no weird offset.
coordinatesToSrcString(x,y) //this method converts a set of
coordinates to the string that points to the image file to display at
that position.
How do I get this to work? Do I need to make an update method that needs to be called constantly to account for changes to the zoom factor or tiles since the data changes after user actions. Is there a way to have a framework that will keep this updated on data changes or constantly up to date?
javascript html frontend web-development-server
asked Nov 9 at 21:38
Douglas Kihlken
133
I need to display a grid of images of arbitrary length in tiles. I have the ability to lookup a position based on its x an y coordinates in the overall grid and retrieve an image source string. I also have where the "center" coordinate is. Is there a framework or library I can use to make this easy? I want to display a portion of a 2d array of images, and I need to be able to change the size of that portion. I could want to display 5x5 square images or 25x25 images, depending on the zoom factor. The overall map is essentially infinite, consisting of progressively generated data based on the input coordinates. I am at a complete loss of how to do this effectively and efficiently in terms of Html and javascript integration. how do I get the html to tell the javascript what coordinate it is trying to display so it can call the coordinatesToSrcString(x,y) method. Examples of methods I have written thus far are as follows. X and y coordinates can be any integer, negative or positive.
getCenter() //this method returns the current center point, an object
with keys x and y, holding integers
getZoomFactor() //this method gets the current zoom factor, or the
amount of tiles to display on a side. This will always be odd to allow
for a center tile, and no weird offset.
coordinatesToSrcString(x,y) //this method converts a set of
coordinates to the string that points to the image file to display at
that position.
How do I get this to work? Do I need to make an update method that needs to be called constantly to account for changes to the zoom factor or tiles since the data changes after user actions. Is there a way to have a framework that will keep this updated on data changes or constantly up to date?
javascript html frontend web-development-server
javascript html frontend web-development-server
asked Nov 9 at 21:38
Douglas Kihlken
133
asked Nov 9 at 21:38
Douglas Kihlken
133
edited Nov 9 at 22:36
asked Nov 9 at 21:38
Douglas Kihlken
133
asked Nov 9 at 21:38
Douglas Kihlken
133
asked Nov 9 at 21:38
Douglas Kihlken
133
133
pixi js, not saying this from experience though
– Vitaliy Terziev
Nov 9 at 22:45
It sounds like you want to use leaflet.js with some images. Check this out: leafletjs.com/examples/crs-simple/crs-simple.html If you have a huge image with all of your cells, you can create the depth tiles by installing gdal (a GIS program) then using gdal2tiles.py. Implementing this from scratch will be nontrivial, but if you're feeling ambitious you could render to WebGL for performance (pixi.js can render to webgl for you). If your number of images is small, and you want to build from scratch, I'd use d3.js.
– duhaime
Nov 9 at 22:49
add a comment |
pixi js, not saying this from experience though
– Vitaliy Terziev
Nov 9 at 22:45
It sounds like you want to use leaflet.js with some images. Check this out: leafletjs.com/examples/crs-simple/crs-simple.html If you have a huge image with all of your cells, you can create the depth tiles by installing gdal (a GIS program) then using gdal2tiles.py. Implementing this from scratch will be nontrivial, but if you're feeling ambitious you could render to WebGL for performance (pixi.js can render to webgl for you). If your number of images is small, and you want to build from scratch, I'd use d3.js.
– duhaime
Nov 9 at 22:49
pixi js, not saying this from experience though
– Vitaliy Terziev
Nov 9 at 22:45
pixi js, not saying this from experience though
– Vitaliy Terziev
Nov 9 at 22:45
It sounds like you want to use leaflet.js with some images. Check this out: leafletjs.com/examples/crs-simple/crs-simple.html If you have a huge image with all of your cells, you can create the depth tiles by installing gdal (a GIS program) then using gdal2tiles.py. Implementing this from scratch will be nontrivial, but if you're feeling ambitious you could render to WebGL for performance (pixi.js can render to webgl for you). If your number of images is small, and you want to build from scratch, I'd use d3.js.
– duhaime
Nov 9 at 22:49
It sounds like you want to use leaflet.js with some images. Check this out: leafletjs.com/examples/crs-simple/crs-simple.html If you have a huge image with all of your cells, you can create the depth tiles by installing gdal (a GIS program) then using gdal2tiles.py. Implementing this from scratch will be nontrivial, but if you're feeling ambitious you could render to WebGL for performance (pixi.js can render to webgl for you). If your number of images is small, and you want to build from scratch, I'd use d3.js.
– duhaime
Nov 9 at 22:49
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233574%2fhtml-javascript-2d-zoomable-grid-of-square-tile-images%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
pixi js, not saying this from experience though
– Vitaliy Terziev
Nov 9 at 22:45
It sounds like you want to use leaflet.js with some images. Check this out: leafletjs.com/examples/crs-simple/crs-simple.html If you have a huge image with all of your cells, you can create the depth tiles by installing gdal (a GIS program) then using gdal2tiles.py. Implementing this from scratch will be nontrivial, but if you're feeling ambitious you could render to WebGL for performance (pixi.js can render to webgl for you). If your number of images is small, and you want to build from scratch, I'd use d3.js.
– duhaime
Nov 9 at 22:49