alperdincer/gist:6364139

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 5px; }
        #mapDiv { width: 800px; height: 500px; }
    </style>
    <link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css" type="text/css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ol3js.org/en/master/build/ol-simple.js"></script>
    <script type="text/javascript">
        var map, polygon, vectorLayer;

        function initMap() {
            var raster = new ol.layer.TileLayer({
                visible: true,
                preload: Infinity,
                source: new ol.source.BingMaps({
                    key: 'AnomwJFerlTXXuM8oE-dbOU00vZNtU_eGc3CE9u_HPBWev4dGn-f3SaGFJNQ1m5z',
                    style: "Road"
                })
            });

            map = new ol.Map({
                layers: [raster],
                renderer: ol.RendererHint.CANVAS,
                target: 'mapDiv',
                view: new ol.View2D({
                    center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 2
                })
            });

            vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    projection: ol.proj.get('EPSG:4326')
                })
            });

            map.addLayer(vectorLayer);
            drawGeom();
        }

        function drawGeom() {
            var path = [[0,0], [30,30], [60,60], [0,0]];
            polygon = new ol.geom.Polygon(path);
            var feature = new ol.Feature();
            feature.setGeometry(polygon);
            vectorLayer.addFeatures(feature);
        }

    </script>
</head>
<body onload="initMap();">
    <b>OLv3 Test</b><br>
    <div id="mapDiv"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test</title>
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 5px; }
	#mapDiv { width: 800px; height: 500px; }
	</style>
	<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css" type="text/css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://ol3js.org/en/master/build/ol-simple.js"></script>
	<script type="text/javascript">
	var map, polygon, vectorLayer;

	function initMap() {
	var raster = new ol.layer.TileLayer({
	visible: true,
	preload: Infinity,
	source: new ol.source.BingMaps({
	key: 'AnomwJFerlTXXuM8oE-dbOU00vZNtU_eGc3CE9u_HPBWev4dGn-f3SaGFJNQ1m5z',
	style: "Road"
	})
	});

	map = new ol.Map({
	layers: [raster],
	renderer: ol.RendererHint.CANVAS,
	target: 'mapDiv',
	view: new ol.View2D({
	center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
	zoom: 2
	})
	});

	vectorLayer = new ol.layer.Vector({
	source: new ol.source.Vector({
	projection: ol.proj.get('EPSG:4326')
	})
	});

	map.addLayer(vectorLayer);
	drawGeom();
	}

	function drawGeom() {
	var path = [[0,0], [30,30], [60,60], [0,0]];
	polygon = new ol.geom.Polygon(path);
	var feature = new ol.Feature();
	feature.setGeometry(polygon);
	vectorLayer.addFeatures(feature);
	}

	</script>
	</head>
	<body onload="initMap();">
	<b>OLv3 Test</b><br>
	<div id="mapDiv"></div>
	</body>
	</html>