Openlayers: markers disappear when zoomming

Question

I'm new with Openlayers, so not sure what is wrong. I can add markers when I change a select drop down and when I click the map. The issue comes when I zoom the map, the markers disappear.

I realised that markers don't disappear, they just move to another place, to the point 0,0.

This is the code

(function($) {
$().ready(function() {        
    var ZOOM_LEVEL_PROVINCE = 12;

    var projection = new OpenLayers.Projection("EPSG:4326");

    var map;
    var markerLayer;

    var initMap = function() {

        map = new OpenLayers.Map ("map", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.Permalink(),
                new OpenLayers.Control.ScaleLine({geodesic: true}),
                new OpenLayers.Control.Permalink('permalink'),
                new OpenLayers.Control.MousePosition(),                    
                new OpenLayers.Control.Attribution()],
            //maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0339,
            numZoomLevels: 19,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:4326"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        } );

        layer = new OpenLayers.Layer.OSM("Simple OSM Map");
        map.addLayer(layer);

        var point = getLonLatProvince('san-jose');
        map.setCenter(point.transform(projection, map.getProjectionObject()), ZOOM_LEVEL_PROVINCE);
    }

    var initMakerLayer = function(){
        markerLayer = new OpenLayers.Layer.Markers( "MarkerLayer" );
        markerLayer.id = "MarkerLayer";
        map.addLayer(markerLayer);
    }

    var showMarker = function( province ){
        var point = getLonLatProvince(province);
        var location = point.transform(projection, map.getProjectionObject());
        showMarkerPosition(location);
    }

    var showMarkerPosition = function( location ){
        markerLayer.clearMarkers(); 
        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);

        markerLayer.addMarker(new OpenLayers.Marker(location,icon.clone()));

        var newPoint = location.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

        $("#edit-plonlat").val( newPoint );
    }

    var getLonLatProvince = function( province ){
        ...
    }

    initMap();
    initMakerLayer();
    showMarker('san-jose');

    map.events.register("click", map, function(e) {
        var location = map.getLonLatFromPixel(e.xy);
        showMarkerPosition(location);
    });


    $('#edit-pprovinces').change(function() {
        var selectedPronvince = $(this).val();
        var point = getLonLatProvince(selectedPronvince);
        showMarker(selectedPronvince);
        map.setCenter(point.transform(projection, map.getProjectionObject()), ZOOM_LEVEL_PROVINCE);
    });
});

})(jQuery);

vncook vncook · Accepted Answer · 2013-04-03T17:26:31

I think your call to map.getLonLatFromPixel(e.xh) is getting a location in WGS84 (EPSG:4326) since that is the projection of the map. Then you call showMarkerPosition in your "click" handler. In showMarkerPosition you transform that location from the Google to WGS84 projection, which would change a large lat/lon in meters to a much smaller lat/lon in degrees.

If you've started out with degrees for that meters-to-degrees transform, then I think you'll end up with a lat/lon that's very close to 0,0 off the West coast of Africa.

A projection transform issue is where I always start looking when I see 0,0 lat/lon's.

Openlayers: markers disappear when zoomming

1 Answers