This demo shows Mapstraction's polyline and polygon features to draw a semi-opaque shape on top of a map.


JavaScript Demo Source: mxn-polylines.js

var	mapstraction;

function initialize() {
	mapstraction = new mxn.Mapstraction('map', 'ovi');
	poly(mapstraction);
}

function poly(map) {
	map.setCenterAndZoom(new mxn.LatLonPoint(37.78,-122.395033836365), 12);

    // create a polygon object
	var myPoly = new mxn.Polyline([
		new mxn.LatLonPoint(37.7945928242851,-122.395033836365),
		new mxn.LatLonPoint(37.7938467508748,-122.393960952759),
		new mxn.LatLonPoint(37.7945928242851,-122.39275932312),
		new mxn.LatLonPoint(37.789505810689,-122.387609481812),
		new mxn.LatLonPoint(37.7782792282611,-122.387351989746),
		new mxn.LatLonPoint(37.7768545853105,-122.390570640564),
		new mxn.LatLonPoint(37.7690524823224,-122.397179603577),
		new mxn.LatLonPoint(37.7668813159428,-122.394347190857),
		new mxn.LatLonPoint(37.7658635597592,-122.407650947571),
		new mxn.LatLonPoint(37.7689167862912,-122.408037185669),
		new mxn.LatLonPoint(37.7765493011063,-122.417650222778),
		new mxn.LatLonPoint(37.7945928242851,-122.395033836365)
		]);
	myPoly.setFillColor('#2C2A');
	myPoly.setOpacity(0.5);
    map.addPolyline(myPoly);
}