CODEWITHSUNDEEP
javascripticonsopenlayersmarker
Julio
Julio

Reputation: 11

Changing OpenLayers marker icon

I have a problem with OpenLayers. If I want to change the icon of some marker on the fly (for instance, to paint the marker with another color to indicate a status change), the marker starts behaving buggy, not showing in the proper place and even leaving semi-randomly located copies of itself, noticeable when zooming the map in or out.

I already realized that the problem happens when I reassign the marker.icon attribute, from some pre-loaded icon images which work fine otherwise. I have tried both with and without using icon.clone() to redraw.

Here's a full but simplified example which moves the marker randomly and should modify its icon too. If you comment out the "troublesome code" snippet, it works well, except for the icon change:

<!DOCTYPE HTML>

<HTML>
    <HEAD>
        <TITLE>Mapa</TITLE>
        <SCRIPT language="javascript" type="text/javascript" src="OpenLayers.js"></SCRIPT>
        <SCRIPT language="javascript" type="text/javascript">
            var vMapa;
            var prj0 = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var prj1 = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
            var vLon = 12.568142;
            var vLat = 55.676320;
            var vTimer = null;
            var vCont = 0;
        </SCRIPT>
    </HEAD>
    <BODY onClose="vTimer = null; vLon = null; vLat = null;">
        <DIV id="demoMap" style="height: 700px; width: 1000px;"></DIV><DIV id="Contador">0</DIV>
        <SCRIPT>
            var options = {
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                ]
            };

            vMapa = new OpenLayers.Map("demoMap", options);
            vMapa.addLayer(new OpenLayers.Layer.OSM());
            vMapa.setCenter(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), 15, false, false);

            var Navigation = new OpenLayers.Control.Navigation( { defaultDblClick: function(event) { return; } } );

            vMapa.addControl(Navigation);           

            var markers = new OpenLayers.Layer.Markers("Markers");
            vMapa.addLayer(markers);

            var size    = new OpenLayers.Size(12, 12);
            var offset  = new OpenLayers.Pixel(-6, -6);
            var iconOff = new OpenLayers.Icon('img/CircOff.png', size, offset);
            var iconOn  = new OpenLayers.Icon('img/CircOn.png', size, offset);

            var marker = new OpenLayers.Marker(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), iconOff.clone());
            marker.setOpacity(1.0);
            marker.events.register('mousedown', marker, function(evt) { vMapa.panTo(marker.lonlat); OpenLayers.Event.stop(evt); });
            marker.pfInfo = 'Vel: 0.0 km/h';
            markers.addMarker(marker);
            vTimer = setTimeout('TimerEvent()', 1000);

            function TimerEvent() {
                vLon += ((Math.random() - 0.5) / 500);
                vLat += ((Math.random() - 0.5) / 500);

                // ------- Troublesome code -------
                var ixIcon = Math.round(Math.random());
                if (ixIcon == 0) {
                    marker.icon = iconOff.clone();
                } else {
                    marker.icon = iconOn.clone();
                }
                // --------------------------------

                var newLonLat = new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1);
                var newPx = marker.map.getLayerPxFromViewPortPx(marker.map.getPixelFromLonLat(newLonLat));
                marker.moveTo(newPx);

                marker.draw();

                vCont ++;
                document.getElementById('Contador').innerHTML = vCont;

                vTimer = setTimeout('TimerEvent()', 1000);
            }
        </SCRIPT>
    </BODY>
</HTML>

Thanks a lot in advance for your suggestions.

Upvotes: 1

Views: 1947

Answers (2)

rideintothesun
rideintothesun

Reputation: 1678

You can create a restful web service which can return an SVG as a string. The parameters passed would tell the service what has to change on the icon. The service would read in a template SVG change it appropriately and return it.

Upvotes: 1

Knarf
Knarf

Reputation: 2156

I never use Marker to create markers. I create a Vector layer, and add Point objects. Then style these Points.

This works much better and has more functionality.

Upvotes: 1

Related Questions