I have also added this vector in my local host code but JSON file is not loaded.
geojson_layer = new OpenLayers.Layer.Vector("features", {
projection: epsg4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: myGeoJSON,
format: new OpenLayers.Format.GeoJSON()
})
});
I have also added JSON file:
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GMI_ADMIN": "GBR-SCT", "FIPS_CNTRY": "UK",
"CNTRY_NAME": "United Kingdom", "POP_RANK": 5, "ADMIN_NAME": "Scotland", "STATUS":
"Other", "PORT_ID": 32170, "CITY_NAME": "Dundee", "POP_CLASS": "100,000 to 250,000"
}, "geometry": { "type": "Point", "coordinates": [ -2.966700, 56.466702 ] } }
,
{ "type": "Feature", "properties": { "GMI_ADMIN": "GBR-SCT", "FIPS_CNTRY": "UK",
"CNTRY_NAME": "United Kingdom", "POP_RANK": 7, "ADMIN_NAME": "Scotland", "STATUS":
"Other", "PORT_ID": 33515, "CITY_NAME": "Hunterston", "POP_CLASS": "Less than 50,000" },
"geometry": { "type": "Point", "coordinates": [ -4.856786, 55.736744 ] } }
]}
Add Vector Layer:
geojson = new OpenLayers.Layer.Vector("features",, {
styleMap: new OpenLayers.StyleMap({
'default': {
fillColor: '#659AB6',
fillOpacity: 0.6,
stroke: true,
strokeColor: '#3D5B6B',
strokeWidth: 3,
pointRadius: 5
}
}
) })
Add Data
data= {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GMI_ADMIN": "GBR-SCT", "FIPS_CNTRY": "UK",
"CNTRY_NAME": "United Kingdom", "POP_RANK": 5, "ADMIN_NAME": "Scotland", "STATUS":
"Other", "PORT_ID": 32170, "CITY_NAME": "Dundee", "POP_CLASS": "100,000 to 250,000"
}, "geometry": { "type": "Point", "coordinates": [ -2.966700, 56.466702 ] } }
,
{ "type": "Feature", "properties": { "GMI_ADMIN": "GBR-SCT", "FIPS_CNTRY": "UK",
"CNTRY_NAME": "United Kingdom", "POP_RANK": 7, "ADMIN_NAME": "Scotland", "STATUS":
"Other", "PORT_ID": 33515, "CITY_NAME": "Hunterston", "POP_CLASS": "Less than 50,000" },
"geometry": { "type": "Point", "coordinates": [ -4.856786, 55.736744 ] } }
]};
use jQuery Each Function (add geometry):
$(data.features).each(function (index, key) {//jquery
geojsonfile = new OpenLayers.Format.GeoJSON
geojson.addFeatures([geojsonfile.parseFeature(data.features[index])]);
});
Add Map Layer
map.addLayer(geojson);