1

I am very new to OpenLayers and JavaScript, and I have the following problem.

I have an .csv table representing the coordinates of points I want to visualize them on a map using OpenLayers.

I have found the following example on the OpenLayers page,

https://openlayers.org/en/latest/examples/polygon-styles.html

However, I couldn't understand the representation of the coordinates there.

More specifically, I didn't know what does the e mean in the coordinate [-5e6, 6e6] for example.

However, I tried to plot a simple square on my map using my coordinates, but it just giving me a point, in the center of the map, as following:

https://jsfiddle.net/api/post/library/pure/#&togetherjs=bD5bfPm7vz

So I don't know what's exactly is wrong, and what should I change?

I think it's all in the way the coordinates are written, but not sure though.

And this is my code:

var styles = [
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  }),
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
      })
    }),
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
    }
  })
];

var geojsonObject = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:3857'
    }
  },
  'features': [{
    'type': 'Feature',
    'geometry': {
      'type': 'Polygon',
      'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
          [-3e6, 6e6], [-5e6, 6e6]]]
    }
  }]
};

var source = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

var layer = new ol.layer.Vector({
  source: source,
  style: styles
});

    var basic = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

var map = new ol.Map({
  layers: [basic, layer],
  target: 'map',
  view: new ol.View({
    center: [0, 3000000],
    zoom: 2
  })
});
  • e6 = 10 raised to the power of 6 = 1000000. So the lower left corner is -5000000,+6000000. Can you post a few coordinate pairs of your csv data? – mkennedy Dec 30 '16 at 18:15
  • @mkennedy Thank you for your answer. Here is a lon, lat coordinates of two square that I want to plot as polygon: 136.875,35.17291667,136.878125,35.17291667,136.878125,35.17083333,136.875,35.17083333,136.875,35.17291667 136.878125,35.17291667,136.88125,35.17291667,136.88125,35.17083333,136.878125,35.17083333,136.878125,35.17291667 – philippos Dec 31 '16 at 9:48
  • @mkennedy each of these squares has a specific value representing some amount, and I want the fill colour of the squares to change according to these values. I have thought of a for loop to achieve, but I don't have any idea of how this could be achieved. I have good background in C++, but have no idea how to do this using the combination of html, openlayers, JS, etc ... I would appreciate any advice in this issue. – philippos Dec 31 '16 at 9:51
  • Your coordinates are longitude,latitude so you should try setting similar coordinates for the center/bbox. I have no knowledge in web mapping details, just in coordinate reference systems! – mkennedy Dec 31 '16 at 19:31
  • @mkennedy Do you mean to convert my long/lat coordinates to the something like this format [-5e6, 6e6] ? – philippos Jan 2 '17 at 1:51

Your Answer

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

Browse other questions tagged or ask your own question.