Search code examples
javascriptopenlayersgeojson

GeoJSON file is not loaded properly in my localhost


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 ] } }
]}

Solution

  • 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);