[OpenLayers-Commits] r3142 - in sandbox: . cameron cameron/TextLablePopup
commits at openlayers.org
commits at openlayers.org
Tue May 8 21:43:35 EDT 2007
Author: camerons
Date: 2007-05-08 21:43:35 -0400 (Tue, 08 May 2007)
New Revision: 3142
Added:
sandbox/cameron/
sandbox/cameron/TextLablePopup/
sandbox/cameron/TextLablePopup/Default.html
sandbox/cameron/TextLablePopup/Popup2.js
Log:
Example which shows text labels on a polygon using a modified version of Popup.js. This code needs to be cleaned up if it is to be put into the trunk. Im putting it in svn now so that I can keep it somewhere and dont loose it.
Added: sandbox/cameron/TextLablePopup/Default.html
===================================================================
--- sandbox/cameron/TextLablePopup/Default.html (rev 0)
+++ sandbox/cameron/TextLablePopup/Default.html 2007-05-09 01:43:35 UTC (rev 3142)
@@ -0,0 +1,197 @@
+<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head runat="server">
+ <title>Terra Test</title>
+ <style type="text/css">
+ html,body {
+ height: 99%;
+ width: 99%;
+ }
+ #map {
+ width: 100%;
+ height: 100%;
+ border: 1px solid black;
+ background-color: rgb(200,200,200);
+ }
+ </style>
+ <script type="text/javascript" src="http://openlayers.org/api/2.4-rc2/OpenLayers.js"></script>
+ <!--script type="text/javascript" src="../lib/OpenLayers.js"></script-->
+ <script type="text/javascript" src="Popup2.js"></script>
+ <script type="text/javascript">
+
+ var map;
+
+ function init(){
+ /**
+ * maxResolutions is a factor of 2...
+ * examples:
+ * 0.703125/2
+ * 0.703125/4
+ * 0.703125/8
+ * 0.703125/16 and so on....
+ */
+
+ var map;
+ var reduceZoomLevelsBy = 4; //number from 0 to 19
+
+ map = new OpenLayers.Map(
+ $('map'),
+ {
+ maxResolution: (0.703125 / Math.pow(2,reduceZoomLevelsBy)),
+ numZoomLevels: (20 - reduceZoomLevelsBy),
+ controls: [
+ new OpenLayers.Control.MouseDefaults(),
+ new OpenLayers.Control.Scale(),
+ new OpenLayers.Control.PanZoomBar(),
+ new OpenLayers.Control.MousePosition()
+ ],
+ buffer: 1
+ }
+ );
+
+ /*
+ * Browsers only allow a few requests from a single domain
+ * concurrently. To get around this, use an number of
+ * domains to request map tiles from.
+ */
+ var wmsc = [
+ "http://wmsc1.terrapages.net/getmap?",
+ "http://wmsc2.terrapages.net/getmap?",
+ "http://wmsc3.terrapages.net/getmap?",
+ "http://wmsc4.terrapages.net/getmap?"
+ ];
+
+ var terrapagesStreetLayer = new OpenLayers.Layer.WMS( "TerraPages Street Map",wmsc, {layers: 'UnprojectedStreet', format: 'image/jpeg' }, {buffer: 1, isBaseLayer: true} );
+ map.addLayer(terrapagesStreetLayer);
+
+ //var overview = new OpenLayers.Control.OverviewMap(
+ // {
+ // layers: [terrapagesStreetLayer.clone()],
+ // mapOptions: {maxResolution: 0.703125}
+ // }
+ // );
+ //map.addControl(overview);
+ //overview.maximizeControl();
+
+ //Set the starting position, Alice Springs, and zoom right out.
+ //map.setCenter(new OpenLayers.LonLat(133.8807,-23.6994),0);
+
+ //drawPolygon2(map);
+
+//alert("debug1");
+ try {
+
+ // PROBLEM HERE !!!!!!! - 2ND PARAMETER????
+ var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
+ }
+
+ catch (e) {
+//alert(e.message);
+ }
+//alert("debug3");
+
+ // create a point feature
+ var point = new OpenLayers.Geometry.Point(153.3970, -28.0636);
+ var pointFeature = new OpenLayers.Feature.Vector(point);
+
+ // 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);
+ }
+ var lineFeature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.LineString(pointList));
+
+ // create a polygon feature from a linear ring of points
+ var pointList = [];
+
+ // Gavin, look here:
+ var bounds=null;
+
+ 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)));
+ // Gavin, look here:
+ // Set Bounding Box for the Polygon
+ if(bounds){
+ bounds.extend(newPoint);
+ }else{
+ bounds=new OpenLayers.Bounds(newPoint.x,newPoint.y,newPoint.x,newPoint.y);
+ }
+
+
+ pointList.push(newPoint);
+ }
+ pointList.push(pointList[0]);
+
+ // Gavin, look here:
+ // Set up the style for rendered poly, line, point
+ var style1={default:{
+ fillColor: "#FF0000",
+ fillOpacity: 0.4,
+ hoverFillColor: "white",
+ hoverFillOpacity: 0.8,
+ strokeColor: "#00FF00",
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ hoverStrokeColor: "red",
+ hoverStrokeOpacity: 1,
+ hoverStrokeWidth: 0.2,
+ pointRadius: 6,
+ hoverPointRadius: 1,
+ hoverPointUnit: "%",
+ pointerEvents: "visiblePainted"
+ }};
+ var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
+
+ // Gavin, look here:
+ var polygonFeature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Polygon([linearRing]),style1);
+
+ // Gavin, look here:
+ // Calculate the mid point for the Polygon
+ var midpoint=new OpenLayers.LonLat(
+ (bounds.left+bounds.right)/2,(bounds.bottom+bounds.top)/2);
+
+
+ map.addLayer(vectorLayer);
+ map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
+ vectorLayer.addFeatures([pointFeature, lineFeature, polygonFeature]);
+
+ // Gavin, look here:
+ // Zoom to a specific bounding box
+ map.zoomToExtent(bounds);
+
+ // Gavin, look here:
+ var popup = new OpenLayers.Popup2(null,
+ midpoint,
+ // set the max width/height of a text label
+ new OpenLayers.Size(200,80),
+ "example popup",
+ false);
+
+ // Gavin, look here:
+ // Set the text and background text color
+ popup.setContentHTML("<font style='background:yellow'> abc def </font>");
+ popup.setBackgroundColor("transparent");
+ //popup.setOpacity(0.5);
+ map.addPopup(popup);
+ }
+ </script>
+</head>
+
+<body onload="init()">
+ <form id="form1" runat="server">
+ <div id="map">
+ </div>
+ </form>
+</body>
+</html>
Added: sandbox/cameron/TextLablePopup/Popup2.js
===================================================================
--- sandbox/cameron/TextLablePopup/Popup2.js (rev 0)
+++ sandbox/cameron/TextLablePopup/Popup2.js 2007-05-09 01:43:35 UTC (rev 3142)
@@ -0,0 +1,383 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/repository-license.txt
+ * for the full text of the license. */
+
+
+/**
+ * @class
+ */
+OpenLayers.Popup2 = OpenLayers.Class.create();
+
+OpenLayers.Popup2.WIDTH = 200;
+OpenLayers.Popup2.HEIGHT = 200;
+OpenLayers.Popup2.COLOR = "white";
+OpenLayers.Popup2.OPACITY = 1;
+OpenLayers.Popup2.BORDER = "0px";
+
+OpenLayers.Popup2.prototype = {
+
+ /** @type OpenLayers.Events*/
+ events: null,
+
+ /** @type String */
+ id: "",
+
+ /** @type OpenLayers.LonLat */
+ lonlat: null,
+
+ /** @type DOMElement */
+ div: null,
+
+ /** @type OpenLayers.Size*/
+ size: null,
+
+ /** @type String */
+ contentHTML: "",
+
+ /** @type String */
+ backgroundColor: "",
+
+ /** @type float */
+ opacity: "",
+
+ /** @type String */
+ border: "",
+
+ /** @type DOMElement */
+ contentDiv:null,
+
+ /** @type int */
+ padding: 5,
+
+
+ /** this gets set in Map.js when the popup is added to the map
+ * @type OpenLayers.Map */
+ map: null,
+
+ /**
+ * @constructor
+ *
+ * @param {String} id
+ * @param {OpenLayers.LonLat} lonlat
+ * @param {OpenLayers.Size} size
+ * @param {String} contentHTML
+ * @param {Boolean} closeBox
+ */
+ initialize:function(id, lonlat, size, contentHTML, closeBox) {
+ if (id == null) {
+ id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
+ }
+
+ this.id = id;
+ this.lonlat = lonlat;
+ this.size = (size != null) ? size
+ : new OpenLayers.Size(
+ OpenLayers.Popup2.WIDTH,
+ OpenLayers.Popup2.HEIGHT);
+ this.backgroundColor = OpenLayers.Popup2.COLOR;
+ this.opacity = OpenLayers.Popup2.OPACITY;
+ this.border = OpenLayers.Popup2.BORDER;
+
+ this.div = OpenLayers.Util.createDiv(this.id, null, null,
+ null, null, null, "hidden");
+ this.div.className = 'olPopup2';
+
+ var id = this.div.id + "_contentDiv";
+ this.contentDiv = OpenLayers.Util.createDiv(id, null, this.size.clone(),
+ null, "relative", null,
+ "hidden");
+ this.contentDiv.className = 'olPopup2Content';
+ this.div.appendChild(this.contentDiv);
+ this.setContentHTML(contentHTML);
+ this.updatePosition();
+
+ if (closeBox == true) {
+ // close icon
+ var closeSize = new OpenLayers.Size(17,17);
+ var img = OpenLayers.Util.getImagesLocation() + "close.gif";
+ var closeImg = OpenLayers.Util.createAlphaImageDiv(this.id + "_close",
+ null,
+ closeSize,
+ img);
+ closeImg.style.right = this.padding + "px";
+ closeImg.style.top = this.padding + "px";
+ this.div.appendChild(closeImg);
+
+ var closePopup2 = function(e) {
+ this.hide();
+ OpenLayers.Event.stop(e);
+ }
+ OpenLayers.Event.observe(closeImg, "click",
+ closePopup2.bindAsEventListener(this));
+
+ }
+
+ this.registerEvents();
+ },
+
+ /**
+ */
+ destroy: function() {
+ if (this.map != null) {
+ this.map.removePopup2(this);
+ this.map = null;
+ }
+ this.events.destroy();
+ this.events = null;
+ this.div = null;
+ },
+
+ /**
+ * @param {OpenLayers.Pixel} px
+ *
+ * @returns Reference to a div that contains the drawn popup
+ * @type DOMElement
+ */
+ draw: function(px) {
+ if (px == null) {
+ if ((this.lonlat != null) && (this.map != null)) {
+ px = this.map.getLayerPxFromLonLat(this.lonlat);
+ }
+ }
+
+ this.setSize();
+ this.setBackgroundColor();
+ this.setOpacity();
+ this.setBorder();
+ this.setContentHTML();
+ this.moveTo(px);
+
+ return this.div;
+ },
+
+ /**
+ * if the popup has a lonlat and its map members set,
+ * then have it move itself to its proper position
+ */
+ updatePosition: function() {
+ if ((this.lonlat) && (this.map)) {
+ var px = this.map.getLayerPxFromLonLat(this.lonlat);
+ var tableDiv=document.getElementById(this.id+"_table");
+ if(tableDiv){
+ px.x=px.x-tableDiv.clientWidth/2;
+ px.y=px.y-tableDiv.clientHeight/2;
+ }
+ this.moveTo(px);
+ }
+ },
+
+ /**
+ * @param {OpenLayers.Pixel} px
+ */
+ moveTo: function(px) {
+ if ((px != null) && (this.div != null)) {
+ this.div.style.left = px.x + "px";
+ this.div.style.top = px.y + "px";
+ }
+ },
+
+ /**
+ * @returns Boolean indicating whether or not the popup is visible
+ * @type Boolean
+ */
+ visible: function() {
+ return OpenLayers.Element.visible(this.div);
+ },
+
+ /**
+ *
+ */
+ toggle: function() {
+ OpenLayers.Element.toggle(this.div);
+ },
+
+ /**
+ *
+ */
+ show: function() {
+ OpenLayers.Element.show(this.div);
+ },
+
+ /**
+ *
+ */
+ hide: function() {
+ OpenLayers.Element.hide(this.div);
+ },
+
+ /**
+ * @param {OpenLayers.Size} size
+ */
+ setSize:function(size) {
+ if (size != undefined) {
+ this.size = size;
+ }
+
+ if (this.div != null) {
+ this.div.style.width = this.size.w + "px";
+ this.div.style.height = this.size.h + "px";
+ }
+ if (this.contentDiv != null){
+ this.contentDiv.style.width = this.size.w + "px";
+ this.contentDiv.style.height = this.size.h + "px";
+ }
+ },
+
+ /**
+ * @param {String} color
+ */
+ setBackgroundColor:function(color) {
+ if (color != undefined) {
+ this.backgroundColor = color;
+ }
+
+ if (this.div != null) {
+ this.div.style.backgroundColor = this.backgroundColor;
+ }
+ },
+
+ /**
+ * @param {float} opacity
+ */
+ setOpacity:function(opacity) {
+ if (opacity != undefined) {
+ this.opacity = opacity;
+ }
+
+ if (this.div != null) {
+ // for Mozilla and Safari
+ this.div.style.opacity = this.opacity;
+
+ // for IE
+ this.div.style.filter = 'alpha(opacity=' + this.opacity*100 + ')';
+ }
+ },
+
+ /**
+ * @param {int} border
+ */
+ setBorder:function(border) {
+ if (border != undefined) {
+ this.border = border;
+ }
+
+ if (this.div != null) {
+ this.div.style.border = this.border;
+ }
+ },
+
+ /**
+ * @param {String} contentHTML
+ */
+ setContentHTML:function(contentHTML) {
+ if (contentHTML != null) {
+ this.contentHTML = contentHTML;
+ }
+
+ if (this.contentDiv != null) {
+ this.contentDiv.innerHTML =
+ "<table id="
+ +this.id
+ +"_table>"
+ +this.contentHTML
+ +"</table>";
+ }
+ },
+
+
+
+ /** Do this in a separate function so that subclasses can
+ * choose to override it if they wish to deal differently
+ * with mouse events
+ *
+ * Note in the following handler functions that some special
+ * care is needed to deal correctly with mousing and popups.
+ *
+ * Because the user might select the zoom-rectangle option and
+ * then drag it over a popup, we need a safe way to allow the
+ * mousemove and mouseup events to pass through the popup when
+ * they are initiated from outside.
+ *
+ * Otherwise, we want to essentially kill the event propagation
+ * for all other events, though we have to do so carefully,
+ * without disabling basic html functionality, like clicking on
+ * hyperlinks or drag-selecting text.
+ */
+ registerEvents:function() {
+ this.events = new OpenLayers.Events(this, this.div, null, true);
+
+ this.events.register("mousedown", this, this.onmousedown);
+ this.events.register("mousemove", this, this.onmousemove);
+ this.events.register("mouseup", this, this.onmouseup);
+ this.events.register("click", this, this.onclick);
+ this.events.register("mouseout", this, this.onmouseout);
+ this.events.register("dblclick", this, this.ondblclick);
+ },
+
+ /** When mouse goes down within the popup, make a note of
+ * it locally, and then do not propagate the mousedown
+ * (but do so safely so that user can select text inside)
+ *
+ * @param {Event} evt
+ */
+ onmousedown: function (evt) {
+ this.mousedown = true;
+ OpenLayers.Event.stop(evt, true);
+ },
+
+ /** If the drag was started within the popup, then
+ * do not propagate the mousemove (but do so safely
+ * so that user can select text inside)
+ *
+ * @param {Event} evt
+ */
+ onmousemove: function (evt) {
+ if (this.mousedown) {
+ OpenLayers.Event.stop(evt, true);
+ }
+ },
+
+ /** When mouse comes up within the popup, after going down
+ * in it, reset the flag, and then (once again) do not
+ * propagate the event, but do so safely so that user can
+ * select text inside
+ *
+ * @param {Event} evt
+ */
+ onmouseup: function (evt) {
+ if (this.mousedown) {
+ this.mousedown = false;
+ OpenLayers.Event.stop(evt, true);
+ }
+ },
+
+ /** Ignore clicks, but allowing default browser handling
+ *
+ * @param {Event} evt
+ */
+ onclick: function (evt) {
+ OpenLayers.Event.stop(evt, true);
+ },
+
+ /** When mouse goes out of the popup set the flag to false so that
+ * if they let go and then drag back in, we won't be confused.
+ *
+ * @param {Event} evt
+ *
+ * @type Boolean
+ */
+ onmouseout: function (evt) {
+ this.mousedown = false;
+ },
+
+ /** Ignore double-clicks, but allowing default browser handling
+ *
+ * @param {Event} evt
+ */
+ ondblclick: function (evt) {
+ OpenLayers.Event.stop(evt, true);
+ },
+
+ /** @final @type String */
+ CLASS_NAME: "OpenLayers.Popup2"
+};
More information about the Commits
mailing list