[OpenLayers-Users] general advise for handling markers with unique
popups?
Christopher Stevens
owntheweb at gmail.com
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
More information about the Users
mailing list