Well, here is my working example.
First of all, your code have some errors.
Read carefully this to discover what was changed, because I don't have time to comment and explain in details.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function initMap() {
map = new OpenLayers.Map("info");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.SelectFeature(cities,{autoActivate:true, hover:true, onSelect:addPopup, onUnselect:removePopup}));
geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: 15,
fillColor: "#ffcc66",
fillOpacity: 0.8,
strokeColor: "#cc6633",
strokeWidth: 2,
strokeOpacity: 0.8 } ),
"select": { fillColor: "#8aeeef",
strokeColor: "#32a8a9",
labelYOffset:13,
label:"${name}"} //Text entspricht feature.attributes.name
}),
projection: new OpenLayers.Projection("EPSG:4326"),
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "geo.json",
format: new OpenLayers.Format.GeoJSON()
})
});
map.addLayer(geojson_layer);
map.setCenter(
new OpenLayers.LonLat(-50.06542968749966,-23.749149728383717).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10
);
}
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#header{
height:3em;
}
#wiki {
position: absolute;
right: 10px;
height:91%;
width: 49%;
top:3em;
}
#openlayers {
position: absolute;
width: 49%;
top: 3em;
left: 10;
bottom: 2em;
}
</style>
</head>
<body onload="initMap()">
</div>
<div id="info">
</div>
</body>
</html>
And the file with GeoJSON:
{"type":"FeatureCollection",
"features":[
{"type":"Feature",
"properties":{
"name":"TRON-02",
"color":"green",
"size":15
},
"geometry":{
"type":"Point",
"coordinates":[8.692, 49.412]
}
}
]
}
Feel free to ask anything you don't understand.
1) Format your HTML correctly.
2) Your map don't call the correct DIV tag to render.
3) I put a projection in the vector.
4) CHanged the coordinates to my country (eheh) so you will know where to go the next Football World Cup.
I would download and install QGIS, and then open the geojson file by clicking Add vector layer button:
After that you should be able to see you geojson file in QGIS:
And right click the layer's name in the left hand layer list, and click "Properties"; then go to the "Joins" tab, and click the green plus icon on the left bottom corner to open "Add vector join":
Join the table with the fields you would like to append to your geojson file; then right click layer's name in the left hand layer list, and click "Save As..." to save the geojson file into a new file and you should have what you need. And make sure you specify the output format as "GeoJSON":
Hope this helps, thanks.
Best Answer
You could try the geojsonio package, which i've used for a few tasks involving sp/sf conversions.
It has a strange old listed structure after parsing, here's my dummy polygon:
you can see the area of interest; list item named "features".
data$features is actually a data.frame, but the 4th column (so to speak) is another data.frame consisting of a character and a list. The list, our coordinates, is in fact an array. It's all rather nested.
So there we go. To access your coords, you can either call the entire array as a matrix, the individual coord pairs or all of the x/y coordinates: