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({
                projection:projection,
                  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 at 8:50
up vote 2 down vote accepted

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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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