I have been following a few books but they all seem to be about OpenLayers 3. Things have apparently changed since then. I am having a lot of trouble viewing a geojson over a basemap layer. The bing basemap seems to work just fine.... I have gone into about:configure and turned the security to false on firefox. Someone said that could be interfering with loading something from disk into the web... Is there an easier way?? Can i just upload these into some database like SQL server and have them inserted by command?? I am going crazy. I can usually follow along with books or websites but everything is outdated. This is my code:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>First Example</title>
<link rel="stylesheet" href="ol.css"> <!--open layers style sheet -->
<link rel="stylesheet" href="features.css"> <!-- my style sheet for the 
different tools -->
<script src="ol.js"></script><!-- open layers javascript -->
<meta name="viewport" content="width=device-width">
<div id="mymap" class="mymap"></div>
<select id="layer-select"> <!--this is the drop down menu for picking layers 
<option value="AerialWithLabels">Aerial with labels</option>
<option value="Aerial">Aerial</option>
<option value="RoadOnDemand">Road</option>



var styles =[


var layers =[];
var i, ii;
for (i=0, ii = styles.length; i < ii; ++i){
    layers.push(new ol.layer.Tile({
        visible: false,
        preload: Infinity,
        source: new ol.source.BingMaps({
            key: '---------------',
            imagerySet: styles[i]

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:4326'
    url: 'C:\\Users\\----------zips.geojson'

var map = new ol.Map({
    layers:  [vectorLayer], layers,
    loadTilesWhileInteracting: true,
    controls: [
      new ol.control.Zoom(), //default
      new ol.control.Rotate(), //default
      new ol.control.Attribution(), //default
      new ol.control.ZoomSlider(), // new
      new ol.control.MousePosition(), //new
      new ol.control.ScaleLine(), // new
      new ol.control.OverviewMap() //new
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.Select({
            layers: [vectorLayer]

    view: new ol.View({
        projection: 'EPSG:4326',
        center: [-95.422956, 29.765985],
        zoom: 11



var select = document.getElementById('layer-select');
function onChange() {
    var style = select.value;
    for (var i=0, ii = layers.length; i <ii; ++i) {
        layers[i].setVisible(styles[i] === style);


I have also experimented with editing the vector area like this

var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON,
url: 'C:\\Users\\------zips.geojson'


Should I just switch to leaflet.. Documentation seems up to date and I had no problem with that library when I tried doing this...


Try setting the z-index on the base layer to -1, I had the same problem and turns out I just couldn't see the GeoJSON because it was loaded first and the base layer was loaded over top of it. Once I changed my z-index's it worked fine.

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.