Draw a polyline on Google map via plugin ?

Are you having problems with using or developing a plugin? Let me know here.
agw
Posts: 2248
Joined: Fri Feb 17, 2012 3:20 am

Re: Draw a polyline on Google map via plugin ?

Post by agw » Thu Oct 02, 2014 12:32 am

Sorry for the delay. When you say "change the marker icon", do you mean add a marker with a custom image or replace the aircraft marker with your own image?

If you want to add markers with your own image then you need to use the custom content plugin to serve the images. You can follow the instructions here, except you don't need to copy any existing files into the root folder that you create, you just need to add your images:

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

So if the custom content plugin was configured to serve files from c:\custom, and you have an image called "Marker.png" that you want to access from /VirtualRadar/Images/Marker.png then you would create a folder called c:\custom\Images and copy the PNG into that.

If you want to replace the aircraft marker icon then you can't at the moment, the aircraft marker icons are held in resources and can't be replaced. That will change in a future version.

YSWG
Posts: 18
Joined: Thu Oct 30, 2014 1:56 pm
Location: Wagga Wagga

Re: Draw a polyline on Google map via plugin ?

Post by YSWG » Tue Nov 04, 2014 4:52 am

I've used the code posted by vladkokrstevski (last post on page one) but if I have icon in the code (eg: "icon: 'YSWG.png',") the icons don't show (the file is in C:\Users\YSWG\Documents\VRS and in the image folder) but not including icon in the code, you end up with the ugly Google icon.
Capture.PNG
Capture.PNG (47.06 KiB) Viewed 4851 times

T-EGJA1
Posts: 107
Joined: Sun Sep 08, 2013 12:11 am
Location: Mid-Devon, UK

Re: Draw a polyline on Google map via plugin ?

Post by T-EGJA1 » Tue Nov 04, 2014 10:08 am

I ran into the same problem when I tried that script - in fact, when I specified my own icon, not only did it not show any marker icons at all, but the aircraft icons disappeared as well!

I got around it by following Andrew's second suggestion of using the Google Maps map handle directly as in the script below:

Code: Select all

    <script type="text/javascript">
        if(VRS && VRS.globalDispatch && VRS.serverConfig) {
            VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
                // Hook the event that is raised after the page has finished initialising.
                bootStrap.hookInitialised(function(pageSettings) {
                    // Check that there's a map on the page
                    if(pageSettings.mapPlugin) {
                        // The map plugin does not expose the underlying Google Maps map handle.
                        // To get that we can cheat by creating an invisible marker, extracting
                        // the handle from that and then destroying it. This method will only work
                        // while the VRS map plugin is wrapping Google maps.
                        var mapPlugin = pageSettings.mapPlugin;
                        var dummyMarker = mapPlugin.addMarker('dummyMarkerId', {
                            position: { lat: 0, lng: 0 },
                            visible:  false
                        });
                        var map = dummyMarker.marker.getMap();
                        mapPlugin.destroyMarker(dummyMarker);

                        var nativeMarker = new google.maps.Marker({
                            map:      map,
                            position: new google.maps.LatLng(50.7344, -3.4139),
							title:    'Exeter, EXT, EGTE' ,    // Tooltip
 							icon: 'MapSymbols/airport.png'
                        });
										
						var nativeMarker = new google.maps.Marker({
                            map:      map,
							position: new google.maps.LatLng(51.3828, -2.7192),
							title: 'Bristol, BRS, EGGD',
 							icon: 'MapSymbols/airport.png'
                       });

						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/airport.png',
							title: 'Cardiff, CWL, EGFF',
							position: new google.maps.LatLng(51.3967, -3.3433)
                       });
					   
						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/airport.png',
							title: 'Bournemouth, BOH, EGHH',
							position: new google.maps.LatLng(50.7800, -1.8425)
                       });
					   
						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/airport.png',
							title: 'Heathrow, LHR, EGLL',
							position: new google.maps.LatLng(51.4775, -0.4614)
                       });
					   				   
						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/airport.png',
							title: 'Gatwick, LGW, EGKK',
							position: new google.maps.LatLng(51.1481, -0.1903)
                       });
					   				   
						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/mil_airbase.png',
							title: 'Fairford, FFD, EGVA',
							position: new google.maps.LatLng(51.6822, -1.7900)
                       });

						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/mil_airbase.png',
							title: 'Yeovilton, YEO, EGDY, VL',
							position: new google.maps.LatLng(51.0037, -2.6488)
                       });
					   
						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/mil_airbase.png',
							title: 'Culdrose, EGDR, CU',
							position: new google.maps.LatLng(50.086092, -5.255711)
                       });
						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/mil_airbase.png',
							title: 'Brize Norton, BZZ, EGVN',
							position: new google.maps.LatLng(51.7500, -1.5836)
                       });

						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/mil_airbase.png',
							title: 'St Athan, DGX, EGDX',
							position: new google.maps.LatLng(51.4047, -3.4358)
                       });

						var nativeMarker = new google.maps.Marker({
							map:      map,
							icon: 'MapSymbols/mil_airbase.png',
							title: 'Boscombe Down, EGDM',
							position: new google.maps.LatLng(51.1522, -1.7475)
                       });


					}
                }, this);
            });
        }
    </script>
Then in Virtual Radar Server > Tools > Plugins > Custom Content ..... I specified the "Site root folder" as C:\VRS (my icon .png files are located in C:\VRS\MapSymbols) ..... this works for me .....
map markers.JPG
map markers.JPG (119.48 KiB) Viewed 4848 times
Hope this helps.
Terry

jonfear
Posts: 365
Joined: Sat Feb 09, 2013 12:15 pm
Location: Wick St Lawrence
Contact:

Re: Draw a polyline on Google map via plugin ?

Post by jonfear » Tue Nov 04, 2014 1:13 pm

Terry

Those Icons are really nice. I need to get Andrew to deploy something like that worldwide for the top civil and mil bases!

Jon
http://www.360radar.co.uk, the new name for MLAT Radar in the UK and Western Europe.

Former PP feeder Bm. No longer feeding. I do not have time to sort out imaginary problems with NTP
when it has been working fine for 2+ Years.

YSWG
Posts: 18
Joined: Thu Oct 30, 2014 1:56 pm
Location: Wagga Wagga

Re: Draw a polyline on Google map via plugin ?

Post by YSWG » Tue Nov 04, 2014 3:56 pm

Cheers, it worked and thank you for posting it up! :) Was pulling my hair out on trying to get it to work.

Still needs more work (making more graphics and adding more airports/fields/helipads), though may end up using the same graphic package you used.
Capture 1.jpg
Capture 1.jpg (96.56 KiB) Viewed 4843 times

T-EGJA1
Posts: 107
Joined: Sun Sep 08, 2013 12:11 am
Location: Mid-Devon, UK

Re: Draw a polyline on Google map via plugin ?

Post by T-EGJA1 » Tue Nov 04, 2014 8:02 pm

Guys, the icons I use came from here: https://openclipart.org/collection/coll ... yNico/7797 (Air Traffic Control map symbols) - free to download and use, just need re-sizing as appropriate.
Terry

jfm
Posts: 82
Joined: Thu May 10, 2012 4:09 pm

Re: Draw a polyline on Google map via plugin ?

Post by jfm » Fri Jan 16, 2015 5:07 pm

T-EGJA1 wrote:I got around it by following Andrew's second suggestion of using the Google Maps map handle directly as in the script below:
Thanks T-EGJA1! I took your code and changed it a bit to read markers from JSON, which it just loops through.

Code: Select all

var json = [
{"name":"BALMORAL MB - NDB BM", "lat":"50.137222", "lng":"-97.31", "type":"ndb"},
{"name":"BERENS RIVER MB - NDB YBV", "lat":"52.354167", "lng":"-97.024722", "type":"ndb"},
{"name":"BRANDON MB - NDB BR", "lat":"49.908056", "lng":"-100.073889", "type":"ndb"},
{"name":"DAUPHIN MB - NDB DN", "lat":"51.098056", "lng":"-100.062222", "type":"ndb"},
{"name":"DEER LAKE ONTARIO", "lat":"52.648889", "lng":"-94.057222", "type":"ndb"},
{"name":"DELTA, MANITOBA-NDB UDE", "lat":"50.166389", "lng":"-98.3075", "type":"ndb"},
{"name":"DRYDEN ONTARIO", "lat":"49.864444", "lng":"-92.849167", "type":"ndb"},
{"name":"DRYDEN ONTARIO", "lat":"49.801111", "lng":"-92.645", "type":"ndb"},
{"name":"FT FRANCIS ONTARIO", "lat":"48.689722", "lng":"-93.539167", "type":"ndb"},
{"name":"IGNACE ONTARIO", "lat":"49.433889", "lng":"-91.726667", "type":"ndb"},
{"name":"KENORA", "lat":"49.7925", "lng":"-94.424444", "type":"ndb"},
{"name":"LA SALLE, MANITOBA-NDB LF", "lat":"49.6425", "lng":"-97.3", "type":"ndb"},
{"name":"PIKANGIKUM", "lat":"51.823056", "lng":"-93.973333", "type":"ndb"},
{"name":"RED LAKE, ON (RCO) (AWOS)", "lat":"51.061111", "lng":"-93.785", "type":"ndb"},
{"name":"SIOUX LOOKOUT ONTARIO", "lat":"50.118056", "lng":"-91.898056", "type":"ndb"},
{"name":"ST. ANDREWS, MANITOBA-NDB AV", "lat":"50.064167", "lng":"-97.045", "type":"ndb"},
{"name":"WINNIPEG, MANITOBA-NDB WG", "lat":"49.899167", "lng":"-97.348889", "type":"ndb"},
{"name":"WINNIPEG, MB - NDB", "lat":"49.963889", "lng":"-97.321944", "type":"ndb"},
{"name":"WINNIPEG, MB - NDB", "lat":"49.83", "lng":"-97.256944", "type":"ndb"},
{"name":"WINNIPEG, MB - NDB", "lat":"49.989167", "lng":"-97.219722", "type":"ndb"},
{"name":"WINNIPEG, MB - NDB", "lat":"49.833889", "lng":"-97.144167", "type":"ndb"},
{"name":"BRANDON, MANITOBA-VOR/DME", "lat":"49.909722", "lng":"-99.945556", "type":"vordme"},
{"name":"BROADVIEW, SASK (VOR)", "lat":"50.363056", "lng":"-102.540556", "type":"vordme"},
{"name":"DAUPHIN, MANITOBA-VOR/DME", "lat":"51.105", "lng":"-100.052778", "type":"vordme"},
{"name":"LANGRUTH, MANITOBA-VOR/DME", "lat":"50.422222", "lng":"-98.724167", "type":"vordme"},
{"name":"RED LAKE, ONT. (VOR/DME)", "lat":"51.071389", "lng":"-93.761667", "type":"vordme"},
{"name":"SIOUX NARROWS BUNNY LAKE, VOR-DME", "lat":"49.476944", "lng":"-94.047222", "type":"vordme"},
{"name":"WINNIPEG VORTAC", "lat":"49.927778", "lng":"-97.239167", "type":"vortac"}
];
		
		json.forEach(function(obj) {
			if (obj.type == 'vordme') {
				var icon = 'vor-dme-marker.png';
			} else if (obj.type == 'vortac') {
				var icon = 'vortac-marker.png';
			} else if (obj.type == 'ndb') {
				var icon = 'ndb-marker.png';
			} else if (obj.type == 'airport') {
				var icon = 'large-airport-marker.png';
			} else {
				var icon = 'notfound.png';
			}
			var nativeMarker = new google.maps.Marker({
				map: map,
				position: new google.maps.LatLng(obj.lat, obj.lng),
				title: obj.name,
				icon: icon
			}); 
		});

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

Re: Draw a polyline on Google map via plugin ?

Post by jaimehempke » Tue Jun 30, 2015 7:36 pm

Hello my friend, I have a new question.
It is possible to view some of the entered items: polyline, icons as VOR etc appear only at a certain level of zoom, low airways, high airways, noting that already have these airways and icons on my map.
www.trafegoaereo.com

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

Re: Draw a polyline on Google map via plugin ?

Post by agw » Sun Jul 05, 2015 3:05 am

Yes, but it's going to be a bit more work :) You will probably want to rearrange your script so that it goes through two phases:

Phase one - create the elements that you want to show on the map but do not add them to the map
Phase two - write a function that hides and shows those elements depending on the current zoom level

After that you just need to call the new function that hides and shows elements after the page has initialised, and every time the user changes the zoom level.

This example checks to make sure that the site is using Google Maps and then creates two markers. After creating both markers it then calls "applyMarkers", which shows one of the markers depending on the current zoom level for the site. Then it hooks an event that gets called whenever the zoom level changes, and that function again calls applyMarkers to get the right marker on display.

The example uses the functions that were added to the map plugin to report on which map provider it's using ("GoogleMaps" for Google Maps) and to return the native map handle so that you don't have to use the kludge that I had in an earlier post in this thread.

Code: Select all

<script type="text/javascript">
    var _MapPlugin;
    var _LowLevelMarker;
    var _HighLevelMarker;
    
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            // Hook the event that is raised after the page has finished initialising.
            bootStrap.hookInitialised(function(pageSettings) {
                // Check that there's a map on the page and that it's a Google Maps map
                if(pageSettings.mapPlugin && pageSettings.mapPlugin.getNativeType() === 'GoogleMaps') {
                    _MapPlugin = pageSettings.mapPlugin;
                    
                    // Create the markers but don't add them to the map
                    _LowLevelMarker = new google.maps.Marker({
                        position: new google.maps.LatLng(51.4, -0.6),
                        title:    'Low level marker'
                    });
                    _HighLevelMarker = new google.maps.Marker({
                        position: new google.maps.LatLng(51.4, -0.4),
                        title:    'High level marker'
                    });
                    
                    // Show whatever marker is appropriate for the current zoom level
                    applyMarkers();
                    
                    // Hook the function that gets called when the zoom level changes
                    _MapPlugin.hookZoomChanged(function() { applyMarkers(); }, this);
                }
            }, this);
        });
    }
    
    
    function applyMarkers()
    {
        if(_MapPlugin) {
            // Get the native Google Maps handle
            var googleMap = _MapPlugin.getNative();
            
            if(_MapPlugin.getZoom() > 8) {
                _LowLevelMarker.setMap(googleMap);  // Show low level marker
                _HighLevelMarker.setMap(null);      // Hide high level marker
            } else {
                _LowLevelMarker.setMap(null);       // Hide low level marker
                _HighLevelMarker.setMap(googleMap); // Show high level marker
            }
        }
    }
</script>

loww
Posts: 115
Joined: Sun Jun 28, 2015 10:55 am
Location: LOWW
Contact:

Re: Draw a polyline on Google map via plugin ?

Post by loww » Thu Jul 09, 2015 7:13 pm

here is the parking position for LOWW in the WG84 (or what the use) format:

Code: Select all

A81,48 07 33.88,016 32 09.31
A82,48 07 33.70,016 32 09.17
A83,48 07 33.06,016 32 08.66
A84,48 07 32.45,016 32 08.22
A85,48 07 32.25,016 32 08.08
A91,48 07 24.01,016 32 25.67
A92,48 07 25.92,016 32 27.83
A93,48 07 25.47,016 32 32.83
A94,48 07 24.44,016 32 34.85
A95,48 07 24.02,016 32 37.31
A96,48 07 24.44,016 32 35.62
A97,48 07 21.25,016 32 44.57
A98,48 07 20.68,016 32 46.32
A99,48 07 21.39,016 32 44.86
B51,48 07 17.83,016 32 57.12
B52,48 07 18.26,016 32 58.61
B53,48 07 17.21,016 32 59.03
B61,48 07 16.59,016 33 00.92
B62,48 07 17.02,016 33 02.42
B63,48 07 15.97,016 33 02.83
B71,48 07 19.69,016 33 07.57
B72,48 07 18.47,016 33 06.68
B73,48 07 17.02,016 33 05.62
B74,48 07 15.66,016 33 04.74
B75,48 07 14.47,016 33 03.79
B81,48 07 18.31,016 33 12.73
B82,48 07 17.05,016 33 11.81
B83,48 07 15.76,016 33 10.88
B84,48 07 14.41,016 33 09.98
B85,48 07 13.10,016 33 09.03
B91,48 07 17.65,016 33 18.14
B92,48 07 16.47,016 33 17.29
B93,48 07 15.21,016 33 16.37
B94,48 07 13.94,016 33 15.45
B95,48 07 12.67,016 33 14.53
B96,48 07 11.41,016 33 13.61
C31,48 07 16.20,016 33 25.30
C32,48 07 14.94,016 33 24.38
C33,48 07 13.69,016 33 23.47
C34,48 07 12.43,016 33 22.56
C35,48 07 11.38,016 33 21.81
C36,48 07 10.58,016 33 21.89
C37,48 07 09.85,016 33 23.08
C38,48 07 09.04,016 33 25.56
C39,48 07 09.03,016 33 27.23
C40,48 07 09.99,016 33 28.04
C41,48 07 11.34,016 33 29.44
C42,48 07 12.59,016 33 30.36
D21,48 07 07.66,016 33 37.09
D22,48 07 06.14,016 33 37.11
D23,48 07 05.27,016 33 36.98
D24,48 07 04.88,016 33 37.89
D25,48 07 04.10,016 33 39.50
D26,48 07 04.44,016 33 40.98
D27,48 07 03.89,016 33 40.68
D28,48 07 05.08,016 33 42.35
D29,48 07 05.83,016 33 42.96
E41,48 06 59.73,016 33 48.28
E42,48 06 58.94,016 33 51.51
E43,48 06 58.19,016 33 53.79
E44,48 06 57.45,016 33 56.07
E45,48 06 56.70,016 33 58.36
E46,48 06 55.58,016 34 01.82
E47,48 06 54.83,016 34 04.10
E48,48 06 52.22,016 34 12.12
E49,48 06 51.54,016 34 14.20
E50,48 06 50.86,016 34 16.29
E51,48 06 50.18,016 34 18.38
E52,48 06 49.47,016 34 20.56
E97,48 06 53.55,016 34 14.34
E98,48 06 52.55,016 34 17.52
E99,48 06 51.50,016 34 20.65
F01,48 07 06.25,016 33 54.92
F03,48 07 04.72,016 33 57.05
F05,48 07 05.15,016 33 58.30
F09,48 07 04.22,016 33 59.11
F11,48 07 03.44,016 34 00.96
F13,48 07 03.87,016 34 02.21
F17,48 07 02.94,016 34 03.02
F21,48 07 02.17,016 34 04.87
F23,48 07 02.60,016 34 06.13
F27,48 07 01.67,016 34 06.93
F31,48 07 00.89,016 34 08.79
F33,48 07 01.32,016 34 10.04
F37,48 07 00.39,016 34 10.84
F41,48 06 59.45,016 34 13.92
F43,48 06 59.42,016 34 14.01
F45,48 06 58.72,016 34 16.16
F47,48 06 58.39,016 34 17.16
F49,48 06 58.14,016 34 17.92
F51,48 06 57.35,016 34 20.37
F53,48 06 57.13,016 34 21.03
F55,48 06 56.62,016 34 22.60
F57,48 06 56.10,016 34 24.18
F59,48 06 55.83,016 34 24.80
F04,48 07 08.83,016 33 59.15
F08,48 07 08.19,016 34 01.11
F12,48 07 07.56,016 34 03.07
F16,48 07 06.92,016 34 05.02
F22,48 07 06.28,016 34 06.98
F26,48 07 05.64,016 34 08.94
F32,48 07 05.01,016 34 10.89
F36,48 07 04.37,016 34 12.85
F42,48 07 02.93,016 34 15.71
F44,48 07 02.77,016 34 16.22
F46,48 07 02.23,016 34 17.86
F48,48 07 01.74,016 34 19.37
F50,48 07 01.53,016 34 20.00
H41,48 07 15.57,016 34 04.10
H42,48 07 14.93,016 34 06.06
H43,48 07 14.30,016 34 08.01
H44,48 07 13.66,016 34 09.97
H45,48 07 13.02,016 34 11.93
H46,48 07 12.56,016 34 14.01
H47,48 07 12.31,016 34 14.77
H48,48 07 11.92,016 34 15.97
H49,48 07 11.24,016 34 17.89
H50,48 07 10.04,016 34 19.44
K41,48 07 27.49,016 34 07.07
K42,48 07 26.86,016 34 09.02
K43,48 07 26.86,016 34 09.84
K44,48 07 26.22,016 34 10.98
K45,48 07 25.80,016 34 13.10
K46,48 07 24.95,016 34 14.89
K47,48 07 24.74,016 34 16.36
K48,48 07 24.31,016 34 16.85
K49,48 07 23.67,016 34 18.81
K50,48 07 23.68,016 34 19.62
K51,48 07 23.03,016 34 20.76
How can i get it into VRS?!
:!: :!: :!: I search for People who want exchange VRS Data. I life near LOWW and i have a huge Coverage and multiple Receiver. :!: :!: :!:

Post Reply