[GIS] Using Openlayers Protocol.HTTP GeoJSON format

geojsonopenlayers-2

just took Openlayers GeoJSON Example and inserted the features to file json1.json instead using a variable, then tried to preform HTTP call:

 var epsg4326 = new OpenLayers.Projection('EPSG:4326'),
        epsg900913 = new OpenLayers.Projection('EPSG:4326');
        function init() {
            var map = new OpenLayers.Map({
                div: "map",
                projection: epsg900913,
                displayProjection: epsg4326, //Is used for displaying coordinates in appropriate CRS by MousePosition control
                layers: [
                    new OpenLayers.Layer.WMS(
                        "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
                        { layers: "basic" }
                    )
                    ,new OpenLayers.Layer.Vector("GeoJSON", {
                        strategies: [new OpenLayers.Strategy.Fixed()],
                        protocol: new OpenLayers.Protocol.HTTP({
                            //readWithPOST: true,
                            url: "json1.json",
                            format: new OpenLayers.Format.GeoJSON()
                        })
                    })

                ],
                center: new OpenLayers.LonLat(-112.169, 36.099) 
            });
        }

The json1.json looks identical to OL example:

 { "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
        "properties": {"prop0": "value0"}
        },
      { "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
        "properties": {
          "prop0": "value0",
          "prop1": 0.0
          }
        },
      { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         }
       ]
     }

Found that the server not finds it:
debugger

But its there!

Best Answer

I tried your code example and it's working for me, I called it openlayers-example.html stuck it in my root folder next to the json1.json file and called it like 

http://localhost/openlayers-example.html.

So you may need to double check that the json file is where you think it is and call it like:

url: "http://localhost/json1.json"

That said, I think another culprit is the mime type you have associated with your .json files. According to your screen grab it looks like you have given these file types a text/html mime type, whereas on my server they are application/json

Take a look at Stackoverflow question: What is the correct JSON content type? for issues relating to using the incorrect Mime type with json files.

Related Question