Google Maps i journalistikken
InnholdIndeksHjem
ForrigeOppNeste
Kildekode
 function main()
{
    // Konstruer kart (bundet til div-element med id "map")
    var map = new google.maps.Map2( document.getElementById( "map" ) );

    // Sett opp WMS-tjenesten til Kartverket: Sjøkart
    var tileLayerSjoHK2 = new google.maps.TileLayer( new google.maps.CopyrightCollection( "Statens Kartverk" ), 0, 15 );
    tileLayerSjoHK2.getTileUrl = function( t, z ) { return getTileUrl( 'sjo_hovedkart2', t, z ); }
    tileLayerSjoHK2.isPng = function() { return true; }
    var mapTypeSjoHK2 = new google.maps.MapType( [ tileLayerSjoHK2 ], google.maps.PHYSICAL_MAP.getProjection(), "Sjø" );
    map.addMapType( mapTypeSjoHK2 );

    // Initialiser kartvisning: Kartkontroller og utsnitt
    map.setCenter( new google.maps.LatLng( 59.538, 5.230 ), 14 );
    map.addControl( new google.maps.SmallMapControl() );
    map.addControl( new google.maps.MapTypeControl() );

    // Konstruer ikoner (til egendefinerte kartmarkører)
    var icon1 = new google.maps.Icon( google.maps.DEFAULT_ICON );
    icon1.image = "img/ulykkes_ikon.png";
    icon1.iconSize = new google.maps.Size( 26, 26 );
    icon1.shadow = null;
    icon1.iconAnchor = new google.maps.Point( 13, 13 );
    icon1.infoWindowAnchor = new google.maps.Point( 26, 0 );
    var icon2 = new google.maps.Icon( icon1 );
    icon2.image = "img/ulykkes_ikon_enkel.png";

    // Konstruer kartmarkører og legg dem inn i kartet
    var marker1 = new google.maps.Marker( new google.maps.LatLng( 59.542890, 5.225115 ), { icon: icon1, title: "Ulykkesstedet" } );
    map.addOverlay( marker1 );
    var marker2 = new google.maps.Marker( new google.maps.LatLng( 59.527145, 5.217304 ), { icon: icon2, title: "Ryvarden" } );
    map.addOverlay( marker2 );
    var marker3 = new google.maps.Marker( new google.maps.LatLng( 59.539983, 5.225028 ), { icon: icon2, title: "Bloksene" } );
    map.addOverlay( marker3 );

    // Konstruer linjen som viser hvor båten skulle gått og legg den inn i kartet
    var path = [ new google.maps.LatLng( 59.430061, 5.233955 ),
                 new google.maps.LatLng( 59.478743, 5.215072 ),
                 new google.maps.LatLng( 59.501489, 5.209579 ),
                 new google.maps.LatLng( 59.533273, 5.219192 ),
                 new google.maps.LatLng( 59.553895, 5.237388 ) ];
    var heading = new google.maps.Polyline( path, "#ff0000", 7, 0.8, { clickable: true, mouseOutTolerance: 5 } );
    map.addOverlay( heading );

    // Legg til klikk-håndtering av markører og rutevisning
    google.maps.Event.addListener( marker1, "click", function() { showInfo( marker1, map ) } );
    google.maps.Event.addListener( marker2, "click", function() { showInfo( marker2, map ) } );
    google.maps.Event.addListener( marker3, "click", function() { showInfo( marker3, map ) } );
    google.maps.Event.addListener( heading, "click", function( pos ) { pos.getTitle = function() { return 'Rute' }; showInfo( pos, map ) } );
}

// Bestemmer HTML-innholdet i informasjonsvinduene
function showInfo( p, m )
{
    switch( p.getTitle() )
    {
        case 'Ulykkesstedet':
            p.openInfoWindowHtml( '<div class="info"><h2>Her skjedde forliset</h2><img src="img/bloksen.jpg" width="300" height="166" alt="Varden på Store Bloksen" /><p><em>HAVARISTEDET:</em> Ifølge rapporten fra undersøkelseskommisjonen skjedde forliset her, sørøst for varden på Store Bloksen.</p></div>' );
            break;
        case 'Bloksene':
            p.openInfoWindowHtml( '<div class="info"><h2>Så ikke Bloksene</h2><p><em>GIKK FEIL:</em> Kapteinen så verken Lille eller Store Bloksen på sin radar da han gikk mot Håskru fyrlykt. Han kastet korte blikk på radaren for å finne Store Bloksen. Hovedprioritet under navigeringen var Håskru lykt, selv da kapteinen så Lille Bloksen aktenom fartøyet til babord.</p></div>' );
            break;
        case 'Ryvarden':
            p.openInfoWindowHtml( '<div class="info"><h2>Ved Ryvarden fyr</h2><p><em>SVINGTE STYRBORD:</em> Da kapteinen hadde Ryvarden tvers, svingte han noe styrbord og fikk Håskru fyrlykt i hvit sektor så godt som mulig rett i baugen. Samtidig fikk han øyekontakt med blinkene fra Lille Bloksen.</p></div>' );
            break;
        case 'Rute':
            m.openInfoWindowHtml( p, '<div class="info"><h2>Planlagt kurs</h2><img src="img/sleipner.jpg" width="300" height="175" alt="Sleipner" /><p><em>OPPRINNELIG KURS:</em> Inntegnet kurs er kurs i henhold til rederiets farvannsbeskrivelse. Det er her båten egentlig skulle gått på veien fra Haugesund.</p></div>' );
            break;
    }
}

// Returnerer korrekt URL til etterspurt kartutsnitt mot WMS-tjener
function getTileUrl( type, tile, zoom )
{
    switch( type )
    {
        case 'sjo_hovedkart2':
            return 'http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=' + type + '&zoom=' + zoom + '&x=' + tile.x + '&y=' + tile.y;
    }
}

google.load( "maps", 2, { "other_params" : "sensor=false&hl=no" } );

$( document ).ready( main );
Copyright (c) 2010: Espen Andersen
Hva synes du om dette temaet? Send tilbakemelding!