Aplikasi Web Peta OpenLayers untuk Menampilkan Bing Map dari Microsoft. Setelah mempelajari cara Menampilkan Peta YahooMap di OpenLayers dan GoogleMap di OpenLayers. Belum lengkap rasanya jika belum mencoba Peta buatan Microsoft yaitu BingMap untuk ditampilkan di OpenLayers. Karena selain lengkap, peta ini juga tidak kalah canggih dari GoogleMap.
Seperti sebelum-sebelumnya, agar script di bawah ini dapat dijalankan, silakan download dan install OpenLayers, dari sini. Bagi yang belum pernah bisa membaca dahulu dari artikel Mengenal OpenLayers berikut ini.
Buatlah file HTML openlayers-bing-map.html :
<!DOCTYPE html> <html lang='en'> <head> <title>BingMap - OpenLayers</title> <meta charset='utf-8' /> <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script> <script type='text/javascript' src='OpenLayersOld.js'></script> <script type='text/javascript'> // nuramijaya@gmail.com // http://cariprogram.blogspot.com var map; function init() { //Create the map object map = new OpenLayers.Map('map_element'); //Hybrid Layer var ve_shaded = new OpenLayers.Layer.VirtualEarth( "Shaded", {type: VEMapStyle.Shaded} ); //Roads Layer (Like shaded layer, only without shade) var ve_road = new OpenLayers.Layer.VirtualEarth( "Road", {type: VEMapStyle.Road, animationEnabled: false} ); //Aerial (Satellite) Layer var ve_aerial = new OpenLayers.Layer.VirtualEarth( "Aerial", {type: VEMapStyle.Aerial} ); //Hybrid view layer var ve_hybrid = new OpenLayers.Layer.VirtualEarth( "Hybrid", {type: VEMapStyle.Hybrid} ); //Add the Yahoo map layers map.addLayers([ve_shaded, ve_aerial, ve_road, ve_hybrid]); //Add a layer switcher control map.addControl(new OpenLayers.Control.LayerSwitcher()); // Zoom the map to the max extent if(!map.getCenter()){ map.zoomToMaxExtent(); } } </script> </head> <body onload='init();'> <div id='map_element' style='width: 500px; height: 500px;'></div> </body> </html>
Hasilnya :
Filenya dapat didownload disini. Jika kesulitan, cara downloadnya seperti ini .
Untuk OpenLayers-nya ini adalah koleksi pribadi yang penulis gunakan, sebaiknya anda langsung mendownload package OpenLayers dari web resminya seperti yang diterangkan di atas.
Semoga berhasil :)
Tidak ada komentar:
Posting Komentar