1

I am working with openlayers 3 with a layer from mapbox or openstreetmap and I need to draw some circles on it.

I am able to print the circles with a view with a projection EPSG:4326, but then I have no map. Changing the projection with a transform the map is displayed, but the points are all together. The only way I am made it work is using TileWMS as a source, but I am not able to use it in production environment

Here is my code:

version 1: working with TileWMS

  var source = new ol.source.GeoJSON({
    url: 'geojson url'
  });
  var pointsLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 15,
            fill: new ol.style.Fill({color: 'rgba(170,33,33, 0.8)'}),
            stroke: new ol.style.Stroke({color: 'rgba(170,33,33, 0.3)', width: 8})
          })
        })
      });

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
              title: "Global Imagery",
              source: new ol.source.TileWMS({
                url: 'http://maps.opengeo.org/geowebcache/service/wms',
                params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
              })
        }),
        pointsSource
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-82.3, -10.65],
      zoom: 3
    })
});

This is the result working with TileWMS

Using mapbox or osm, failing:

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
                    })
                }),
        /*
          new ol.layer.Tile({
          source: new ol.source.OSM()
        }),*/
        pointsSource
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-82.3, -10.65],
      zoom: 3
    })
});

This is the result Failing with osm or mapbox

And finally, changing the view the map is displayed but the circles

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
                    })
                }),
        /*
          new ol.layer.Tile({
          source: new ol.source.OSM()
        }),*/
        pointsSource
    ],
    view: new ol.View({
      center: ol.proj.transform([-82.3, -10.65], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3
    })
});

And the result enter image description here

Is there a way to make this work?

1

I found the solution, here it is for it is helping anyone

Following this answer https://gis.stackexchange.com/a/118818/42868 There is an unstable option for the ol.source.GeoJSON object, so adding it in this way made it work

var source = new ol.source.GeoJSON({
    url: 'geojson url',
    projection: 'EPSG:3857'
});

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.