MAPS - Image very large

[cliv]

I have a very large image-map (gif and jpg), 18000x14000 pixel (about 10M).
Becouse is very large i split into pieces and save them into a database.
The user select a Piece from image and this is loading from database. The user can scroll BUT ONLY the piece of image....then load other piece if you want to scroll and so on....
How can i scroll with continuity (like google maps) ........(remember image is spli into pieces)???

Basicaly i split maps in 16 tiles and i need a simple function to calculate which tile to display when move from one to other...


I'm sory for my English.....Hope you understand me.

[Spoo]

cliv

I see that you too have looked into the GPS Maps thread.
Let me try to describe a variation that may make sense.

Suppose you have two pieces of paper, 8 inches by 16 inches,

The first is your current map (16 tiles, I'll assume a 4x4 "grid").
Lets say that the "tile" size is 2 inches by 4 inches. So, each
row has 4 "columns" (each 4 inches wide), and there are 4
rows (each 2 inches high).

The second piece of paper simply has a 2 inch by 4 inch
hole cut into it, roughly in the center of the piece of paper.

Now, conceptually, place this second piece of paper on top
of the first one. The second piece of paper acts as a "mask",
allowing you to see only a small portion of the map. If the
mask is held stationary, but the "map" is moved around under
it, you get the "scroll" effect of the Google map.

OK, so far, so good (I hope). How can you accomplish this
in VB? My approach would be to use 2 PictureBox controls
The mask would be PB1. The map would be PB2.

In design mode, place PB1 on your form. Then, create
PB2 to be "contained in" PB1. Let me know if this part is
confusing.. I can get into more detail.

Obviously, at this point, PB2 is smaller than PB1. However,
in code, you can manipulate various properties of PB2.
PB2.Height and PB2.Width can be set to values much larger
than those of PB1. And PB2.Top and PB2.Left can be changed
"on demand" to effect movement of the map while the mask
stays put. Setting PB2.Left to negative numbers will move it
to the left (exposing more of the map to the right). Setting PB2.Top
to negative numbers will move it up (exposing more of the map to
the bottom).

Thus, you could put your entire original 18000x14000 map in PB2, and
simply "move it around" behind the mask.

Hope this makes sense. Holler if you need more info.

Spoo

[cliv]

Thank you for answer. But.....the real problem is the picture-maps because is very large 10M.
It take a very long time to load this image into a picture box , and old computer crash.....so the only good solution i thing is to split map in 24 pieces(Grid)...and load them separately....one piese is about 400-700K and load very fast (the image-pieces are store in database)
If the user wish to view another grid, then click on picture box on left, and the grid load from database into the large picture from right.
Here he can scroll or zoom.
But the question still remain...How can i scroll with continuity from one grid to another?. I can't load the picture-maps into a single picture-box (too large)...

[Spoo]

cliv

OK, that info (that 1 PB is too CPU intensive) is helpful. I agree, using
the 24 "pieces" seems a good approach.

The "smooth scoll" feature might still be doable with a variation of my
earlier post.

before: PB1 is the mask, PB2 has entire map
alternate-1: PB1 is mask, PB2(1) to PB2(24) are used.
alternate-2: PB1 is the mask, PB2(0), PB2(1), PB2(2), PB2(3) have parts of map, reloaded upon demand.

Discussion:

Alt-1: This would be a brute-force approach. PB2 is turned into a control
array with 24 "elements", each one loaded with a piece of the map. This
would involve a fair amount of "housekeeping" as the Top and Left properties
of all 24 would need to be constantly changed, but it should be doable.
However, since we'd be loading all 24, it may end up taking as long to do
as the original solo PB2 concept.

Alt-2: Similar to alt-1, PB2 is a control array, but this time, only 4 would be
needed. I guess the dimensions of all 4 PB2's would be that of the mask itself.

- thus, if user happened to be exactly over one PB2, it would fill the mask
- but, more likely, a bit of each of the 4 PB2's would be needed.

Benefit: only 4 PB2's get loaded (faster)
Drawback: more "housekeeping" code needed. As some PB2's "scroll off",
they would all need to be reloaded with the next series of images. It would
sort of be a matter of "where the f--- are we?" Again, doable, but somewhat
more code would need to be used.

Do either of these two alternates seem acceptable? Hopefully the concept
behind each was presented to you sufficiently clearly. BTW, I've never
done this, so I'm pretty much shooting from the hip

Spoo

[technorobbo]

in a nutshell - here's some code:

Const picWidth = 1600
Const picHeight = 1200
Const slicesX = 4
Const sliceY = 4
Const sliceWidth = picWidth / slicesX
Const sliceHeight = picHeight / sliceY

Private Sub Form_Load()
Form1.ScaleMode = vbpixel
Picture1.AutoRedraw = True
Picture1.ScaleMode = vbpixel
HScroll1.Max = picWidth - sliceWidth - 1
VScroll1.Max = picHeight - sliceHeight - 1
renderPic
End Sub
Private Sub HScroll1_Change()
renderPic
End Sub
Private Sub HScroll1_Scroll()
renderPic
End Sub
Private Sub VScroll1_Change()
renderPic
End Sub

Private Sub VScroll1_Scroll()
renderPic
End Sub
Sub renderPic()
Dim picNum As Integer, xBase As Long, yBase As Long
Dim picName As String

picNum = Int(HScroll1.Value / sliceWidth) + Int(VScroll1.Value / sliceHeight) * slicesX
    picName = App.Path & "\js_" & (picNum + 1) & ".jpg"
xBase = HScroll1.Value Mod sliceWidth
yBase = VScroll1.Value Mod sliceHeight

Debug.Print xBase, yBase; picNum

    Me.Picture1.PaintPicture LoadPicture(picName), 0, 0, sliceWidth - xBase, sliceHeight - yBase, xBase, yBase, sliceWidth - xBase, sliceHeight - yBase

If xBase > 0 Then
    picName = App.Path & "\js_" & (picNum + 2) & ".jpg"
    Me.Picture1.PaintPicture LoadPicture(picName), sliceWidth - xBase, 0, xBase, sliceHeight - yBase, 0, yBase, xBase, sliceHeight - yBase
End If
If yBase > 0 Then
    picName = App.Path & "\js_" & (picNum + 5) & ".jpg"
    Me.Picture1.PaintPicture LoadPicture(picName), 0, sliceHeight - yBase, sliceWidth - xBase, yBase, xBase, 0, sliceWidth - xBase, yBase
End If
If xBase > 0 And yBase > 0 Then
    picName = App.Path & "\js_" & (picNum + 6) & ".jpg"
    Me.Picture1.PaintPicture LoadPicture(picName), sliceWidth - xBase, sliceHeight - yBase, xBase, yBase, 0, 0, xBase, yBase
End If
Me.Picture1.Refresh
End Sub

Here's a project with sample pictures :

[Spoo]

Nice map !!

[technorobbo]

Thanks - It's a place I'd like to visit. It has many dangerous curves.

[cliv]

Thanks! ....very interesting approach.I will use this.

THANK YOU AGAIN

[technorobbo]

cliv,

As per your PM request, I've updated my original post and made the picture container a picturebox. All Form refrences now apply to the picture box - note that autoredraw is true and scalemode is vbpixel is set in the code so you don't have to.

Also I rezipped the projectand I kept the same map that Spoo liked so much.

[cliv]

Thank You