I'm trying to add vector layer to my map from a GeoJSON file stored in the same directory as my maps index.html. However, it won't work.

Is there something wrong with my syntax?

My code:

<!doctype html>
<html lang="en">
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
      .map {
        height: 600px;
        width: 100%;
    <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
    <title>Map of San Diego</title>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          new ol.layer.Vector({
            source: new ol.source.Vector(casinos.geojson)

        view: new ol.View({
          center: ol.proj.transform([-117.128986, 32.985368], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
  • 1
    When you say: 'It wont work', what exactly do you mean? what do you see? do you get any error? Sep 22, 2014 at 3:44

1 Answer 1


I think:

new ol.layer.Vector({
    source: new ol.source.Vector(casinos.geojson)

should be something like:

new ol.layer.Vector({
    source: new ol.source.GeoJSON({
        url: 'casinos.geojson'

you may need to account for its projection as well.

url: 'casinos.geojson',
projection: 'EPSG:3857'  (or whatever it is)

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.