y2blog

	
	Web Map Samples [ CJ4, Google, Bing, OSM ]







var CJ4LayerID = "CJ4 Base Map";
var CJLogo = null;

function init_map(){

	var map = new OpenLayers.Map( 'map_cj4' );

	// Denshikokudo Base Map
	var cj4BaseMapSet = { 0: null, 1: null, 2: null, 3: null, 4: null,
		5:{dataId:"RELIEF"},
		6:{dataId:"RELIEF"},
		7:{dataId:"RELIEF"},
		8:{dataId:"RELIEF"},
		9:{dataId:"BAFD1000K"},
		10:{dataId:"BAFD1000K"},
		11:{dataId:"BAFD1000K"},
		12:{dataId:"BAFD200K"},
		13:{dataId:"BAFD200K"},
		14:{dataId:"BAFD200K"},
		15:{dataId:"DJBMM"},
		16:{dataId:"DJBMM"},
		17:{dataId:"DJBMM"},
		18:{dataId:"FGD"}
	};

	var webtisLayer = new webtis.Layer.BaseMap( CJ4LayerID, { dataSet: cj4BaseMapSet });
	
	// Google Road Map
	var googlemap = new OpenLayers.Layer.Google(
		"Google ROADMAP",
		{numZoomLevels: 20}
	);

	// Bing Road Map
	var apiKey = "#####  your own API key #####";
	var bingRoad = new OpenLayers.Layer.Bing({
		key: apiKey,
		type: "Road"
	});

	// Bing Hybrid Map
	var bingHybrid = new OpenLayers.Layer.Bing({
		key: apiKey,
		type: "AerialWithLabels",
		name: "Bing Aerial With Labels"
	});

	// Open Street Map
	var osm = new OpenLayers.Layer.OSM();

	map.addLayers( [ webtisLayer, googlemap, bingRoad, bingHybrid, osm ] );

	var zoomLevel = 16;
	var centerLatLon = new OpenLayers.LonLat(138.72736528, 35.36062806);
	var center = centerLatLon.transform( new OpenLayers.Projection("EPSG:4326"), 
										 map.getProjectionObject() );
	map.setCenter( center, zoomLevel );

	// add overlay features (random zigzagged line)
	var vectorLayer = new OpenLayers.Layer.Vector("Overlay Features");

	var style_green = {
	　　strokeColor: "#33DD33",
	　　strokeOpacity: 0.7,
	　　strokeWidth: 4,
	　　pointRadius: 6,
	　　pointerEvents: "visiblePainted"
	};

	var point = new OpenLayers.Geometry.Point( center.lon, center.lat );
	var pointList = [];
	var newPoint = point;
	for( var i=0; i<15; ++i) {
		var sx = Math.random(1) > 0.5 ? 1 : -1;
		var sy = Math.random(1) > 0.5 ? 1 : -1;
		newPoint = new OpenLayers.Geometry.Point( newPoint.x + Math.random(1) * 50 * sx,
												  newPoint.y + Math.random(1) * 50 * sy );
		pointList.push( newPoint );
	}

	var lineFeature = new OpenLayers.Feature.Vector(
			new OpenLayers.Geometry.LineString( pointList ), null, style_green );

	vectorLayer.addFeatures( [ lineFeature ] );
	map.addLayer( vectorLayer );

	map.addControl( new OpenLayers.Control.LayerSwitcher() );

	var crosshairsCursorCtrl = new OpenLayers.Control.CrosshairsCursor({
					iconImageUrl:  "./crosshairs.png",
					iconSize: new OpenLayers.Size(32, 32),
					xyPos: new OpenLayers.Pixel( map.getCurrentSize().w / 2, 
												 map.getCurrentSize().h / 2 )
			});
	map.addControl( crosshairsCursorCtrl ); 

	// Logo
	CJLogo = new OpenLayers.Control.CJLogo();
	//cjLogo.yOffset = 64;
	//cjLogo.xOffset = 620;
	map.addControl( CJLogo );

	// mouse position
	map.addControl( new OpenLayers.Control.MousePosition( 
		{ 'div': OpenLayers.Util.getElement('mouse_position'),
		  prefix: 'Mouse Position : ',
		  suffix: ' [Lon, Lat]',
		  displayProjection: new OpenLayers.Projection("EPSG:4326"),
		  emptyString: 'Mouse Position : ',		
		  numDigits: 6
		} ));

	map.addControl( new OpenLayers.Control.MousePosition( 
		{ 'div': OpenLayers.Util.getElement('mouse_position_m'),
		  prefix: '  ( ',
		  suffix: ' [m] )',
		  emptyString: '',
		  numDigits: 0
		} ));

	// draw a map scale bar
	map.addControl( new OpenLayers.Control.ScaleLine( 
		{ maxWidth:150,
		  bottomOutUnits: "", 
		  bottomInUnits: "",
		  geodesic:true
		} ));

	// show map center location
	show_map_center( map );
	// event handler
	map.events.register( 'moveend', map, function() { show_map_center(map); } );
	map.events.register( 'changebaselayer', map, function() { show_denshikokudo_logo(map); } );


}

// our custom crosshairs cursor
OpenLayers.Control.CrosshairsCursor = OpenLayers.Class( OpenLayers.Control, {
	element : null,
	iconImageUrl: null,
	iconSize: new OpenLayers.Size(32,32),
	xyPos: new OpenLayers.Pixel(320,240),

	initialize: function( element ) {
		OpenLayers.Control.prototype.initialize.apply( this, arguments );
		this.element = OpenLayers.Util.getElement( element );
	},

	draw: function() {
		OpenLayers.Control.prototype.draw.apply( this, arguments );
		var xy = this.xyPos.clone();
		var centerXYPos = new OpenLayers.Pixel( xy.x - (this.iconSize.w / 2), 
												xy.y - (this.iconSize.h / 2) );
		this.buttons = new Array();

		var uniqID = OpenLayers.Util.createUniqueID( "OpenLayers.Control.Crosshairs_" );
		this.div = OpenLayers.Util.createAlphaImageDiv(
				uniqID, 
				centerXYPos, 
				this.iconSize, 
				this.iconImageUrl, 
				"absolute");
		return this.div;
	},
	CLASS_NAME: "OpenLayers.Control.CrosshairsCursor"
});

OpenLayers.Control.CJLogo = OpenLayers.Class( OpenLayers.Control, {
	
	xOffset : 40,
	yOffset : 56,
	
	initialize: function() {
		OpenLayers.Control.prototype.initialize.apply( this, arguments );
	},
	
	createCtrlImage: function( url, left, handler) {
	
		var image = document.createElement('img');
		image.src = url;
		image.style.position = "absolute";
		image.style.left = left + "px";
		image.style.width  = '32px';
		image.style.height = '32px';

		if ( handler ) {
		
			// only handle click
			OpenLayers.Event.observe(image, "mousedown", 
				OpenLayers.Function.bindAsEventListener( handler, this));
				
			OpenLayers.Event.observe(image, "click", 
				OpenLayers.Function.bindAsEventListener( function(e) {
					OpenLayers.Event.stop(e);
					return false;
				}, this));
				
			OpenLayers.Event.observe(image, "dblclick", 
				OpenLayers.Function.bindAsEventListener(function(e) {
					OpenLayers.Event.stop(e);
					return false;
				}, this));
		}
		this.div.appendChild( image );
	},
	
	draw: function (px) {

		if ( this.div == null ) {

			var mapSize = this.map.getSize();
			
			this.div = OpenLayers.Util.createDiv( this.id );

			this.div.style.position = "absolute";
			this.div.style.top  = ( mapSize.h - this.yOffset ) + "px";
			this.div.style.left = ( mapSize.w - this.xOffset ) + "px";

			this.createCtrlImage( "http://cyberjapan.jp/images/icon01.gif", 0, 
				function(e) {
					window.open( "http://portal.cyberjapan.jp/index.html" );
					OpenLayers.Event.stop(e);
					return false;
				});

		}
		return this.div;
	},

	adjustPositionOnMapResize: function() {

		if (this.div != null) {
			var mapSize = this.map.getSize();
			this.div.style.top  = ( mapSize.h - this.yOffset ) + "px";
			this.div.style.left = ( mapSize.w - this.xOffset ) + "px";
		}
	},
	
	CLASS_NAME: "webtis.Control.DenshiKokudoLinks"
});


function show_map_center( map ) {
	var center = map.getCenter();
	var centerLatLon = center.transform( map.getProjectionObject(),
		new OpenLayers.Projection("EPSG:4326"));
	var lat = Math.round(centerLatLon.lat * 1000000) / 1000000;
	var lon = Math.round(centerLatLon.lon * 1000000) / 1000000;
	var zoomLevel = map.getZoom();
	
	var htmlText= "Map Center: " + lon + ", " + lat + "  Zoom Level: "+ zoomLevel;
	document.getElementById('map_info').firstChild.nodeValue = htmlText;
}

function show_denshikokudo_logo( map ) {

	var currentBaseLayerName = map.baseLayer.name;

	if ( currentBaseLayerName !== CJ4LayerID ) {
		if ( CJLogo ) map.removeControl( CJLogo );
		CJLogo = null;
	} else {
		CJLogo = new OpenLayers.Control.CJLogo();
		map.addControl( CJLogo );
	}

}




#map_cj4 {
  width:  640px;
  height: 480px;
  border: solid 1px #999;
}
#map_info_area {
  width:  640px;
  height: 40px;
  font-size: small;
  border: solid 1px #999;
}
#map_scale {
  float: right;
  height: 40px;
}
#mouse_position {
  float: left;
  height: 20px;
}
#mouse_position_m {
  margin-left: 0.5em;
  float: left;
  height: 20px;
}
#map_zoom {
  float: left;
  height: 20px;
}
#map_info {
  display: block;
  height: 18px;
}

div.olControlAttribution {
  font-size: x-smaller;
  right: 3px;
  bottom: 0.2em;
  position: absolute;
  display: block;
}





	
	
		
		Map Center: