I want to display a map from a geojson file. Below are my codes. The map didn't show and there were no errors in the console.

  var urlModev ='maps/StaRita.geojson';

  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 vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: urlModev,
                format: new ol.format.GeoJSON(),
                style: styles

        var EPSG ='EPSG:4326';

        var projection = ol.proj.get(EPSG);

              var map = new ol.Map({
                layers: [vectorLayer
                target: 'map',
            renderer: 'canvas',
                controls: ol.control.defaults({
                  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                view: new ol.View({
                  center: [19948.84, 19955.93],
                  zoom: 1
  • To help debug always check the request actual made to the server, and try it in a browser.
    – nmtoken
    Commented Apr 16, 2018 at 8:50

1 Answer 1


You have set up your map to use EPSG:4326 but then asked OpenLayers to display a map centred on (19948.84, 19955.93) which is out of range for a Lat/Lon map. So your data probably is being drawn just very small and a long way away from your map.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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