HTML/Javascript 2D zoomable grid of square tile images
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
113
add a comment |
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
113
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 |
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
113
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
113
asked Nov 9 at 21:38
Douglas Kihlken
113
edited Nov 9 at 22:36
asked Nov 9 at 21:38
Douglas Kihlken
113
asked Nov 9 at 21:38
Douglas Kihlken
113
asked Nov 9 at 21:38
Douglas Kihlken
113
113
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
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
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
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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