When working with OpenLayers, I encountered an issue where my object was undefined and I couldn't retrieve the information I needed to display feature data on the map. Initially, I passed a list from the controller to my JSP file and attempted to use it in my JS file. However, that approach did not yield the desired results.
I then tried creating a JSON object and passing it instead, following an example at this link. The code snippet below shows part of my map.js script:
// Projections
// -----------
var sphericalMercatorProj = new OpenLayers.Projection('EPSG:900913');
var geographicProj = new OpenLayers.Projection('EPSG:4326');
// Vector layers
// -------------
// Sprinters: layer with different attributes.
var sprintersLayer = new OpenLayers.Layer.Vector('Sprinters (translated labels)', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: 'resources/img/mobile-loc.png',
graphicOpacity: 1.0,
graphicWith: 16,
graphicHeight: 26,
graphicYOffset: -26
})
});
sprintersLayer.addFeatures(getSprintersFeatures());
// Create map
// ----------
var map = new OpenLayers.Map({
div: 'map',
theme: null,
projection: sphericalMercatorProj,
displayProjection: geographicProj,
units: 'm',
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34, 20037508.34, 20037508.34
),
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.LayerSwitcher()
],
layers: [
new OpenLayers.Layer.OSM('OpenStreetMap', null),
sprintersLayer
],
center: new OpenLayers.LonLat(0, 0),
zoom: 2
});
// Continued script...
<c:forEach items="${listFromController}" var="cor" varStatus="stat">
<c:choose>
<c:when test="${stat.count == 1}">
<c:set var="chaine" value="${chaine}[[${cor.longitude},${cor.latitude},${cor.time}]" />
</c:when>
<c:otherwise>
<c:set var="chaine" value="${chaine},[${cor.longitude},${cor.latitude},${cor.time}]" />
</c:otherwise>
</c:choose>
</c:forEach>
<c:set var="chaine" value="${chaine}]"/>
<div id="map" class="mws-panel-body"> </div>
<script src="resources/map.js"></script>