Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>

share|improve this question
    
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 Jan 30 '13 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 Jan 30 '13 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 Jan 30 '13 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 Jan 30 '13 at 16:30
    
my html, javascript and geojson files are all in the same folder. –  user14720 Jan 30 '13 at 17:17
show 1 more comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
    
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 Feb 4 '13 at 14:37
    
Please accept my answer if it's useful for you. Thanks. –  Magno C Feb 5 '13 at 13:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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