|
|
# Map
|
|
|
|
|
|
https://www.ohwr.org/2503
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>
|
|
|
|
|
|
WR Users
|
|
|
|
|
|
</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
html, body, \#map-canvas {
|
|
|
height: 100%;
|
|
|
margin: 0px;
|
|
|
padding:
|
|
|
0px
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// This example creates circles on the map, representing
|
|
|
// populations in the United States.
|
|
|
|
|
|
// First, create an object containing LatLng and population for each
|
|
|
city.
|
|
|
var cityComitted = {};
|
|
|
var textCityComitted = {};
|
|
|
|
|
|
var cityPosComitted = {};
|
|
|
var cityNonComitted = {};
|
|
|
|
|
|
cityComitted\['CERN'\] = {
|
|
|
name : 'CERN',
|
|
|
center: new google.maps.LatLng(46.23396,6.05609),
|
|
|
population: 2000
|
|
|
};
|
|
|
cityComitted\['GSI'\] = {
|
|
|
name : 'GSI',
|
|
|
center: new google.maps.LatLng(49.93178,8.67808),
|
|
|
population: 3000
|
|
|
};
|
|
|
cityComitted\['ESS'\] = {
|
|
|
name : 'ESS',
|
|
|
center: new google.maps.LatLng(43.25669,-2.92406),
|
|
|
population: 1000
|
|
|
};
|
|
|
cityComitted\['HiSCORE'\] = {
|
|
|
name : 'HiSCORE',
|
|
|
center: new google.maps.LatLng(51.75,102.55),
|
|
|
population: 1000
|
|
|
};
|
|
|
cityComitted\['MIKE'\] = {
|
|
|
name: 'MIKE',
|
|
|
center: new google.maps.LatLng(60.75,24.55),
|
|
|
population: 1000
|
|
|
};
|
|
|
|
|
|
cityComitted\['LHAASO'\] = {
|
|
|
name : 'LHAASO',
|
|
|
center: new google.maps.LatLng(30,90.53),
|
|
|
population: 7000
|
|
|
};
|
|
|
|
|
|
////////////////////////////////////////////////////
|
|
|
cityPosComitted\['ITER'\] = {
|
|
|
center: new google.maps.LatLng(30,90.53),
|
|
|
population: 7000
|
|
|
};
|
|
|
cityPosComitted\['LNLS'\] = {
|
|
|
center: new google.maps.LatLng(30,90.53),
|
|
|
population: 7000
|
|
|
};
|
|
|
cityPosComitted\['EISCAT 3D'\] = {
|
|
|
center: new google.maps.LatLng(30,90.53),
|
|
|
population: 7000
|
|
|
};
|
|
|
////////////////////////////////////////////////
|
|
|
cityNonComitted\['CERN'\] = {
|
|
|
center: new google.maps.LatLng(46.23396,6.05609),
|
|
|
population: 2000
|
|
|
};
|
|
|
///////////////////////////////////////////////
|
|
|
|
|
|
var comittedCircle;
|
|
|
var markerComittedCircle;
|
|
|
var posComittedCircle;
|
|
|
var nonComittedCircle;
|
|
|
|
|
|
function initialize() {
|
|
|
// Create the map.
|
|
|
var mapOptions = {
|
|
|
zoom: 3,
|
|
|
center: new google.maps.LatLng(29.53523,12.65625),
|
|
|
mapTypeId: google.maps.MapTypeId.NOTERRAIN
|
|
|
};
|
|
|
|
|
|
var map = new google.maps.Map(document.getElementById('map-canvas'),
|
|
|
var iconWR = 'http://img197.imageshack.us/img197/697/s79f.png';
|
|
|
|
|
|
nonComitted\_wr = new google.maps.Circle(nonComitted\_wr);
|
|
|
// Construct the circle for each value in cityComitted.
|
|
|
// Note: We scale the population by a factor of 20.
|
|
|
for (var city in cityNonComitted) {
|
|
|
var nonComitted\_wr = {
|
|
|
strokeColor: '\#006633',
|
|
|
strokeOpacity: 0.8,
|
|
|
strokeWeight: 2,
|
|
|
fillColor: '\#006633',
|
|
|
fillOpacity: 0.35,
|
|
|
map: map,
|
|
|
center: cityNonComitted\[city\].center,
|
|
|
radius: cityNonComitted\[city\].population\*50
|
|
|
};
|
|
|
// Add the circle for this city to the map.
|
|
|
nonComitted\_wr = new google.maps.Circle(nonComitted\_wr);
|
|
|
}
|
|
|
// Construct the circle for each value in cityComitted.
|
|
|
// Note: We scale the population by a factor of 20.
|
|
|
for (var city in cityComitted) {
|
|
|
var comitted\_wr = {
|
|
|
strokeColor: '\#0000FF',
|
|
|
strokeOpacity: 0.8,
|
|
|
strokeWeight: 2,
|
|
|
fillColor: '\#0000FF',
|
|
|
fillOpacity: 0.35,
|
|
|
map: map,
|
|
|
center: cityComitted\[city\].center,
|
|
|
radius: cityComitted\[city\].population\*50
|
|
|
};
|
|
|
var text\_comitted\_wr = {
|
|
|
position: cityComitted\[city\].center,
|
|
|
map:map,
|
|
|
visible: true,
|
|
|
icon: iconWR,
|
|
|
title: cityComitted\[city\].name
|
|
|
};
|
|
|
// Add the circle for this city to the map.
|
|
|
comittedCircle = new google.maps.Circle(comitted\_wr);
|
|
|
markerComittedCircle = new google.maps.Marker(text\_comitted\_wr);
|
|
|
}
|
|
|
|
|
|
for (var city in cityPosComitted) {
|
|
|
var posComitted\_wr = {
|
|
|
strokeColor: '\#00F0FF',
|
|
|
strokeOpacity: 0.8,
|
|
|
strokeWeight: 2,
|
|
|
fillColor: '\#00F0FF',
|
|
|
fillOpacity: 0.35,
|
|
|
map: map,
|
|
|
center: cityPosComitted\[city\].center,
|
|
|
radius: cityPosComitted\[city\].population\*50
|
|
|
};
|
|
|
// Add the circle for this city to the map.
|
|
|
PosComittedCircle = new google.maps.Circle(posComitted\_wr);
|
|
|
}
|
|
|
}
|
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="map-canvas">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|