CSS Stylesheet
.meta-data { display: none; }

EO4OG - A comprehensive guide to geospatial products for the Oil & Gas Industry

HTML
<script> jQuery(document).ready(function() { jQuery(".wiki-content a").attr("target", "_blank"); }); </script>

Section

Column

width	20%

Column

width	80%

HTML

head	true
width	700
height	700

    <script

Gliffy DiagramnameEO4OG Sidebar HTML

head	true
width	700
height	700

 type="text/javascript

"> //Available marker in different colors var blue = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/blue-dot.png');

" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwdVxyGviowqeOGo59Fu_TL2A_mcnvspw&sensor=SET_TO_TRUE_OR_FALSE"> </script>

    <script type="text/javascript">
		//Available marker in different colors
		var blue = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/blue-dot.png');
        var green = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/green-dot.png');
        var lightblue = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/lightblue-dot.png');
        var orange = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/orange-dot.png');
        var pink = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/pink-dot.png');
        var purple = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/purple-dot.png');        
        var red = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/red-dot.png');         
        var activeIcon = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/yellow-dot.png');



		/***********************************************************************************************/
    	/* START CUSTOM CONTENT                                                                        */
    	/***********************************************************************************************/
        
        //Map variables
        var start_center_lat = 45;
        var start_center_lon = 10;
        var start_zoomlevel  = 2;
		var mapTypeId        = google.maps.MapTypeId.

HYBRID

ROADMAP; //Values can be: ROADMAP, SATELLITE, HYBRID, TERRAIN

 //Content
        //Structure: [{title}, {latitude}, {longitude}, {z-index}, {link to wiki}, {markercolor}]
		//Values for markercolor: blue, green, lightblue, orange, pink, purple, red
		 var sites = [
            
			['

River

Surface Deformation

Ice

Monitoring',

47

32.

0

5,

15

3.

0

7, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=

29687863

29688341',

red

blue],

['

3D

Soft

Geological

Ground

Maps

Mapping',

47

24.2,

15

51.

4

7, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=

29687866

29688360',

purple

blue],
			['Surface Geology Mapping', 28.7,

['Coastal Habitat', 27, -89

33.3, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=29688321', blue],
			['Ecosystem valuation and change', 60.3, -1.3, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=

29687945

29688347',

green

blue]

]; /***********************************************************************************************/ /* END CUSTOM CONTENT

	['Habitat impact assessment',  24.3, -89.4, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=29688327', blue],
			['Oilfield performance study', 26.2, 50.1, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=29688354', blue],
            
            ['Pipeline Encroachment', 53.7, -113.2, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31227911', pink],
['Hydrology', 57.02, -111.65, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31227906', pink],
['Peru Flood Seismic Planning',

*/ /***********************************************************************************************/ //Global variables var gmarkers = []; var infowindow = null; // Shapes define the clickable region of the icon. var shape = { coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],

-9.96, -73.19, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31227920', pink],
['Kenya Flood Seismic Planning', 3.1, 35.2, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31227936', pink],
['Current meter location study', -20, -39, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228169', green],
['Ocean Model Validation', -6.5, 127, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228181', green],
['Current vein location', -35, 25, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228238', green],
['Congo River Plume Localization', -2.4, 16, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228268', green],
['Ocean Model Circulation Operational Validation', 0, -45, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228353', green],
['Bering Sea Project', 58, -178, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228362', green],
['Determination of metrological and oceanographic conditions', 60, -55, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228374', purple],
['Oil spill disaster in Gulf Of Mexico', 24, -90, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228386', green],
['Measuring surface wind', 34.5, 35, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=31228395', green],


     ];



		/***********************************************************************************************/
    	/* END CUSTOM CONTENT                                                                           */    
    	/***********************************************************************************************/    

        
        
        //Global variables        
        var gmarkers = [];
        var infowindow = null;
		
		// Shapes define the clickable region of the icon.
        var shape = {
            coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
            type: 'poly'
        }; 		
		

		function initialize() {
			//Common parameters
			var myLatlng, marker;
			//Map parameters
			var mapOptions = {
          		center: new google.maps.LatLng(start_center_lat, start_center_lon),
          		zoom: start_zoomlevel,
          		scaleControl: true,
          		mapTypeId: mapTypeId        
       		 };

        	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);	
			setMarkers(map);
		 }

		function setMarkers(map) {
        	for (var i = 0; i < sites.length; i++) {
            	var siteLatLng = new google.maps.LatLng(sites[i][1], sites[i][2]);
            	var marker = new google.maps.Marker({

type

	position:

'poly'

siteLatLng,

};

function initialize() { //Common parameters var myLatlng, marker; //Map parameters var mapOptions = {

 	map:         map,

center

title:

new

google.maps.LatLng(start_center_lat, start_center_lon),

 sites[i][0],

zoom

zIndex:

start_zoomlevel,

sites[i][3],

scaleControl:

true,

mapTypeId

link2wiki:

mapTypeId

 sites[i][4],

};

 	icon:

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); setMarkers(map); } function setMarkers(map) {

sites[i][5],
               		shape: shape

for (var i = 0; i < sites.length; i++) {

});

var

siteLatLng

=

new

 	google.maps.event.

LatLng(sites[i][1], sites[i][2]);

addListener(marker, "click", function () {
                	for (var

marker = new google.maps.Marker({

i=0; i < sites.length; i++) {

position: siteLatLng,

		gmarkers[i].setIcon(sites[i][5]);
                	}

map:

map,

      	this.setIcon(activeIcon);

title:

sites[i][0],

	markerClicked(this.link2wiki);
            	});

zIndex:

sites[i][3],


            google.maps.event.addListener(marker, "mouseover", function () {

link2wiki:

sites[i][4],

icon:

sites[i][5],

   for (var i=0; i < sites.length; i++) {

shape:

shape

}

 gmarkers[i].setIcon(sites[i][5]);

google.maps.event.addListener(marker,

"click",

function

()

{

      this.setIcon(activeIcon);

for

(var i=0; i < sites.length; i++) {

});

gmarkers[i].setIcon(sites[i][5]);

google.maps.event.addListener(marker, "mouseout", function () {

}

this.setIcon(activeIcon);

		for (var i=0; i < sites.length; i++) {

markerClicked(this.link2wiki);

}

		gmarkers[i].setIcon(sites[i][5]);

google.maps.event.addListener(marker, "mouseover", function () {

	} 
					this.setIcon(activeIcon);

for (var i=0; i < sites.length; i++) {

		});
            
            	gmarkers

[i]

setIcon(sites[i][5]

push(marker);
        	}

}

	}


  		function markerClicked( link2wiki ) {
			//GET HTML content with

this.setIcon(activeIcon); }); google.maps.event.addListener(marker, "mouseout", function () { for (var i=0; i < sites.length; i++) {

JS object
			document.getElementById("map_content").innerHTML  = '<object type="text/html" style="width:100%; height:100%;" data=" ' + link2wiki + '" ></object>';
			
			//GET HTML content with AJAX
			var xmlhttp;
			if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    			xmlhttp = new XMLHttpRequest();
			} else { // code for IE6, IE5
    			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
    			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

gmarkers[i].setIcon(sites[i][5]); } this.setIcon(activeIcon); }); gmarkers.push(marker); } } function markerClicked( link2wiki ) { document.getElementById("map_content").innerHTML = '<object type="text/html" style="width:100%; height:100%;" data=" ' + link2wiki + '" ></object>';

document.getElementById("map_content").innerHTML = xmlhttp.responseText;
   				}
			}
			//Get Link content
			xmlhttp.open("GET", link2wiki, true);
			xmlhttp.send();


			//Open links in new tabs
			setTimeout(function () { 
    			var links =  document.getElementById("map_content").getElementsByTagName("a");
    			for (var i = 0; i < links.length; i++) {
        			links[i].target = "_blank";
    			} 			
			}, 500);
			
			//Set Header background-color to blue
			//Top Header
			document.getElementById("header").style.background = 'transparent';
			//Loaded Header
			var divs = document.getElementById("zen-main").getElementsByTagName('div');
			for(var i = 0; i< divs.length;i++)  {
    			divs[i].style.background = 'transparent';
			}
		}
	
	</script>
    
	<div id="container"> 
		<div id="header"  style="width:100%; height:10%; text-align:center;">
			<h1>EO4OG Case Studies</h1>
			<p>Click on a marker to get additional information from the Wiki</p>
		</div>
		<div id="map_canvas" style="width:

700px

800px; height:400px"></div> <!-- Has to be defined in pixel to be shown in Confluence -->
		<div id="map_content" style="width:100%; height:600px; background:white;"></div>
	</div>

	<script type="text/javascript">
		initialize();
	</script>

Quick Links:

Search EO4OG

Search Box

space	eo4og ohome

Image RemovedMy Favorite pages

Favourite Pages

CSS Stylesheet.tabletitle { display: none; }

Child pages

Versions Compared

Old Version 3

New Version 4

Key

EO4OG - A comprehensive guide to geospatial products for the Oil & Gas Industry

Quick Links:

Search EO4OG

Image RemovedMy Favorite pages