[OpenLayers-Users] How to create a map on the fly, by clicking a button

Tobias Weiß tobias.weiss at pik-potsdam.de
Tue Jan 26 16:06:39 EST 2010


AFAIK, the div property of the OpenLayers.Map object can either be a
DOMElement or a String:
http://dev.openlayers.org/releases/OpenLayers-2.8/doc/apidocs/files/OpenLayers/Map-js.html

Your code seems to be a little weird. Leave out the first function
MyViewer() part, then it should work.

function MyViewer(div){
	this.container = div;
	this.map = new OpenLayers.Map( div, {projection: new
OpenLayers.Projection("EPSG:23030"), units: 'm', maxExtent: new
OpenLayers.Bounds(460000, 4710000, 610000, 4820000), maxResolution:
292.96875});
		 
		...layer definition...
			
		map.zoomToMaxExtent();

		document.getElementById(this.container).style.visibility =
"visible";
	}

Have a look at Prototype (http://prototypejs.org/) or jQuery (jquery.com) to make your life with JavaScript more comfortable.

> document.getElementById(this.container).style.visibility = "visible";
will become 
> Element.show(this.container)

Best, Tobi

---
Am 26.01.10 18:00, schrieb Arnd Wippermann:
> Hi,
>
> Your parameter is a string and not an object
>
> var visor = new MyViewer('map'); 
>
> Perhaps this will work:
>
> 	function MyViewer(div){
> 		this.container = document.getElementById(div);
>
>
> -----Ursprüngliche Nachricht-----
> Von: users-bounces at openlayers.org [mailto:users-bounces at openlayers.org] Im
> Auftrag von David Alda Fernandez de Lezea
> Gesendet: Dienstag, 26. Januar 2010 17:23
> An: openlayers users
> Betreff: [OpenLayers-Users] How to create a map on the fly,by clicking a
> button
>
> Hello list, 
>
> I'm trying to make a Gis Web Viewer and I need to generate a Map, after
> clicking a link/button from one div, into another div. I've created an
> Object class like this
>
> function MyViewer(){
>
> 	
> 	var map;
> 	var container;
> 	
> 	
> 	this.MyViewer= MyViewer;
> 	
> 	
> 	function MyViewer(div){
> 		this.container = div;
> 		this.map = new OpenLayers.Map( div, {projection: new
> OpenLayers.Projection("EPSG:23030"), units: 'm', maxExtent: new
> OpenLayers.Bounds(460000, 4710000, 610000, 4820000), maxResolution:
> 292.96875});
> 		 
> 		...layer definition...
> 			
> 		map.zoomToMaxExtent();
>
> 		document.getElementById(this.container).style.visibility =
> "visible";
> 	}
> }
>
> And my html looks like this:
>
> #map { border-style: solid;
> border-width: 1px;
> margin: 0px auto;
> width: 650px;
> height: 450px;
> position: relative;
> float: right;
> overflow: auto;
> visibility: hidden;
> }
>
> ....
>
> <body>
> <div id="cabecera">
> <h2>header</h2>
> </div>
> <div id="body">
> <script type="text/javascript">
> 		
> 	function init(){
> 		var visor = new MyViewer('map');
> 	}
>
> </script>	
> <a href="#" onclick="init();">ShowMap</a><br>
>
> </div>
> <div id="map">map...
> </div>
> </body>
>
> ...
>
> But I get an error on line
>
> document.getElementById(this.container).style.visibility = "visible";
>
> Saying:
>
> Uncaught TypeError: Cannot read property 'style' of null
>
> Is it possible to do what I'm trying to do ??
>
> Thanks.
>
>  
>  
> Un saludo,
>  
> ············································································
> ······
>
> David Alda Fernández de Lezea
> Lurralde eta Biodibertsitate Saila / Dpto. de Territorio y Biodiversidad
>  
> IKT
> Granja Modelo s/n · 01192 · Arkaute (Araba)
>
> ············································································
> ······
> Tlfnos.: 945-00-32-95                         Fax: 945-00.32.90
> ············································································
> ······
> email: dalda at ikt.es                                web: www.ikt.es
> ············································································
> ······
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>   


-- 
Dipl.-Ing. Tobias Weiß
Potsdam Institute for Climate Impact Research
Pappelallee 20, Room 316
14469 Potsdam
Germany

Phone: +49 / (0)331 / 288-2490
Location: http://bit.ly/1gOr64




More information about the Users mailing list