[OpenLayers-Users] KML layer in UTM coordinates

Sat Nov 1 14:38:03 EDT 2008

Dear OpenLayers community:

First of all, thanks to all of you for the development of this great tool!

And thanks for your time thinking about the problem i'm going to 
describe in the following frases:
I'm struggeling with adding a GML (KML) layer to a UTM map. Thinking it 
has to do with coordinate transformations, I intented to adopt the 
solutions described in mails in the list the last montths, but i can't 
bring the application to work - using OpenLayers version 2.7.

The Problem:
I've a map in UTM coordinates (Zone 28N, WGS84. EPGS: 32628), the 
basemap is a wms layer which is beeing displayed fine.
Now i want to add a Google Earth KML point layer, but it doesn't work 
(for the KML see the end of the mail).

What I did:
1. Created the defs EPSG32628.js the code is

Proj4js.defs["EPSG:32628"] = "+proj=utm +zone=28 +ellps=WGS84 
+datum=WGS84 +units=m +no_defs ";

2. Included the 3 scripts: proj4js.js EPSG32628.js and EPSG90013.js to 
the application via the script-tag.

Then starting to search for a solution do project the KML. I tried 2 
diferent ways described in the mailinglist, but without success. Even I 
don't know which way would be the smartest one.

FIRST WAY was proceeding like discussed by Saris and Eric in 
http://openlayers.org/pipermail/users/2008-October/008170.html – there i 
tried both solucions without success:
WAY 1a (see http://www.cenit-geosistemas.com/viewer/viewer1a.html ):

var kml = new OpenLayers.Layer.GML("KML", 
"http://cenit-geosistemas.com/visor/kml.kml", {
projection: new OpenLayers.Projection("EPSG:900913"),
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
}});

WAY 1b ( see http://www.cenit-geosistemas.com/viewer/viewer1b.html ):

var kml = new OpenLayers.Layer.GML("KML", 
"http://cenit-geosistemas.com/visor/kml.kml", {
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
internalProjection: new OpenLayers.Projection("ESPG:900913"),
externalProjection: new OpenLayers.Projection("ESPG:32628")
}});

=> SAME RESULTS for both cases:
IE7 and firefox displays the basemap and if the kml is activated the 
application has problem when navegating in the map.

SECOND WAY was redefining the preFeatureInsert Method of 
OpenLayers.Layer.Vector the way Mike described in 
http://www.nabble.com/reprojection-of-vector-layer-from-wgs84-to-sphericalmercator-td14801474.html
(see http://www.cenit-geosistemas.com/viewer/viewer2.html )

preFeatureInsert = function(feature) {
var src = new OpenLayers.Projection('EPSG:900913');
var dest = new OpenLayers.Projection('EPSG:32628');
for (var i = 0; i < feature.geometry.components.length; i++) {
OpenLayers.Projection.transform(feature.geometry.components[i], src, dest);
}
};

// the definition of the kml-layer now looks like:

var kml = new OpenLayers.Layer.GML("KML", 
"http://cenit-geosistemas.com/visor/kml.kml", {
preFeatureInsert:preFeatureInsert,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
}});

Well, i even don't know if the problem has to do with the coordinate 
transformation if it is caused by something else...

Thanks a lot for any advice on how to display the KML in UTM coordinates 
with the EPSG:32628 wms-basemap!

Best regards,
Jan

***************************************

HERE COMES THE HTML AND THE KML:

FIRST THE HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display a KML-file in UTM coordenates in OpenLayers</title>
<link rel="stylesheet" href="mapa.css" type="text/css"></link>
<script type="text/javascript" src="OpenLayers/OpenLayers.js"></script>
<script type="text/javascript" src="proj4js/lib/proj4js.js"></script>
<script type="text/javascript" 
src="proj4js/lib/defs/EPSG900913.js"></script>
<script type="text/javascript" src="proj4js/lib/defs/EPSG32628.js"></script>
<script type="text/javascript" 
src="OpenLayers/lib/Firebug/firebug.js"></script>
<script type="text/javascript">

var map;

function init(){
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection('EPSG:32628'),
maxExtent: new OpenLayers.Bounds(319000, 3116000, 335300, 3128000),
units: 'm',
maxResolution: 'auto',
controls: []
});

var wms = new OpenLayers.Layer.WMS("Ortofoto", 
"http://idecan3.grafcan.es/ServicioWMS/OrtoExpress?", {
'layers': 'ortoexpress',
'srs':'EPSG:32628'
});

//HERE I INSERTED THE DIFERENT ATTEMPTS TO DEFINE THE KML-LAYER 
DESCRIBED ABOVE!
var kml = new OpenLayers.Layer.GML( -- see above --- );

map.addLayers([wms,kml]);

map.addControl(new OpenLayers.Control.PanZoom());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseDefaults());

var center, zoom;
center = new OpenLayers.LonLat(327150, 3122000);
zoom = map.getZoomForExtent(map.maxExtent);
map.setCenter(center, zoom);
}

</script>
</head>
<body onload="init()">
<table width="100%" height="100%">
<tr>
<td style="vertical-align:top" width="250px">
<div id="titulo">KML with LongLat coordinates in OpenLayers 
(UTM)</div><br><br>
<a href="http://www.cenit-geosistemas.com/viewer/kml.kml"> View the kml 
en google earth </a><br>
<p>Datos: Grafcan<br> SRS: WGS84 UTM Zone 28N</p>
</td>
<td>
<div id="map"></div>
</td>
</tr>
</table>
</body>
</html>

*****

AND THE KML

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>KML</name>
<Style id="sh_sunny">
<IconStyle>
<scale>1.4</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
</Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<Style id="sn_sunny">
<IconStyle>
<scale>1.1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
</Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<StyleMap id="msn_sunny">
<Pair>
<key>normal</key>
<styleUrl>#sn_sunny</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#sh_sunny</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>Horno</name>
<description></description>
<LookAt>
<longitude>-16.749093</longitude>
<latitude>28.196578</latitude>
<altitude>0</altitude>
<range>14987.2345530687</range>
<tilt>0</tilt>
<heading>-5.761902813094587</heading>
<altitudeMode>relativeToGround</altitudeMode>
</LookAt>
<styleUrl>#sn_horno</styleUrl>
<Point>
<coordinates>-16.749093, 28.196578,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>