[OpenLayers-Users] Re: problem with browsers except firefox

Wed Feb 16 07:22:34 EST 2011

I forgot to put the code:

<html>
<head>
	<title>Simple OSM GPX Track</title>
	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script
src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

	<style type="text/css">
	@media print {
	div,a {display:none}
	.ver {display:block}
	.nover {display:none}
	}

.olControlZoomInItemInactive {

background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-plus-mini.png)
no-repeat;
    border:2px solid #232323;
    float:left;
    height:18px;
    margin-right:5px;
    width:18px;
}
.olControlZoomOutItemInactive {

background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-minus-mini.png)
no-repeat;
    border:2px solid #232323;
    float:left;
    height:18px;
    margin-right:5px;
    width:18px;
}

	</style>

	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=37.364677
		var lon=-4.681113
		var zoom=8

		var map; //complex object of type OpenLayers.Map

		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
				<!--	new OpenLayers.Control.PanZoomBar(),-->
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );

			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL
changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
			map.addLayer(layerTilesAtHome);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);

			// Add the Layer with the GPX Track
				var lgpx = new OpenLayers.Layer.GML("Ruta2", "track2.gpx", {
				format: OpenLayers.Format.GPX,
				style: {strokeColor: "green", strokeWidth: 4, strokeOpacity: 1},
				projection: new OpenLayers.Projection("EPSG:4326")
			});

			map.addLayers([lgpx]);

			map.mapExtent = new OpenLayers.Bounds(lgpx.getExtent);

			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new
OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);

			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new
OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));

			var external_control = new OpenLayers.Control.MousePosition({
					div: document.getElementById('external_control') });

			map.addControl(external_control);

			var external_panel = new OpenLayers.Control.Panel({
							div: document.getElementById('panel') });
			map.addControl(external_panel);

			var control_zoom_in = new OpenLayers.Control.ZoomIn();
			var control_zoom_out = new OpenLayers.Control.ZoomOut();
			map.addControl(control_zoom_in);
			map.addControl(control_zoom_out);

			external_panel.addControls([control_zoom_in, control_zoom_out]);

            select = new OpenLayers.Control.SelectFeature([lgpx]);

            lgpx.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });

            map.addControl(select);
            select.activate();

			function onPopupClose(evt) {
				select.unselectAll();
			}
			function onFeatureSelect(event) {
				var feature = event.feature;

				// Since KML is user-generated, do naive protection against
				// Javascript.
				var content = "<h2>"+feature.attributes.name + "</h2>" + <td> track2.gpx
Descargar track </td>;
				if (content.search("<script") != -1) {
					content = "Content contained Javascript! Escaped content below.<br />"
+ content.replace(/</g, "&lt;");
				}
				popup = new OpenLayers.Popup.FramedCloud("chicken",
										 feature.geometry.getBounds().getCenterLonLat(),
										 new OpenLayers.Size(100,100),
										 content,
										 null, true, onPopupClose);
				feature.popup = popup;
				map.addPopup(popup);
			}
			function onFeatureUnselect(event) {
				var feature = event.feature;
				if(feature.popup) {
					map.removePopup(feature.popup);
					feature.popup.destroy();
					delete feature.popup;
				}

			}
		}
	</script>

</head>
<!-- body.onload is called once the page is loaded (call the 'init'
function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the whole
window -->
	<div style="width:90%; height:90%" id="map"></div>
	<div id="external_control"></div>
	<div id="panel"></div>
</body>
</html>

-- 
View this message in context: http://osgeo-org.1803224.n2.nabble.com/problem-with-browsers-except-firefox-tp6031310p6031478.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.