[OpenLayers-Users] Re: OpenLayers.Layer.Vector shifted in IE9compatibility mode

Donald Kerr donald.kerr at dkerr.co.uk
Thu Apr 26 13:02:12 EDT 2012


Having done a good bit of research into labeling in Internet Explorer,
principly with trying to get label outlines working, I can confirm that
there are quite significant differences between the VML rendered in Internet
Explorer when compared to Canvas or SVG in both Chrome and Firefox;
certainly more than one pixel. I'm assuming that the issues you have are
related to VML and Internet Explorer and are therefore similar to the issues
I have experienced.

An example that allows various label alignments is available here:
https://github.com/openlayers/openlayers/issues/366#issuecomment-4824401

By changing the querystring, different renderers can be tested in various
browsers showing the position differences.

VML in Internet Explorer is not only different in terms of label positioning
(not that critical for me), but it's so slow that renderening any more than
a few tens of features can result in a map page becoming quite unusable from
a user experience point of view.

I have to admit that I have not tried IE9 and its SVG engine though I have
spoken to people who say that it is also quite slow. As for positioning, it
has to be better than IE8 and VML.

Microsoft will support IE8 and XP up to 2020 which means that there will be
no rush for corporations to change to IE9 which cannot be installed in XP.
Their VML flavour is deprecated and there will be no further development.
This leaves me, and others, with serious problems when developing vector
layers and labeling.

If you are in a position to install and use Google Chrome Frame (GCF), this
effectively takes over the rendering of the page and has a fast javascript
engine with rendering in SVG. I have some very good results using this
within an internal intranet where there is control over the user's browser.
If you're developing for the wider community the you'll simply have to
compromise and ensure that your code makes adjustments based on which
renderer is being used in the various browsers. I certainly cannot find
another way around it.

I hope this helps.

Regards,

Donald



-----Original Message-----
From: openlayers-users-bounces at lists.osgeo.org
[mailto:openlayers-users-bounces at lists.osgeo.org] On Behalf Of Andreas
Hocevar
Sent: 26 April 2012 17:36
To: Ricardo Bayley
Cc: openlayers-users at lists.osgeo.org
Subject: Re: [OpenLayers-Users] Re: OpenLayers.Layer.Vector shifted in
IE9compatibility mode


Is the shift about 1 pixel or more?

Andreas.

On Thu, Apr 26, 2012 at 10:35 AM, Ricardo Bayley <ricardo.bayley at gmail.com>
wrote:
> Ok, but it also happens with IE6. Yet to try IE7 and 8.
>
>
> 2012/4/25 Andreas Hocevar <ahocevar at opengeo.org>
>>
>> Probably not the answer you want to hear, but don't use compatibility 
>> mode. In standards mode, everything will work fine using the SVG 
>> renderer.
>>
>> Andreas.
>>
>> On Apr 25, 2012 1:07 PM, "Ricardo Bayley" <ricardo.bayley at gmail.com>
>> wrote:
>>>
>>> I checked if styling has anything to do with it.
>>> If I dont set any styling, leave default style, then features get 
>>> rendered properly.
>>>
>>> this is the styl I use
>>>
>>> var style = function(){
>>> var defaultStyle = new OpenLayers.Style({
>>> cursor:"pointer",
>>> graphicHeight: "14" ,
>>> graphicWidth : "14",
>>>         externalGraphic: "imgs/panoramio-marker.png",
>>>         graphicZIndex: 999
>>> }),
>>> selectStyle = new OpenLayers.Style({
>>> graphicZIndex: 1001,
>>> graphicHeight: "22",
>>> graphicWidth : "22"
>>> }),
>>> myStyle = new OpenLayers.StyleMap({
>>> 'default': defaultStyle,
>>> 'select': selectStyle
>>> });
>>>    return myStyle;
>>> };
>>>
>>> app.panoramio.layer.styleMap = style();
>>>
>>> FYI:  panoramio-marker.png is a 18px X 18px png file.
>>>
>>>
>>> Any ideas ?
>>>
>>>
>>> ricardo
>>>
>>>
>>>
>>> 2012/4/25 Ricardo Bayley <ricardo.bayley at gmail.com>
>>>>
>>>> Hi everyone,
>>>>
>>>> I am trying to load Panoramios pictures. It works great on every 
>>>> browser but in IE6, 7, 8 and IE9 compatibility mode features are 
>>>> not place properly. Location is shifted. If I select any feature 
>>>> and show the popup, then popup is shown in the correct X,Y 
>>>> location.
>>>>
>>>> This is the code I user to load panoramios json to the 
>>>> OpenLayers.Layer.Vector class
>>>>
>>>> var lyr = app.panoramio.layer, photo, feature, GeoJSON = 
>>>> {"type":"FeatureCollection","total":data.photos.length,"features":[
>>>> ]};
>>>> for(i=0; i < data.photos.length; i++){
>>>> photo = data.photos[i];
>>>>
>>>> if(lyr.getFeaturesByAttribute("photo_id",photo.photo_id).length===0
>>>> ){
>>>> feature =
>>>>
{"type":"Feature","geometry":{"type":"Point","coordinates":[photo.longitude,
>>>> photo.latitude]},"properties":photo};
>>>> GeoJSON.features.push(feature);
>>>> }
>>>> };
>>>>
>>>> // Reproject
>>>> var format = new OpenLayers.Format.GeoJSON({
>>>>        'internalProjection': new 
>>>> OpenLayers.Projection('EPSG:900913'),
>>>>        'externalProjection': new OpenLayers.Projection('EPSG:4326')
>>>> }),
>>>> f = format.read(GeoJSON);
>>>> lyr.addFeatures(f);
>>>>
>>>> Any ideas why is this happening ? Is there a workaround ? What I 
>>>> dont understand is I have other GeoJSON vector layers which load 
>>>> correctly in every browser. Could this have anything to do with 
>>>> styling ?
>>>>
>>>>
>>>> best regards,
>>>>
>>>>
>>>> Ricardo
>>>
>>>
>>>
>>> _______________________________________________
>>> Users mailing list
>>> Users at lists.osgeo.org 
>>> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>>>
>



-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.
_______________________________________________
Users mailing list
Users at lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users



More information about the Users mailing list