0

My Openlayers map is not displaying clustered points properly and I'm not sure why. My code is pretty simple and straight forward, here it is:

JSfiddle: http:// jsfiddle.net/1z5zyu4d/13/)

 <!doctype html>
 <html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.5.0/css/ol.css" type="text/css">
<style>
  .map {
    height: 100%;
    width: 100%;
  }
</style>
<script src="http://openlayers.org/en/v3.2.0/build/ol.js" type="text/javascript"></script>
<title>AIS Map</title>
</head>
<body>
<h2>Cluster map of ships broadcasting AIS data</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

  var view = new ol.View({
    center: center,
    zoom: 2
  });

  var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
            })],
    view: view
  });

  var originalSource = new ol.source.GeoJSON({
url: './test.geojson'
  });

  // create a layer from it so we can visualize the original data
  var originalLayer = new ol.layer.Vector({
    source: originalSource
  });

  var clusterLayer = new ol.layer.Vector({
    source: originalSource
  });
  map.addLayer(originalLayer);
  map.addLayer(clusterLayer);
</script>
</body>
</html>

I'm basing this heavily off of the examples here: https:// openlayersbook.github.io/ch05-using-vector-layers/example-02.html and here: http:// openlayers.org/en/v3.2.0/examples/cluster.html. The problem I'm having is that the cluster shows up as one point centered at (0,0) like this. Upon zooming in, the cluster expands, as it should. What's weird though(besides it not mapping it right in the first place) is that when you zoom in the points are projected like this. The points are projected to the same locations they should be as if that one single tile is being treated like the whole world. The real locations of the points looks like this: http:// imgur.com/TLARMra. See how the x/y locations of the ships when overlayed on the whole world are the same as the x/y locations when overlayed on that one tile. There's a few less points on the one with boat icons but you can see the clusters around China, France/Germany, and the Eastern US coast all translate to the incorrect projection, along with all the others that are on both maps(The cluster data has a few more points than the non cluster data added for testing specific cases). So I'm almost positive that this is an issue with projection EPSG, etc. but I think I've tried every EPSG code in all different combinations(like including the projection in the layer itself caused the layer to not appear) to no avail. Firebug gives me no errors and it says ol.js is loading fine along with the ol.css. So basically I don't know what is causing this and I don't know how to fix it.

I would also like to mention that I'm using OL3 and specifically 3.2


My GeoJSON looks like this:

 {
"type": "FeatureCollection",
"features":[
{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [
            0.13138,
            49.4756
        ]
    },
    "properties": {
        "MMSI": "227006760",
        "NAVIGATION STATUS": "0"
    }
},//...about 30 of those^
]
}

Working jsfiddle, still the same problem http:// jsfiddle.net/1z5zyu4d/13/

  • And what's the content of your test.geojson file? Perhaps you could post your example up to jsfiddle.net with the GeoJson inline? – Guy Jun 11 '15 at 17:22
  • @Guy I eddited the post to include the GeoJSON but I'm not really sure what jsfiddle is. I'm very new to javascript (about 2 weeks) and haven't had time to play around that much. Looks like some sort of live IDE type thing? – trevinator Jun 11 '15 at 18:34
  • @Guy here is a working jsfiddle jsfiddle.net/1z5zyu4d/13 but I'm having the same problem – trevinator Jun 11 '15 at 19:55
1

Here's an example using OpenLayers version 3.6.0 http://jsfiddle.net/t3n55fzq/

This is the part that allows you to reproject features during read.

var originalSource = new ol.source.Vector({
    features: (
        new ol.format.GeoJSON()).readFeatures(geojsonObject,{
            dataProjection:'EPSG:4326',
            featureProjection:'EPSG:3857'
        }          
    )
});

You should also look at defining your projections inside the GeoJSON. e.g.

'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:4326'
    }
  }

If you're loading in from a external source try:

var originalSource = new ol.source.Vector({
    url: 'test.geojson',
      format: new ol.format.GeoJSON({
         defaultDataProjection :'EPSG:4326', 
         projection: 'EPSG:3857'
   })
});
  • Thanks a lot! If I were to load the geojson file instead of strictly printing the data could I just do: var geojsonObject = { url: 'AISdecoded.geojson' }; Or would it have to be something along the lines of: new ol.source.GeoJSON({... – trevinator Jun 15 '15 at 18:28
  • @trevinator, I've updated the answer :-) – Guy Jun 16 '15 at 11:07

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.