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 Apr 16 '18 at 8:50

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.

|improve this answer|||||

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.