[OpenLayers-Users] general advise for handling markers with unique popups?

Fri Apr 16 16:49:26 EDT 2010

Hello OpenLayers Gurus,
While learning mapping technologies and having fun, I rendered a galactic
map of the MMORPG Eve-Online galaxy. It's loaded into OpenLayers, and I've
added a marker and Popup OK. Awesome.

Examples:
http://i223.photobucket.com/albums/dd209/ultrus/Picture2-1.png
http://i223.photobucket.com/albums/dd209/ultrus/Picture1-2.png

Now there's some challenges I'm hoping to get some general feedback on. In
general, how would you handle the following (code at bottom for reference):

Bigger popups on click:
Right now I use marker+popup combo to create a text based marker to show who
is where, and what their shared status is (gray, blue, green, yellow,
orange, red). it looks OK, but I'd like to show a different popup that gives
detailed info when clicked. Current plan is to link the text in the little
popup to call a function that hides itself and shows a bigger one with
detailed info. Sound good?

adding/editing/updating/deleting tons of markers/popups:
I'm tracking a lot of pilots in a fleet in real time as they move from place
to place. What's the best way to track/edit markers/popups in this scenerio?
I'm thinking about keeping a master array or object, referencing everything
there. Any suggestions on where to start?

Overlapping markers:
Often times, several pilots will be in the same place. Eww. This is probably
a common mapping issue, and I've seen it happen a lot with real estate
websites when many homes are in the same town. Should I just let it go as
long as I have a sidebar listing everyone? Current thoughts are to show the
pilot with the most urgent color/status on top somehow. What do you think?

The goal of this project is to LEARN OpenLayers in a low pressure way, and
help buddies find each other in the massive virtual galaxy (using the
in-game Chromium based web browser that connects to game data - like where
you are).

Thanks much for your advise in advance.

Chris

==== code (slightly simplified) ====

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<style type="text/css">
img {
    border: 0px;
}
.olPopup {
    padding: 0px;
    background: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    margin-left: 0px;
    margin-top: -35px;
    border: #FF9900 solid 1px;
}

.statBlue {
    background: #00264C;
    padding: 0px 2px 2px 2px;
    border: #33FFFF solid 2px;
}

</style>
<script src="./js/OpenLayers-2.8/lib/OpenLayers.js"></script>
<script src="./js/LabelMaker.js"></script>
<script type="text/javascript">
var map, layer;

function init(){
    OpenLayers.ImgPath = "./images/light/";
    map = new OpenLayers.Map( $('map'), {
        resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625,
                                0.0439453125, 0.02197265625, 0.010986328125,

                                0.0054931640625, 0.00274658203125,
0.001373291015625]
    });
    layer = new OpenLayers.Layer.TileCache("EVE: System Security",
        ["./maps"],
        "evedot4",
        {
            serverResolutions: [0.703125, 0.3515625, 0.17578125,
0.087890625,
                                0.0439453125, 0.02197265625, 0.010986328125,

                                0.0054931640625, 0.00274658203125,
0.001373291015625,
                                0.0006866455078125, 0.00034332275390625,
0.000171661376953125,
                                0.0000858306884765625,
0.00004291534423828125, 0.000021457672119140625]
        }
    );
    map.addLayer(layer);
    map.setCenter(new OpenLayers.LonLat(0, 0), 2);
    map.addControl(new
OpenLayers.Control.LayerSwitcher({'ascending':false}));

    var markers = new OpenLayers.Layer.Markers( "My Location" );
    map.addLayer(markers);

    var size = new OpenLayers.Size(56,22);
    var offset = new OpenLayers.Pixel(-2, -21);
    var icon = new
OpenLayers.Icon('./images/markers/statBlue3.png',size,offset);
    markers.addMarker(new OpenLayers.Marker(new
OpenLayers.LonLat(-10.3300968263,2.98563041298),icon));

    popup = new OpenLayers.Popup("testPopup",
           new OpenLayers.LonLat(-10.3300968263,2.98563041298),
           new OpenLayers.Size(100,12),
           '<span class="statBlue">Ultran</span>',
           false);
    popup.backgroundColor = 'none';
    popup.padding = '0';
    map.addPopup(popup);

}

OpenLayers.Util.onImageLoadError = function() {
    this.src = "./images/blank.gif";
    this.style.display = "";
};
</script>
  </head>
  <body onLoad="init()">
    <div id="map"></div>
  </body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100416/b308c536/attachment.html