Home > openlayers > Integrate GeoJSON file with openlayers.protocol.http

Integrate GeoJSON file with openlayers.protocol.http

January 30Hits:2
Advertisement

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> 

Answers

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.

Related Articles

  • Integrate GeoJSON file with openlayers.protocol.httpJanuary 30

    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 m

  • Problem with loading GeoJSON file in OpenLayers generated by PHPFebruary 23

    I'm trying to read some geo-data from PostGIS database using PHP, creating a GeoJSON file and showing it on a base map using OpenLayers. The PHP code works just fine. The generated data in GeoJSON format is valid (I checked it with jsonlint). When I

  • Trouble Displaying GeoJSON file in OpenLayersMarch 29

    I am noobie to OpenLayers and can not for the life of me figure out how to display a geoJson file. This seems like it should be easy but I have been banging my head for a day. I'm sure I am missing something obvious. I have my geoJSON file (countries

  • How to project a geoJSON file in OpenLayers?December 18

    I have a json file well formed. I want to read a json file as a base layer from OpenLayers. <script type="text/javascript"> var styles = new OpenLayers.StyleMap({ "default": { strokeWidth: 2 }, "select": { strokeColor:

  • Problem loading a GeoJSON file using OpenlayersFebruary 20

    I am setting up a website using Openlayers and GeoJSON files. When I get the GeoJSON file using the code below it work as expected. url: "./file.geojson", But if I try and use the full domain call, see below, it does not work. Why? url: "ht

  • Issue dsplaying GeoJSON file in OpenLayers 3.9.0September 21

    I'm trying to get vector feature from geojson file displayed in openlayers 3.9.0. {"type": "FeatureCollection","crs": {"type": "name","properties": {"name": "EPSG:3857"}}, &qu

  • Reading in local geoJSON file for openlayersSeptember 27

    I am kinda new to openlayers and not (yet) very experienced in javascript. Can anyone tell me what I am doing wrong here? I have a wordpress blog and I want to replicate and adjust the following script to my needs: http://jsfiddle.net/eqsrnjos/1/ Wit

  • OpenLayers & GeoJSON filesApril 9

    After some hunting, it seems that if I have an a geojson file, I NEED the data and map to be on a server in order to view this in OpenLayers because of the protocol class. I saw an example where I can basically read the file as a javascript object by

  • Create multiple vector layers by reading a GeoJSON file once in OpenLayersOctober 2

    I am a begginner to OpenLayers, and my question is about making things more efficient. My work is about displaying time-dependent weather elements on several point locations on the map. All these are initially stored in a MySQL database, and I use a

  • Using Openlayers Protocol.HTTP GeoJSON format

    Using Openlayers Protocol.HTTP GeoJSON formatMarch 31

    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'); f

  • Unable to load geojson or KML file into OpenLayers 2 as base layer May 4

    Using OpenLayers 2, I want to have an offline baselayer, that is loaded from a KML or GEOJSON file. I am successfully able to do this if I first load a baselayer from google maps. For example, this works fine and am able to properly switch between th

  • OpenLayers polygon fill not working with GeoJSON file as sourceDecember 18

    I'm trying to visualise some data in a custom shape on a map, and I'm stuck with styling it. I'm currently using the openlayers framework in combination with a geoJSON file that I generate in code. I've spent a whole day trying to get a fill or strok

  • Validate that Openlayers GeoJSON layer is in the correct format with OpenLayers.Protocol.HTTP callSeptember 24

    I am completely new to JS and openlayers, i am trying to figure out a way to validate the received layer with the OpenLayers.Protocol.HTTP call. I want to validate that it is in the correct format (GeoJSON). I have tried callback function, and it doe

  • Is it possible to write a server to handle OpenLayers.Protocol.HTTP({url: "/cgi-bin/fs/workspace/" -}) which was done by FeatureServerJune 30

    I am a newbie to geoserver and openlayers. Recently, I am stuck in saving changes(drawing polygons and points) of the feature vectors to a local(geoserver/www/...) .json file. The tutorial I followed is here. But it said: "Of course you also need a p

  • Which conditions does the geoJSON file read from the server in?August 24

    I've added an alert to the function myReadFunction in order to detect function calls. As according to my observations, the function readMyFunction is called sometimes while I have been navigating on the map, not every time. The function readMyFunctio

  • how to search for a Point of MultiLineString geometry in a json file using OpenLayersJanuary 2

    I have a json file with large geometries(MultiLineString), here I got a Point among the json layer(baseLayer). I would like to search for a Point's LineString in the layer, from which MultiLineString that Point been selected. And how to read a json f

  • Access to custom GeoJSON members in OpenLayers 2August 2

    I need to read a layer-wide attribute, from a GeoJSON file, set by a custom member to the object: {"type": "FeatureCollection", "features": [...], "search_polygon": "POLYGON (...)"} Since it seems neither

  • Offline Base Layer using stored KML or GEOJSON fileMay 4

    Using OpenLayers 2, I want to have an offline baselayer, that is loaded from a KML or GEOJSON file. I am successfully able to do this if I first load a baselayer from google maps. For example, this works fine and am able to properly switch between th

  • How to display Geojson file over OSM, google satellite as abase layer (at correct location) in open layer?January 10

    How to display Geojson file over OSM, google satellite as a base layer in open layers. It is showing somewhere. var map = new OpenLayers.Map('map',{ projection: "EPSG:900913", displayProjection: "EPSG:4326", }); layer = new OpenLayers.

  • creating vector layer from OSM file using OpenLayersMay 23

    Using OpenLayers, I am creating a vector layer over a map. This vector layer is created from an OSM xml file. My purpose is to do some experiments in Prolog with this data, for example, querying the shortest path (following the declared "ways" i

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.936 s.