Interactive Map

[claire_bicknell]

Hi.

I am very new to VB.Net and am currently working on creating an interactive map for shopping centres across the UK. I want to create a hot spot for each region on the map.

So for example: I have an image of the uk. I want to click "Manchester" and then the details related to manchester shopping centre (i.e shops) can be seen on the following pages.

How do i create a hot spot initially? I have created a Picture Box and have uploaded my map. Now Im stuck....

Really needing your help. Look forward to hearing from you

 

[JohnH]

Define Rectangle or irregular shapes with GraphicsPath/Region. Rectangle has Contains method that can be used for hit-testing, Region has IsVisible method for same reason. You would use hit-testing with PictureBox events to display and activate those areas.

 

[claire_bicknell]

Hi John,

Thank you for your quick response!

I am very very new to all of this. How would these methods look? This has been landed on me and I am a vb.net novice.

 

[JohnH]

You should start by using help and other resource to learn about Rectangle, and GraphicsPath and Region classes if you want to go even more advanced.

 

[claire_bicknell]

This is really scaring me lol. Ive never done hotspots before. A really am a computer novice, but I will have a good read too!

 

[JohnH]

I'm going to give some samples that you can study that will give you the easiest start ever doing such a hotspot thingy. Even if you don't know Rectangle or any of this now, nothing of this is considered difficult, it's "beginner" code.

Declare a dictionary of places and their locations on map, you have to figure out the X/Y coordinates according to your actual image.

Private places As New Dictionary(Of String, Rectangle)

Private Sub LoadPlaces()
    places.Add("McDonalds", New Rectangle(10, 10, 10, 10))
    places.Add("Pizza Hut", New Rectangle(30, 30, 10, 10))
End Sub

LoadPlaces can be called for example when form loads, in Form Load event.

Use the Paint event of the Picturebox to paint hotspot markers so user can see on map where there is something of interest, this draw red ellipses in all defined rectangles:

Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
    For Each hotspot As Rectangle In places.Values
        e.Graphics.DrawEllipse(Pens.Red, hotspot)
    Next
End Sub

To show details when clicked on map use the MouseDown event, because this event expose the mouse location also, check all places for that location to see if user clicked a defined place. This sample just shows a messagebox with the name of the place.

Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
    For Each place As String In places.Keys
        If places(place).Contains(e.Location) Then
            MessageBox.Show("You clicked location: " & place)
            Exit For
        End If
    Next
End Sub

Now the user can see where there are places to click, and can click them to get some info, wouldn't it be nice if the name of the place displayed when user moved the mouse over the hotspots? Add a ToolTip component to the form, then different texts can be set with MouseMove event of the Picturebox like below. MouseMove event happens a lot, so this is a place to be careful about coding.

Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
    Dim current As String = Me.ToolTip1.GetToolTip(Me.PictureBox1)
    For Each place As String In places.Keys
        If places(place).Contains(e.Location) Then
            If current <> place Then
                Me.ToolTip1.Show(place, Me.PictureBox1)
                Exit For
            End If
        End If
    Next
End Sub

The AutoPopDelay for the ToolTip defaults to 5000, I changed it to 1000 in Designer properties window for it to vanish faster.

 

[claire_bicknell]

Thank you very much for taking the time to send me some sample code. I am going to have a go at it now and I will report back

 

[claire_bicknell]

Hi John,

Right I have tried inserting your sample code but i am not 100% sure where I am inserting it.

Public Class Form1
    Private places As New Dictionary(Of String, Rectangle)
    Private Sub LoadPlaces()
        places.Add("McDonalds", New Rectangle(10, 10, 10, 10))
        places.Add("Pizza Hut", New Rectangle(30, 30, 10, 10))
    End Sub
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load


    End Sub
    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        For Each hotspot As Rectangle In places.Values
            e.Graphics.DrawEllipse(Pens.Red, hotspot)
        Next
    End Sub
    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        For Each place As String In places.Keys
            If places(place).Contains(e.Location) Then
                MessageBox.Show("You clicked location: " & place)
                Exit For
            End If
        Next
    End Sub

    Private Sub StoresToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles StoresToolStripMenuItem.Click

        Stores.Show()
        Me.Hide()

    End Sub

    Private Sub FloorPlanToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles FloorPlanToolStripMenuItem.Click

        Floor_Plan.Show()
        Me.Hide()

    End Sub

Especially the picturebox paint method... i have tried inserting it into the form_load event but it doesn't like it.

Obviously i still have to amend the data to suit my current needs, like Manchester and not MacDonalds. Hehe.

Any more help would be much appreciated

 

[claire_bicknell]

Hmph... my friend has just tried it on her computer and it works, when i copy and paste into my vb project it doesn't work. I can't see the two little circles.

She is using version 2008 i am using 2005. Will that make a difference?

 

[claire_bicknell]

This is a copy of the correct code now:

Public Class Form1
    Private places As New Dictionary(Of String, Rectangle)
    Private Sub LoadPlaces()
        places.Add("McDonalds", New Rectangle(10, 10, 10, 10))
        places.Add("Pizza Hut", New Rectangle(30, 30, 10, 10))
    End Sub
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        LoadPlaces()

    End Sub
    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        For Each hotspot As Rectangle In places.Values
            e.Graphics.DrawEllipse(Pens.Red, hotspot)
        Next
    End Sub
    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        For Each place As String In places.Keys
            If places(place).Contains(e.Location) Then
                MessageBox.Show("You clicked location: " & place)
                Exit For
            End If
        Next
    End Sub

I know this produces two little circles on a friends computer.

I am using version 2005 and she is 2008. Does this make a difference as its not working on my pc?

 

[claire_bicknell]

I have been playing around with it and have managed to open up the file but it displays an error message:

Warning 1 Could not read state file "obj\Debug\Shopping Centre Application.vbproj.GenerateResource.Cache". Unable to cast object of type 'Microsoft.Build.Tasks.ResGenDependencies' to type 'Microsoft.Build.Tasks.StateFileBase'. Shopping Centre Application

But... i can click on the circles and the message box appears as expected.

I am at a total loss. Unfortunately I have to get this to work in version 2005 and not 2008

How frustrating!

 

[claire_bicknell]

Help would be greatly appreciated

I am sure it is just a minor amendment.

 

[JohnH]

I am using version 2005 and she is 2008. Does this make a difference as its not working on my pc?

No, code is .Net 2.0 compatible.

I have been playing around with it and have managed to open up the file but it displays an error message

I don't know what that error message means. It is not related to this code.

 

[claire_bicknell]

Do you have any idea as to what could be the problem then John?

I have been sat looking at the same issue for about 5hrs and I have no clue. It is the exact same code as i copied and pasted it into my project and still no circles are to be seen.

I am completely confused and frustrated as this is the key to getting everything else working.

Any ideas would be much appreciated? Perhaps I need to change a setting or something? I don't have a clue!

 

[JohnH]

No, I think it is a problem with your project files, resolve it or start a new one.