Draw a polyline on Google map via plugin ?

Are you having problems with using or developing a plugin? Let me know here.
vladkokrstevski
Posts: 3
Joined: Thu Jun 12, 2014 1:52 pm
Location: Macedonia

Draw a polyline on Google map via plugin ?

Post by vladkokrstevski » Thu Jun 12, 2014 2:06 pm

Hi
I am a new on VRS, perfect solution.
Installation is OK, plugins OK. Everything work SUPER.
My question - is possible to draw a poly-line on Google map via plugin ? ( I tray several variant but NOK)
My main idea is to overwrite the border of my Country with different color for better visual effect !

Help me ?

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

Re: Draw a polyline on Google map via plugin ?

Post by agw » Thu Jun 19, 2014 11:47 am

Sorry for the delay in replying! This script should work, if you save it as "AddOutline.html" somewhere and configure the plugin to inject it at END of HEAD for address * then it should draw a very bad outline around the UK :)

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) {
                    // Declare each point in the line that we're going to draw. Note that the
                    // last entry must not have a comma after it.
                    var outlineCoordinates = [
                        { lat: 49.769471, lng: -6.678401 },
                        { lat: 50.379549, lng: 0.788964 },
                        { lat: 51.483015, lng: 2.418039 }, 
                        { lat: 53.537350, lng: 2.674552 },
                        { lat: 61.123512, lng: -0.534829 },
                        { lat: 61.123512, lng: -4.656845 },
                        { lat: 58.380400, lng: -8.326278 },
                        { lat: 56.251182, lng: -8.326278 },
                        { lat: 55.076393, lng: -5.387435 },
                        { lat: 53.500685, lng: -5.030990 },
                        { lat: 50.494999, lng: -6.678401 }, 
                        { lat: 49.769471, lng: -6.678401 }
                    ];
                    
                    // Add the line to the map
                    pageSettings.mapPlugin.addPolyline('myCountryOutline', {
                        clickable:      false,
                        draggable:      false,
                        editable:       false,
                        geodesic:       true,
                        strokeColour:   '#8070F0',
                        strokeWeight:   3,
                        path:           outlineCoordinates
                    });
                }
            }, this);
        });
    }
</script>
If you want a shaded outline instead of just a simple line then it's almost the same, you just add a polygon instead of a polyline:

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) {
                    // Declare each point in the line that we're going to draw. Note that the
                    // last entry must not have a comma after it.
                    var outlineCoordinates = [
                        { lat: 49.769471, lng: -6.678401 },
                        { lat: 50.379549, lng: 0.788964 },
                        { lat: 51.483015, lng: 2.418039 }, 
                        { lat: 53.537350, lng: 2.674552 },
                        { lat: 61.123512, lng: -0.534829 },
                        { lat: 61.123512, lng: -4.656845 },
                        { lat: 58.380400, lng: -8.326278 },
                        { lat: 56.251182, lng: -8.326278 },
                        { lat: 55.076393, lng: -5.387435 },
                        { lat: 53.500685, lng: -5.030990 },
                        { lat: 50.494999, lng: -6.678401 }, 
                        { lat: 49.769471, lng: -6.678401 }
                    ];
                    
                    // Add the shape to the map
                    pageSettings.mapPlugin.addPolygon('myCountryOutline', {
                        clickable:      false,
                        draggable:      false,
                        editable:       false,
                        geodesic:       true,
                        strokeColour:   '#8070F0',
                        strokeWeight:   3,
                        paths:          [ outlineCoordinates ],
                        fillColour:     '#4030A0',
                        fillOpacity:    0.1
                    });
                }
            }, this);
        });
    }
</script>

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

Re: Draw a polyline on Google map via plugin ?

Post by jaimehempke » Sat Jul 05, 2014 7:13 pm

Boa tarde, como ficaria o script para adicionar outras linhas sem ligação com as anteriores?achei muito bom.

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

Re: Draw a polyline on Google map via plugin ?

Post by agw » Mon Jul 07, 2014 12:01 pm

I'm not quite sure what you're asking :) The Google Translate I have for what you wrote is "Good afternoon, how would the script to add other lines unrelated to the above? Found it very good.", unfortunately I can't quite get the meaning from that. Could you expand on it a bit? Portuguese is fine, I just need more detail about what you want to do.

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

Re: Draw a polyline on Google map via plugin ?

Post by jaimehempke » Mon Jul 07, 2014 2:54 pm

ok, o que eu qero dizer é o seguinte, eu adicionei o script para adicionar o poligonos, porem eu gostaria de incluir algumas rotas de chegada e saida na minha aerea, o unico problema que encontrei foi que sempre as coordenadas ficam ligadas as coordenadas anteriores, eu gostaria de separa-las e se possivel adicionar nomes as coordenadas,
eu fiz alguma coisa ,www.br100br.com.br/virtualradar.

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

Re: Draw a polyline on Google map via plugin ?

Post by agw » Mon Jul 07, 2014 5:31 pm

jaimehempke wrote:ok, what I mean is this qero, I added the script to add the polygons, however I would like to include some routes of arrival and departure in my aerea, the only problem I found was that when the coordinates are related previous coordinates I would like to separate them and if possible add names coordinates,
I did something, http://www.br100br.com.br/virtualradar..
OK, I see what you mean. I think you were probably just extending the "outlineCoordinates" array with your new polygon? Instead of doing that you can make separate calls to addPolyline for each polygon that you want to add to the map, using a different identifier for each call. For example (not tried this on a site but you get the idea):

Code: Select all

                    // Add the first polygon to the map
                    pageSettings.mapPlugin.addPolyline('myFirstPolygon', {
                        clickable:      false,
                        draggable:      false,
                        editable:       false,
                        geodesic:       true,
                        strokeColour:   '#8070F0',
                        strokeWeight:   3,
                        path:           [[
                            { lat: 0.0, lng: 0.0 },
                            { lat: 0.0, lng: 1.0 },
                            { lat: 1.0, lng: 1.0 },
                            { lat: 1.0, lng: 0.0 },
                            { lat: 0.0, lng: 0.0 }
                        ]]
                    });

                    // Add the second polygon to the map
                    pageSettings.mapPlugin.addPolyline('mySecondPolygon', {
                        clickable:      false,
                        draggable:      false,
                        editable:       false,
                        geodesic:       true,
                        strokeColour:   '#8070F0',
                        strokeWeight:   3,
                        path:           [[
                            { lat: 7.0, lng: 7.0 },
                            { lat: 7.0, lng: 8.0 },
                            { lat: 8.0, lng: 8.0 },
                            { lat: 8.0, lng: 7.0 },
                            { lat: 7.0, lng: 7.0 }
                        ]]
                    });
That should create two completely separate rectangles on the map.

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

Re: Draw a polyline on Google map via plugin ?

Post by jaimehempke » Tue Jul 08, 2014 5:00 pm

Funcionou muito bem ,muito obrigado e parabens, agora só falta conseguir colocar nomes aos waypoints. :D

vladkokrstevski
Posts: 3
Joined: Thu Jun 12, 2014 1:52 pm
Location: Macedonia

Re: Draw a polyline on Google map via plugin ?

Post by vladkokrstevski » Wed Sep 17, 2014 7:21 am

Hi agw or anyone for help
I have a question about possibilities to put signs on the map. ( like airport sign, VOR ....)
Or maybe a put a markers but with different colors.
Another variant is write a text for special pleases.
I read that writing a text on google map V3 is no so easy.
Help ?

Thx in advanced.
Regards Vladko

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

Re: Draw a polyline on Google map via plugin ?

Post by agw » Mon Sep 22, 2014 1:10 am

Sorry for the delay in replying - adding markers to the map isn't too difficult. You have two choices - either use the map plugin that VRS uses (there is a method called addMarker to add markers to the map, that method is guaranteed to continue working even if VRS stops using Google Maps in the future) or you can use Google Maps directly.

If you want to use the map plugin then you probably want to read through the documentation comments in web / script / jquiplugin / jquery.vrs.map.js. The documentation for the addMarker function starts at around line 1886 (as of version 2.0.2).

If you want to use the Google Maps map handle directly then the tricky part is getting hold of it. The plugin does not expose it. This script shows how to do it in version 2.0.2, but I intend to make it a bit more straight-forward in future versions. Once you have the map handle then you can do anything that Google Maps allows.

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);

                    // The following line adds a default Google Maps marker on 51.4, -0.6 just to
                    // prove that the map variable now holds the Google Maps map. See
                    //    https://developers.google.com/maps/documentation/javascript/reference
                    // for more information.
                    var nativeMarker = new google.maps.Marker({
                        map:      map,
                        position: new google.maps.LatLng(51.4, -0.6),
                        title:    'This was added by the custom script'     // Tooltip
                    });
                }
            }, this);
        });
    }
</script>
I don't think that Google provides an API to add text directly to the map. VRS uses a library called markerWithLabel (which is loaded by default, if I remember correctly) which can be used to add text directly to markers, but that means that you need a marker on the map for the text. It extends the Google Maps Marker class with methods to add labels. The documentation for the version that VRS currently ships with is here: http://google-maps-utility-library-v3.g ... rence.html

If you want your own marker images then you'll need to tell the custom content plugin the root folder to serve images from. So if your images are loaded from /CustomImages on the site, and they live in a folder called C:\Users\Me\Documents\VRS\MySite\CustomImages then the custom root is C:\Users\Me\Documents\VRS\MySite. Anything in MySite, including all sub-folders, will be accessible from the web site so you'll need to be careful about what you put in there.

vladkokrstevski
Posts: 3
Joined: Thu Jun 12, 2014 1:52 pm
Location: Macedonia

Re: Draw a polyline on Google map via plugin ?

Post by vladkokrstevski » Mon Sep 22, 2014 1:38 pm

Hi agw
Thank you for your answer.
I tray add the marker is ok. But I have a problem when I want to change marker icon.
Help ?

This is my test plugin : ( ad.png is icon for my airports)


<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) {
// Declare each point in the line that we're going to draw. Note that the
// last entry must not have a comma after it.

// Add the marker to the map
pageSettings.mapPlugin.addMarker('M1', {
icon: '../ad.png',
clickable: false,
draggable: false,
editable: false,
visible: true,
useMarkerWithLabel: true,
tooltip: 'Proba',
position: {lat: 42.846389, lng: 22.493056}

});
pageSettings.mapPlugin.addMarker('M2', {
clickable: true,
draggable: false,
editable: false,
visible: true,
position: {lat: 41.846389, lng: 22.493056}

});
}
}, this);
});
}
</script>

Post Reply