Openlayers
From DreamsteepWiki
OPENLAYERS CODE SNIPETS
WORLD WIND DEMO
<script type="text/javascript">
var template, target;
function listExamples(examples) {
target.innerHTML = "";
var node = template.process({
context: {examples: examples},
clone: true,
parent: target
});
document.getElementById("count").innerHTML = "(" + examples.length + ")";
}
var timerId;
function inputChange() {
if(timerId) {
window.clearTimeout(timerId);
}
var text = this.value;
timerId = window.setTimeout(function() {
filterList(text);
}, 500);
}
function filterList(text) {
var examples;
if(text.length < 2) {
examples = info.examples;
} else {
var words = text.split(/\W+/);
var scores = {};
for(var i=0; i<words.length; ++i) {
var word = words[i].toLowerCase()
var dict = info.index[word];
if(dict) {
for(exIndex in dict) {
var count = dict[exIndex];
if(scores[exIndex]) {
if(scores[exIndex][word]) {
scores[exIndex][word] += count;
} else {
scores[exIndex][word] = count;
}
} else {
scores[exIndex] = {};
scores[exIndex][word] = count;
}
}
}
}
examples = [];
for(var j in scores) {
var ex = info.examples[j];
ex.score = scores[j];
examples.push(ex);
}
// sort examples by first by number of words matched, then
// by word frequency
examples.sort(function(a, b) {
var cmp;
var aWords = 0, bWords = 0;
var aScore = 0, bScore = 0;
for(var i in a.score) {
aScore += a.score[i];
aWords += 1;
}
for(var j in b.score) {
bScore += b.score[j];
bWords += 1;
}
if(aWords == bWords) {
cmp = bScore - aScore;
} else {
cmp = bWords - aWords;
}
return cmp;
});
}
listExamples(examples);
}
function showAll() {
document.getElementById("keywords").value = "";
listExamples(info.examples);
}
function parseQuery() {
var params = {};
var list = window.location.search.substring(1).split("&");
for(var i=0; i<list.length; ++i) {
var pair = list[i].split("=");
if(pair.length == 2) {
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
}
if(params["q"]) {
var input = document.getElementById("keywords");
input.value = params["q"];
inputChange.call(input);
}
}
window.onload = function() {
template = new jugl.Template("template");
target = document.getElementById("examples");
listExamples(info.examples);
document.getElementById("exwin").src = "../examples/example.html";
document.getElementById("keywords").onkeyup = inputChange
parseQuery();
};
kontrol = new OpenLayers.Control.MousePosition();
function a_db_button_cb() {
//map.zoomToMaxExtent();
map.addControl(kontrol);
}
function b_db_button_cb() {
//map.zoomToMaxExtent();
map.removeControl(kontrol);
}
Openlayers getfeatureinfo (from http://giifweb.cnr.berkeley.edu/fire/wind/gfi/gfi.html)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 600px;
height: 600px;
border: 1px inset black;
}
</style>
<script>
if(window.console == undefined){ console = {}; console.debug = function(){}}
</script>
<script src="http://openlayers.org/api/2.3/OpenLayers.js"></script>
<script type="text/javascript">
var map, layers;
OpenLayers.Layer.WMS.prototype.getFeatureInfoURL = function(e/*,info_format*/){
var x = e.xy.x
var y = e.xy.y
/*
var el = Event.findElement(e,'div');
var p = OpenLayers.Util.pagePosition(el);
x -= p[0];
y -= p[1];
*/
var url = this.getURL(this.map.getExtent())
.replace(/getMap/i,'getFeatureInfo');
var ms = this.map.getCurrentSize();
var format = arguments.length > 1 ? arguments[1] : 'text/plain'
url += '&x=' + x + '&y=' + y
+ '&QUERY_LAYERS=' + this.params.LAYERS
+ '&INFO_FORMAT=' + format;
url = url.replace(/&width=[^&\?$]+/i,'&WIDTH=' + ms.w)
.replace(/&height=[^&\?$]+/i,'&HEIGHT=' + ms.h)
return url
};
function init(){
map = new OpenLayers.Map($('map'),{projection:'EPSG:26910',
controls: [new OpenLayers.Control.MouseDefaults()],
maxExtent: new OpenLayers.Bounds(380000,3500000,1370000,4650000),
resolutions:[1600,1200,700,500,300,200,120,60,30,15,8]
});
muni = new OpenLayers.Layer.WMS( "Cities and Counties",
"gfi.wms"
, {layers: 'cacounties', format: 'image/png' }
, {
tileSize: new OpenLayers.Size(512,512)
,isBaseLayer:true
,reproject:false
}
);
map.addLayer(muni);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.setCenter(new OpenLayers.LonLat(857500,3927495),8)
map.zoomToMaxExtent()
map.events.register('click',map,mapquery);
function mapquery(evt){
var url = muni.getFeatureInfoURL(evt);
OpenLayers.loadURL(url,{},this,function(req){
alert(req.responseText)
});
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
redraw issue
//register a function on the "onscroll" event of the scrolled pane map.updateSize();
<a href="javascript: void map.pan(-map.getSize().w / 4, 0);"
accesskey="w">
pan <em>w</em>est
</a>
</td>
<td id="map" class="smallmap"></td>
<td>
<a href="javascript: void map.pan(map.getSize().w / 4, 0);"
accesskey="e">
pan <em>e</em>ast
</a>
</td>
</tr>
<tr>
<td> </td>
<td>
<a href="javascript: void map.pan(0, map.getSize().h / 4);"
accesskey="s">
pan <em>s</em>outh
function setScratchShape(WKTgeom) {
// assumes that vlayer is set in globals
var wktObj = new OpenLayers.Format.WKT;
var wktfeatures = wktObj.read(WKTgeom);
vlayer.addFeatures(wktfeatures);
vlayer.redraw();
}
LAT LON FROM CLICK
OpenLayers.Control.
ClickLayerInfo = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0, //tolarance
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
var lonLat = you_map.getLonLatFromViewPortPx(e.xy);
// you cant transform you lat and lon
// you can def a pixel buffer with the map resolution
// you can do a asyn call
}
});
function toggleControl(element) {
for (key in controls) {
if (element.value == key && element.checked) {
controls[key].activate();
} else {
controls[key].deactivate();
}
AND MAPFILE
var browserCode = OpenLayers.Util.getBrowserName();
switch (browserCode) {
case "opera":
browserName = "Opera";
break;
case "msie":
browserName = "Internet Explorer";
break;
case "safari":
browserName = "Safari";
break;
case "firefox":
browserName = "FireFox";
break;
case "mozilla":
browserName = "Mozilla";
break;
default:
browserName = "detection error"
break;
}
LAYER CONTROLS
{'displayInLayerSwitcher':false}
MAKE A BUTTON
var green = new OpenLayers.Control({
type: OpenLayers.Control.TYPE_BUTTON,
eventListeners: toolListeners,
displayClass: "green" ,
trigger: foo
?? decimal degrees to lat long ??
var PI = 3.14159265358979323846;
lon_map = lon * 20037508.34 / 180;
lat_map = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
lat_map = lat_map * 20037508.34 / 180;
MINIMAL CONTROLS
map = new OpenLayers.Map( 'map', { controls: [] });
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.zoomToMaxExtent();
ZOOM INTO A MAP
// map.zoomToMaxExtent(); bounds = new OpenLayers.Bounds( -94.036389, 30.888094 ,-93.937035, 30.927913 ); map.zoomToExtent(bounds);
<style type="text/css">
#map {
width: 100%;
height: 90%;
border: 1px solid red;
}
</style>
//map.addLayers([roads]); map.addLayer(taxlot);
SELECT A FEATURE (INSIDE INIT FUNC)
// Create a select feature control and add it to the map.
var select = new OpenLayers.Control.SelectFeature(layer, {click: true});
map.addControl(select);
select.activate();
Simple function to log text
function log(msg) {
document.getElementById("output").innerHTML += msg + "\n";
}
Simple function to read text
function read() {
textstr = document.getElementById('text').value;
}
selecting features
<script type="text/javascript">
var map, selectControl;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
externalGraphic: "../img/marker-green.png",
graphicOpacity: 1,
rotation: -45,
pointRadius: 10
}, OpenLayers.Feature.Vector.style["default"])),
"select": new OpenLayers.Style({
externalGraphic: "../img/marker-blue.png"
})
})
});
var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
fillColor: "red",
strokeColor: "gray",
graphicName: "square",
rotation: 45,
pointRadius: 15
}, OpenLayers.Feature.Vector.style["default"])),
"select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
graphicName: "square",
rotation: 45,
pointRadius: 15
}, OpenLayers.Feature.Vector.style["select"]))
})
});
map.addLayers([wmsLayer, vectors1, vectors2]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
selectControl = new OpenLayers.Control.SelectFeature(
[vectors1, vectors2],
{
clickout: true, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
);
map.addControl(selectControl);
selectControl.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
vectors1.addFeatures(createFeatures());
vectors2.addFeatures(createFeatures());
vectors1.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
}
});
vectors2.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
}
});
}
function createFeatures() {
var extent = map.getExtent();
var features = [];
for(var i=0; i<10; ++i) {
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(),
extent.bottom + (extent.top - extent.bottom) * Math.random()
)));
}
return features;
}
function showStatus(text) {
document.getElementById("status").innerHTML = ('fooi'+ text);
}
</script>
OpenLayers.Layer.WMS.prototype.getFeatureInfoURL = function(e /*,info_format*/){
var x = e.xy.x
var y = e.xy.y
var url = this.getURL(this.map.getExtent())
.replace(/getMap/i,'getFeatureInfo');
var ms = this.map.getCurrentSize();
var format = arguments.length > 1 ? arguments[1] : 'text/plain'
url += '&x=' + x + '&y=' + y
+ '&QUERY_LAYERS=' + this.params.LAYERS
+ '&INFO_FORMAT=' + format;
url = url.replace(/&width=[^&\?$]+/i,'&WIDTH=' + ms.w)
.replace(/&height=[^&\?$]+/i,'&HEIGHT=' + ms.h)
return url
};
example:
map.events.register('click',mapquery);
function mapquery(evt){
var url = muni.getFeatureInfoURL(evt);
OpenLayers.loadURL(url,{},this,function(req){
alert(req.responseText)
});
}
Create a style map for painting the features.
var styles = new OpenLayers.StyleMap({
"default": {
graphicName: "${type}",
pointRadius: 10,
strokeColor: "fuchsia",
strokeWidth: 2,
fillColor: "lime",
fillOpacity: 0.1
},
"select": {
pointRadius: 20,
fillOpacity: .5
}
});
var layer = new OpenLayers.Layer.Vector(
"Graphics", {styleMap: styles, isBaseLayer: true}
);
FEEDBACK TO HTML DOCUMENT
function foo() {
//document.write("FOOOOO" )
document.getElementById('text').value = "FOOOOO" ;
}
function init() {
var element = document.getElementById('text');
var type = document.getElementById("formatType").value;
//document.write( )
//document.close
foo()
}
<br />
<textarea id="text">paste text here...</textarea>
<br />
OPENLAYERS EXAMPLES
SELECT FEATURE MULTI
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SelectFeature Control on multiple vector layers</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, selectControl;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
externalGraphic: "../img/marker-green.png",
graphicOpacity: 1,
rotation: -45,
pointRadius: 10
}, OpenLayers.Feature.Vector.style["default"])),
"select": new OpenLayers.Style({
externalGraphic: "../img/marker-blue.png"
})
})
});
var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
fillColor: "red",
strokeColor: "gray",
graphicName: "square",
rotation: 45,
pointRadius: 15
}, OpenLayers.Feature.Vector.style["default"])),
"select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
graphicName: "square",
rotation: 45,
pointRadius: 15
}, OpenLayers.Feature.Vector.style["select"]))
})
});
map.addLayers([wmsLayer, vectors1, vectors2]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
selectControl = new OpenLayers.Control.SelectFeature(
[vectors1, vectors2],
{
clickout: true, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
);
map.addControl(selectControl);
selectControl.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
vectors1.addFeatures(createFeatures());
vectors2.addFeatures(createFeatures());
vectors1.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
}
});
vectors2.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
}
});
}
function createFeatures() {
var extent = map.getExtent();
var features = [];
for(var i=0; i<10; ++i) {
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(),
extent.bottom + (extent.top - extent.bottom) * Math.random()
)));
}
return features;
}
function showStatus(text) {
document.getElementById("status").innerHTML = text;
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>
<p id="shortdesc">
Select a feature on click with the Control.SelectFeature on multiple
vector layers.
</p>
<div id="map" class="smallmap"></div>
<div id="status"></div>
</body>
</html>
BBOXES
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Boxes Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var box_extents = [
[-10, 50, 5, 60],
[-75, 41, -71, 44],
[-122.6, 37.6, -122.3, 37.9],
[10, 10, 20, 20]
];
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
var boxes = new OpenLayers.Layer.Boxes( "Boxes" );
for (var i = 0; i < box_extents.length; i++) {
ext = box_extents[i];
bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
box = new OpenLayers.Marker.Box(bounds);
box.events.register("click", box, function (e) {
this.setBorder("yellow");
});
boxes.addMarker(box);
}
map.addLayers([ol_wms, boxes]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Boxes Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrate marker and box type annotations on a map.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
TRANSFORM GEOMETRY /ANIMATION
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Rotate Features Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
p {
width: 500px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, pointFeature, lineFeature, polygonFeature;
function init(){
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
var style_blue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
style_blue.strokeColor = "blue";
style_blue.fillColor = "blue";
var style_green = {
strokeColor: "#339933",
strokeOpacity: 1,
strokeWidth: 3,
pointRadius: 6,
pointerEvents: "visiblePainted"
};
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
// create a point feature
var point = new OpenLayers.Geometry.Point(-110, 45);
pointFeature = new OpenLayers.Feature.Vector(point, null, style_blue);
// create a line feature from a list of points
var pointList = [];
var newPoint = point;
for(var p=0; p<5; ++p) {
newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
newPoint.y + Math.random(1));
pointList.push(newPoint);
}
lineFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(pointList),null,style_green);
// create a polygon feature from a linear ring of points
var pointList = [];
for(var p=0; p<6; ++p) {
var a = p * (2 * Math.PI) / 7;
var r = Math.random(1) + 1;
var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
point.y + (r * Math.sin(a)));
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
map.addLayer(vectorLayer);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([pointFeature, lineFeature, polygonFeature]);
// start rotating
var origin = new OpenLayers.Geometry.Point(-111.04, 45.68);
var style = {
strokeColor: "#666666",
strokeOpacity: 1,
strokeWidth: 1,
pointRadius: 2,
pointerEvents: "visiblePainted"
};
var center = new OpenLayers.Feature.Vector(origin, null, style);
vectorLayer.addFeatures([center]);
//
window.setInterval(function() {rotateFeature(
pointFeature, 360 / 20, origin)}, 100);
window.setInterval(function() {rotateFeature(
lineFeature, 360 / 40, origin)}, 100);
window.setInterval(function(){rotateFeature(
polygonFeature, -360 / 20, origin)}, 100);
}
function rotateFeature(feature, angle, origin) {
feature.geometry.rotate(angle, origin);
feature.layer.drawFeature(feature);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Rotate vector features</h1>
<div id="tags">
</div>
<p id="shortdesc">
Details on how to create and rotate vector features programmatically
</p>
<div id="map" class="smallmap"></div>
<div id="docs">This example shows a few features rotating. There is not yet a control
built that provides a tool for rotating, but the geometry.rotate method
can be accessed to rotate programmatically.</div>
</body>
</html>
UNTESTED PHP/MAPSCRIPT OPENLAYERS EXAMPLE
<?php
dl ("php_mapscript.so");
$request = ms_newowsrequestobj();
$request->loadparams();
ms_ioinstallstdouttobuffer();
$map_path="/srv/www/myParams/";
$map = ms_newMapObj ($map_path."myMap.map");
$layer = $map -> getLayerByName("raster");
//$status = $layer->open();
$layer->set('data', "map_t20000301.png");
$map->owsdispatch($request);
$contenttype = ms_iostripstdoutbuffercontenttype();
if ($contenttype == 'image/png')
header('Content-type: image/png');
if ($contenttype == 'EPSG:31297')
header('Content-type: EPSG:31297');
ms_iogetStdoutBufferBytes();
ms_ioresethandlers();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
border: 1px solid black;
}
</style>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR2u8XBOSW6nD0EysQCNUzBQZmcFgIuRIoj6x9OmiSWLkRa7V-xRghlR9wzkaXaJmyfIr5MvIb6GeGA'></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var lon = 5;
var lat = 40;
var zoom = 5;
var map, markers;
var florida = new OpenLayers.LonLat(30.46,
84.28);
var map, canvas;
var click;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var g = new OpenLayers.Layer.Google("Google");
canvas = new OpenLayers.Layer.Canvas("Canvas Layer");
map.addLayers([ol_wms, g,canvas]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-82.08984, 28.25), 4);
// canvas.setStrokeColor("red");
canvas.setAlpha(.5);
canvas.drawCircle(new OpenLayers.LonLat(-79.5, 35.0), 30);
canvas.drawCircle(new OpenLayers.LonLat(-75.4, 37.0 ), 35);
canvas.drawCircle(new OpenLayers.LonLat(-68.6, 39.8), 45);
canvas.drawCircle(new OpenLayers.LonLat(-62.0, 43.0), 50);
canvas.drawCircle(new OpenLayers.LonLat(-56.0, 46.0), 50);
canvas.drawCircle(new OpenLayers.LonLat(-35.0, 53.0), 45);
canvas.drawCircle(new OpenLayers.LonLat(-20.0, 56.0), 40);
canvas.drawCircle(new OpenLayers.LonLat(-10.0, 56.0), 35);
map.events.register("click", map, function(e) {
if (click) {
canvas.drawLine(click, this.getLonLatFromPixel(e.xy));
click = null;
$('status').innerHTML = "";
}
else {
click = this.getLonLatFromPixel(e.xy);
$('status').innerHTML = "Point 1 stored: "+click+". <a href='#' onclick='click=null;return false'>Reset</a>";
}
});
}
function drawIt() {
canvas.drawCircle(
new OpenLayers.LonLat(parseFloat($('lon1').value), parseFloat($('lat1').value)), parseFloat($('radius').value) );
/*
canvas.drawLine(
new OpenLayers.LonLat(parseFloat($('lon1').value), parseFloat($('lat1').value)),
new OpenLayers.LonLat(parseFloat($('lon2').value), parseFloat($('lat2').value))
);
*/
}
// -->
</script>
</head>
<body onload="init()">
<h1>OpenLayers Example</h1>
<div id="map"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Josh's Openlayers Project</title>
<style type="text/css">
input, select, textarea {
font: 0.9em Verdana, Arial, sans-serif;
}
#map {
width: 512px;
height: 225px;
border: 1px solid #ccc;
}
#input {
width: 512px;
}
#userkml {
font-size: 0.85em;
margin: 1em 0 1em 0;
width: 100%;
height: 10em;
}
#info {
position: relative;
padding: 2em 0;
margin-left: 540px;
}
#output {
font-size: 0.8em;
width: 100%;
border: 1px solid #ccc;
}
p {
margin: 0;
padding: 0.75em 0 0.75em 0;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, vectors, formats;
var proj = "EPSG:4326";
alert(proj);
var filetype = "kml";
alert(filetype);
function updateFormats() {
var in_options = {
'internalProjection': map.baseLayer.projection,
'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("proj"))
};
var out_options = {
'internalProjection': map.baseLayer.projection,
'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("proj"))
};
formats = {
'in': {
kml: new OpenLayers.Format.KML(in_options)
},
'out': {
kml: new OpenLayers.Format.KML(out_options)
}
};
}
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
var options = {
multiple: true,
onSelect: serialize
};
var select = new OpenLayers.Control.SelectFeature(vectors, options);
map.addControl(select);
select.activate();
updateFormats();
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
function serialize(feature) {
var type = filetype;
var shape = feature.geometry;
var name = feature.attributes['Placemark','name'];
alert(name);
alert(shape);
var str = formats['out'][type].write(feature);
// not a good idea in general, just for this demo
str = str.replace(/,/g, ', ');
document.getElementById('output').value = str;
}
/*function clearMap() {
var erase = new OpenLayers.Control.removeFeatures(features);
map.addControl(erase);
erase.activate();
}*/
function deserialize() {
var element = document.getElementById('userkml');
var type = filetype;
var features = formats['in'][type].read(element.value);
var bounds;
if(features) {
if(features.constructor != Array) {
features = [features];
}
for(var i=0; i<features.length; ++i) {
if (!bounds) {
bounds = features[i].geometry.getBounds();
} else {
bounds.extend(features[i].geometry.getBounds());
}
}
vectors.addFeatures(features);
map.zoomToExtent(bounds);
var plural = (features.length > 1) ? 's' : '';
element.value = features.length + ' feature' + plural + ' added'
} else {
element.value = 'Bad input ' + type;
}
}
// preload images
(function() {
var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
var onImages = [];
var offImages = [];
for(var i=0; i<roots.length; ++i) {
onImages[i] = new Image();
onImages[i].src = "../images/" + roots[i] + "_on.png";
offImages[i] = new Image();
offImages[i].src = "../images/" + roots[i] + "_on.png";
}
})();
</script>
</head>
<body onload="init()">
<div id="map"></div>
<div id="input">
<p>Draw...</p>
<br />
<textarea id="output"></textarea>
<br />
<textarea id="userkml">Paste Your KML Here...</textarea>
<br />
<input type="button" value="Add Your KML" onclick="deserialize();" />
<!--<input type="button" value="Clear Map" onclick="clearMap();" />-->
</div>
</body>
</html>
