Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

149
Views
Openlayers Vector layer rendering coordinates outside typical boundaries

I started working on a Vector Layer to render SQL Spatial Data in OpenLayers. When rendering this example (see Json) everything works perfectly fine. See code below:

    //creates source to get json data from
let vSource = new VectorSource({
  url: '/assets/germany.json',
  format: new GeoJSON()
});
//set focus of the camera on this source
vSource.on('addfeature', () => {
  this.map.getView().fit(vSource.getExtent());
  console.log(this.map.getView().getCenter());
});
//add source to layer and afterwards load it into map
let vLayer = new VectorLayer({
  source: vSource,
  visible: true
});
//layer styling
vLayer.setStyle(new Style({
  stroke: new Stroke({
    color: '#FF5733',
    width: 8  
  })
}));
this.map.addLayer(vLayer);

Map instantiation looks as following:

this.map = new Map({
  view: new View({
    center: [10, 10],
    zoom: 3,
  }),
  layers: [],
  target: 'ol-map'
});

But when i want to render this json file I am facing a blank map. Focus wont get set and not even errors appear. I am assuming its all about the boundaries? How can Polygon coordinates get rendered which are our outside default boundaries, if there is such thing as "default"?

For example:

[12058.4521484375, 5345.98388671875],
[11408.95703125, 5345.98388671875]

Reading through the API I can deduce that the option extent may be key to solving this issue?

Best regards
A newbie at OpenLayers

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Openlayers default projection is EPSG:3857. I think your geojson and center of map is EPSG:4326.

this.map = new Map({
  view: new View({
    projection: 'EPSG:4326',
    center: [10, 10],
    zoom: 3,
  }),
  layers: [],
  target: 'ol-map'
});

let vSource = new VectorSource({
  url: '/assets/germany.json',
  format: new GeoJSON({ featureProjection: 'EPSG:3857' })
});
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!