2

I've got a problem with (the title says it) integrating a geojson file in my openlayers map. I have to use the openlayers.protocol.http way. I examined lots of examples on the web (and on stackexchange) but I cannot figure out what the problem with my exact code is. it shows the layer in the layerswitcher, but it doesn't show the features.

I hope someone can find the error. Here's my code (relating geojson):

WebMapping - Übung 12

<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("openlayers");


        var mapnik = new OpenLayers.Layer.OSM();



        map.addLayer(mapnik);



        var mapCenter = new OpenLayers.LonLat(8.692, 49.412);


        mapCenter.transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        )

         ZoomLevel 15 setzen
        map.setCenter(mapCenter, 15);


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


        var geojsonURL = "wikiCities.geojson";

            cities = new OpenLayers.Layer.Vector("Städte", {

                    styleMap: new OpenLayers.StyleMap({
                        "default": new OpenLayers.Style({
                        pointRadius: 5,
                        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
                    }),



                    strategies: [new OpenLayers.Strategy.Fixed()],

                    protocol: new OpenLayers.Protocol.HTTP({
                        url: geojsonURL,  
                        format: new OpenLayers.Format.GeoJSON({                                             
                                  externalProjection: new OpenLayers.Projection("EPSG:4326"),
                                  internalProjection: new OpenLayers.Projection("EPSG:900913")
                                })          
                    })
            });

        map.addLayer(cities); 




    }


    window.onload = initMap;
</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;
    }

    #info {
        position: absolute;
        height: 1em;
        left: 10;
        right: 0;
        bottom: 0;

        padding: 0.5em;
        text-align: right;
    }
</style>

Ihr Browser unterstützt keine Inlineframes

Wikipedia-Integration in OpenLayers

</div>

<div id="info">

</div>

Improve this question
6
  • Try to manually get the GeoJSON from your URL by typing "wikiCities.geojson" in your browser ( what the hell is this URL? ) and copy/paste the result in JSON Parser Online (json.parser.online.fr) to verify if it's all ok with the result. So, try to simplify removing all styles ( let the default orange circle ) and check the projection transformation. I think your problem is in one of this things.
    – Magno C
    Commented Jan 30, 2013 at 14:15
  • the URL is the path on my harddrive where the geojson file lies. it's the same folder where the html file is. I tried uploading the json file to a server before and used this URL, but it didn't change. I uses the parser and the file seems to be ok. What could be the problem with the projection transformation? I tried experimenting with the syntax there, but couldn't detect something wrong
    – user14720
    Commented Jan 30, 2013 at 15:13
  • Please verify the scope of code. Probably your HTML file is not in same folder the Javascript file. The URL used in Javascript follow the javascript dir scope. Try to use full URL. Well, Try to use pure AJAX like my answer in gis.stackexchange.com/questions/45441/…. Don't forget you will need JQuery libs.
    – Magno C
    Commented Jan 30, 2013 at 16:21
  • By the way, if you use wrong projections transformation, sometimes all the features gets grouped in lat 0, lon 0 and only visible by a huge zoom factor.
    – Magno C
    Commented Jan 30, 2013 at 16:30
  • my html, javascript and geojson files are all in the same folder.
    – user14720
    Commented Jan 30, 2013 at 17:17

1 Answer 1

Reset to default
3

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.

Improve this answer
1
  • Hi, thanks for the effort! The problem why the geojson was not showing in the map were the missing base map options. And I adepted the things you corrected. Totally looking forward to the world cup ;)
    – user14720
    Commented Feb 4, 2013 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.