1

I'm getting started with OpenLayers and all was going well until I tried to use my own GeoJSON file.

I started with the Cartographic Boundary Shapefiles - Counties from the Census website, loaded it into http://www.mapshaper.org/ and exported it as a GeoJSON file. However when I use that as my source (either a straight Vector layer or as an Image layer) it doesn't display anything. No errors- just a empty window with zoom controls. I suspect it may have something to do with projections so I made it the only layer, but it didn't help.

   <script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      //new ol.layer.Tile({
      //  source: new ol.source.Stamen({layer: 'toner-lite'})
      //}),
      new ol.layer.Vector({
        title: 'US Counties',
        source: new ol.source.Vector({url: 'data/counties.geojson', format: new ol.format.GeoJSON() }),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'blue'
          }),
          stroke: new ol.style.Stroke({
            color: 'olive',
            width: 10
          })
        })
      })
    ],
    view: new ol.View({
      center: "center",
      zoom: 1
    })
  });
</script>

2 Answers 2

1

Maybe your problem is with the ol.View. There's no center: "center". It requires a coordinate. I follow your steps and made you an example:

http://plnkr.co/edit/BUQoNo?p=preview

The only difference is that I exported the shapefile as TopoJson which is smaller.

0

There are two things may cause the problem: first, you need a local server like tomcat to get your GeoJSON file from this and solve same-origin policy issue. Second, you should define a proper projection for your GeoJSON file in the 'source' object as below:

source: new ol.source.Vector({
      url: 'data/counties.geojson', 
      format: new ol.format.GeoJSON(),
      projection: 'EPSG:3857'});
1
  • Since 2016 GeoJSON (RFC 7946) only has one projection it's CRS:84
    – nmtoken
    Aug 25, 2020 at 8:50

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.