DjNRO - eduroam (moved)

{% extends "base.html"%}

{% block extrahead %} <script type="text/javascript" src="/static/js/jquery.min.js"></script>

<script type="text/javascript" src="/static/js/markerclusterer.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

        var lat = 36.97;

        var lng = 23.71;

        var zoomLevel = 6;

        var latlng = new google.maps.LatLng(lat,lng);

        var map = '';

        var bounds = '';

        var image = '';

var styles = [{

        url: '/static/img/edugroup.png',

        height: 54,

        width: 63,

        textColor: '#ffffff',

        textSize: 11

        },

        {

        url: '/static/img/edugroup.png',

        height: 54,

        width: 63,

        textColor: '#ffffff',

        textSize: 11

        },

        {

        url: '/static/img/edugroup.png',

        height: 54,

        width: 63,

        textColor: '#ffffff',

        textSize: 11

}];

function initialize() {

        image = new google.maps.MarkerImage('/static/img/edupin.png',

        // This marker is 29 pixels wide by 40 pixels tall.

        new google.maps.Size(29, 40),

        // The origin for this image is 0,0.

        new google.maps.Point(0,0),

        // The anchor for this image is the base of the flagpole at 18,42.

        new google.maps.Point(14, 40)

);

var styleArray = [

{

        featureType: "all",

        stylers: [

        { saturation: -60 },

        {gamma: 1.00 }

        ]

        },{

        featureType: "poi.business",

        elementType: "labels",

        stylers: [

        { visibility: "off" }

        ]

        },

        { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },

        { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] },

        {'featureType': "administrative.country",

        'elementType': "labels",

        'stylers': [

        { 'visibility': "off" }

        ]}

];

var mapOptions = {

        center : latlng,

        zoom : zoomLevel,

        mapTypeId : google.maps.MapTypeId.ROADMAP,

        styles: styleArray,

        mapTypeId: google.maps.MapTypeId.ROADMAP,

        mapTypeControlOptions: {

        style: google.maps.MapTypeControlStyle.DEFAULT

        },

        navigationControl: true,

        mapTypeControl: false,

        };

        map = new google.maps.Map(document.getElementById("map_canvas"),

        mapOptions);

        bounds = new google.maps.LatLngBounds();

}

function placeMarkers(){

var markers = new Array();

$.get("{% url get-service-points %}", function(data){

        $.each(data, function(index, jsonMarker) {

        var marker = createMarker(jsonMarker);

        if (marker){

        bounds.extend(marker.position);

        markers.push(marker)

        }

        });

        var mcOptions = {gridSize: 50, maxZoom: 15, styles: styles};

        var markerCluster = new MarkerClusterer(map, markers, mcOptions);

        map.fitBounds(bounds)

        });

        }

        function createMarker(markerObj){

        var title = markerObj.name;

        var latLng = new google.maps.LatLng(markerObj.lat, markerObj.lng);

        var marker = new google.maps.Marker({

        'position' : latLng,

        'map' : map,

        'title': title,

        'icon': image,

        });

        return marker

        }

        function clusterMarkers(markers){

        var markerCluster = new MarkerClusterer(map, markers);

        }

        $(document).ready(function() {

{% if services %}

        initialize();

        marks = placeMarkers();

        console.log(marks);

        clusterMarkers(marks);

{% endif %}});</script>

{% endblock %}

{% block content %}

<div class="container-fluid">

        <div class="row-fluid">

                <div class="span2">

                        <div class="sidebar-nav">

                                <ul class="nav nav-list nav-stacked side-menu">

                                        <li {% block  %}class="active"{% endblock %}>

                                                <a href="{% url manage %}">Home</a>

                                        </li>

                                        <li {% block  %}{% endblock %}>

                                                <a href="{% url institutions %}">My Institution</a>

                                        </li>

                                        <li {% block  %}{% endblock %}>

                                                <a href="{% url services %}">My Services</a>

                                        </li>

                                        <li {% block  %}{% endblock %}>

                                                <a href="{% url servers %}">My Servers</a>

                                        </li>

                                </ul>

                        </div><!--/.well -->

                </div><!--/span-->

                <div class="span10">

                        <div class="row-fluid">

                                <!--/span-->

                                <div class="span10">

                                        {% block subcontent %} <h4>My Services</h4>

                                        {% if services %} <div id="map_canvas" style="width:100%; height:450px;"></div>

                                        {% else %}

                                        <p>

                                                No services defined!

                                        </p>

                                        {% endif %}

                                        {% endblock %}

                                </div><!--/span-->

                                <!--/span-->

                        </div><!--/row-->

                </div><!--/span-->

        </div><!--/row-->

        <hr>

        <footer>

                <p>

                        © leopoul - GRNET NOC - GRNET S.A - 2012

                </p>

        </footer>

</div><!--/.fluid-container-->

{% endblock %}