Place image over map

Are you having problems with using or developing a plugin? Let me know here.
loplo
Posts: 18
Joined: Wed Mar 12, 2014 6:31 am

Place image over map

Post by loplo » Thu Nov 27, 2014 9:30 pm

Hi guys,
I'm trying to place an image/banner into the lower left corner of the map, without any success.
Could anyone help me out?
Thanks in advance.

agw
Posts: 2247
Joined: Fri Feb 17, 2012 3:20 am

Re: Place image over map

Post by agw » Wed Dec 03, 2014 12:22 am

In order to do that you'll need to use the Google Maps API to add a control in the bottom-left of the map. That isn't too hard if you have a handle to the map - but the current version of VRS doesn't expose the native map handle, you have to do a bit of a song and a dance to get hold of it.

That's changed for the next release, there are two new functions on the map plugin that expose the native map handle and the name of the native map provider. The next release is just a few days away, rather than post code that will be out of date almost straight away if you could add a bump to this thread after the next version is released I'll post the JavaScript that you'll need to add an image to the map.

loplo
Posts: 18
Joined: Wed Mar 12, 2014 6:31 am

Re: Place image over map

Post by loplo » Sun Dec 07, 2014 2:38 pm

Thanks,
2.1.0 is out, so here's the bump ;)

agw
Posts: 2247
Joined: Fri Feb 17, 2012 3:20 am

Re: Place image over map

Post by agw » Sun Dec 07, 2014 7:06 pm

No worries :) This adds an HTML element to the bottom-left of the map. In this example it's just a DIV with Hello World! in it, but you can put anything you like in there. You just need to save this as an HTML file and then tell the custom content plugin to inject it at the end of the HEAD block for the pages that you want to add the control to:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            // Check to see if this version of the bootstrap raises an event once the map has initialised
            if(bootStrap.hookMapInitialised) {
                // It has the event - hook it
                bootStrap.hookMapInitialised(function(pageSettings) {
                    // This is called once the map has been loaded. The jQuery plugin for the map will be
                    // held in pageSettings.mapPlugin. Note that this event is also raised when the page
                    // is loaded in offline mode, so we need to check that mapPlugin is good before we
                    // use it. We're also going to be using stuff specific to Google Maps, so we need to
                    // make sure that the map plugin is wrapping Google Maps.
                    if(pageSettings.mapPlugin && pageSettings.mapPlugin.getNativeType() === 'GoogleMaps') {
                        // Get the Google Maps map handle
                        var map = pageSettings.mapPlugin.getNative();
                        
                        // See https://developers.google.com/maps/documentation/javascript/reference for the
                        // Google Maps API. In this example we are going to add HTML to the bottom-left of
                        // the map.
                        var controlJQuery = $('<div />')
                            .css({
                                width:          200,
                                height:         80,
                                background:     '#fff',
                                'font-size':    '2em'
                            })
                            .text('Hello World!');
                        var controlElement = controlJQuery[0];      // <-- Google Maps only accepts normal HTML nodes, not jQuery objects
                        
                        var existingControlsInBottomLeft = map.controls[google.maps.ControlPosition.BOTTOM_LEFT];
                        existingControlsInBottomLeft.push(controlElement);
                    }
                });
            }
        });
    }
</script>

loplo
Posts: 18
Joined: Wed Mar 12, 2014 6:31 am

Re: Place image over map

Post by loplo » Sun Dec 07, 2014 7:09 pm

Thank you.
I really appreciate it.

jaimehempke
Posts: 22
Joined: Sat Jun 09, 2012 2:06 am

Re: Place image over map

Post by jaimehempke » Fri Jan 23, 2015 1:42 am

Good evening, how you want the script to insert a picture in place of text, logo etc.

agw
Posts: 2247
Joined: Fri Feb 17, 2012 3:20 am

Re: Place image over map

Post by agw » Tue Jan 27, 2015 12:45 am

I'm not quite sure what you're asking there :) What is it that you want to do?

jaimehempke
Posts: 22
Joined: Sat Jun 09, 2012 2:06 am

Re: Place image over map

Post by jaimehempke » Tue Jan 27, 2015 8:51 am

what I want to do is with this script I want to put a jpg or png image in the text of the place Hello world! , Already tried and failed to do, I tried to insert a player also could not, I hope your help, your software is the best.

agw
Posts: 2247
Joined: Fri Feb 17, 2012 3:20 am

Re: Place image over map

Post by agw » Thu Feb 05, 2015 12:56 am

In the example where it has these lines:

Code: Select all

                        var controlJQuery = $('<div />')
                            .css({
                                width:          200,
                                height:         80,
                                background:     '#fff',
                                'font-size':    '2em'
                            })
                            .text('Hello World!');
you should be able to remove the .css and .text calls and replace them with a .html() call. In the .html() call you can have the elements that you want to add to the map:

Code: Select all

                        var controlJQuery = $('<div />')
                            .html('<img src="https://www.google.co.uk/images/srpr/logo11w.png" title="Google Logo" alt="Google Logo">');
If you want an image that's hosted locally, on the same machine that VRS is running on, then you will need to add a Site root folder using the Custom Content plugin as laid out here:

http://www.virtualradarserver.co.uk/Doc ... Files.aspx

jaimehempke
Posts: 22
Joined: Sat Jun 09, 2012 2:06 am

Re: Place image over map

Post by jaimehempke » Mon Feb 09, 2015 10:30 pm

Thank you my friend, worked perfectly.

Post Reply