0

I'm new to OpenLayers. I tried some recipes found here to load an external geojson file as an overlay on a map I'm creating and it's not working. The map as well as my base layer are loading, but no overlay...

Can anyone help?

<script type='text/javascript'>

    var map;

    function init() {


        map = new OpenLayers.Map('map_element', {numZoomLevels:20,
                                                projection: 'EPSG:3857',
                                                }           
                                );

        var mblight = new OpenLayers.Layer.XYZ(
            'Mapbox light',
            "https://a.tiles.mapbox.com/v3/amt-isam.h1ec7ila/${z}/${x}/${y}.png", 
            {
            attribution: "Tiles &copy; <a href='http://mapbox.com/'>MapBox</a> | " + 
            "Data &copy; <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " +
            "and contributors, CC-BY-SA",
            sphericalMercator: true
            },
            {isBaseLayer: true}
        );

        var trains_stations = new OpenLayers.Layer.Vector("Gares (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:"${NOM}"} //Text entspricht feature.attributes.name
               }),
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "gares.geojson",
                    format: new OpenLayers.Format.GeoJSON()
               })
          });

        var trains = new OpenLayers.Layer.Vector("Trains (geojson)", {
            projection: "EPSG:4326",
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "trains.geojson",
                format: new OpenLayers.Format.GeoJSON()
            })
        });

  map.addLayers([mblight, trains_stations, trains]);
  map.addControl(new OpenLayers.Control.LayerSwitcher() );
  map.setCenter(new OpenLayers.LonLat(-8198217,5701810));
  map.zoomTo(12);

}

</script>

Both files, trains and gares.geojson are in the same folders as my HTML.

This is an extract from gares.geojson (in case the problem's there):

{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", 
"properties": { "NO_STATION": 101.0, "NOM": "Gare Lucien-L'Allier", "NoAbord08": 18, "Parking": 0 }, 
"geometry": { "type": "Point", "coordinates": [ -73.570806, 45.494761 ] } }
,
{ "type": "Feature", 
"properties": { "NO_STATION": 214.0, "NOM": "Gare Delson", "NoAbord08": 41, "Parking": 1 }, 
"geometry": { "type": "Point", "coordinates": [ -73.540803, 45.366832 ] } }

]
}

I literally copy paste those two recipes and only changed the data source.

  • I've put a copy of mt data in my public Dropbox folder and used it as my source and it worked... The example I saw used the http protocol, but the data was local too... I don't understand... – fgcartographix Jan 20 '14 at 20:14
  • any error messages? – Gery Jan 20 '14 at 20:50
  • No, it's just not showing on my map... – fgcartographix Jan 21 '14 at 14:15
  • 1
    are you using firebug? – Gery Jan 21 '14 at 14:15
  • 1
    check the net tab, refresh your page with F5 and then things will appear. Normally look at those in the end, things in red are most of the time indicative of things failing. – Gery Jan 21 '14 at 14:24
1

Thanks for posting the demo! After checking it, I found two problems in the "Trains" section, I solved your problem, so please find it here:

http://jsfiddle.net/Gery/xf62Z/2/

Below I will keep my previous answer, but I consider that the JSFIDDLE link above will solve your problem.

--

Since the error points to the "*.geojson" file and says "Not Found", try making it executable with (for linux):

chmod a+x gares.geojson trains.geojson

since you use windows, the similar concept is known as "full control" access:

  • Use Windows Explorer to navigate to the file or directory.
  • Right click on it, and select Properties.
  • Select the Security tab.
  • Click the Add button.
  • Use the dialogue to grant Full Control to "Everyone".

and then add "./" to the URL in the protocol like:

protocol: new OpenLayers.Protocol.HTTP({
     url: "./gares.geojson",
     format: new OpenLayers.Format.GeoJSON()
})

and

protocol: new OpenLayers.Protocol.HTTP({
     url: "./trains.geojson",
     format: new OpenLayers.Format.GeoJSON()
})

I tested the extract of your gares.geojson in http://geojsonlint.com/ and works well:

enter image description here

In case you need to follow a working example using geojson, here is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 90,
            lat = 60,
            zoom = 3,
            epsg4326 = new OpenLayers.Projection('EPSG:4326'),
            epsg900913 = new OpenLayers.Projection('EPSG:900913');

        function init(){
            var map = new OpenLayers.Map('map', {
                units: 'm',
                numZoomLevels: 19,
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.ScaleLine(),
                    new OpenLayers.Control.MousePosition(),
                    new OpenLayers.Control.LayerSwitcher()
                ],
                projection: epsg900913,
                displayProjection: epsg4326 //Is used for displaying coordinates in appropriate CRS by MousePosition control
            });

            var lay_goo = new OpenLayers.Layer.Google('Google', {
                type: google.maps.MapTypeId.SATELLITE,
                sphericalMercator: true
            });

            var lay_osm = new OpenLayers.Layer.Google('OSM');

            geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
                projection: epsg4326,
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "./data/l1.geojson",
                    format: new OpenLayers.Format.GeoJSON()
                })
            });

            map.addLayers([lay_osm, lay_goo, geojson_layer]);

            map.setCenter(new OpenLayers.LonLat(lon, lat).transform(epsg4326, epsg900913), zoom);
        }
    </script>
  </head>
  <body onload="init()">
    <div id="map" style="position: absolute; right: 0px; top: 0px; width: 100%; height: 100%"></div>
  </body>
</html>
  • Thanks! Still no luck. I'm on windows so I gave everybody full control, but I don't know if that makes it executable? – fgcartographix Jan 21 '14 at 20:24
  • I'd say probably, please check the update in my answer. Btw, try putting the *.geojson files in a new directory, something like url: "./data/trains.geojson" – Gery Jan 21 '14 at 20:54
  • They were initially in a different folder. I thought I was referencing them wrong so I moved them in the same folder as my index.html. I really don't know what I'm doing wrong, but it's still not working. I grand full control to Everyone. Even tried to copy/paste your code and it's working with the file on my Dropbox account. Frustrating and thanks a million times for your help. – fgcartographix Jan 22 '14 at 15:33
  • mmm, I'm wondering if the var mblight = new OpenLayers.Layer.XYZ call you have is the problematic one, comment it and see if that worked. I'd be cool if you can make a live demo so it'll be easier for me to investigate what's going on – Gery Jan 22 '14 at 15:36
  • 1
    @fgcartographix you're welcome, I solved it, please check my updated answer, mark it as the answer if you considered as such and upvote it if you find it useful =), cheers! – Gery Jan 23 '14 at 22:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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