The final answer is: your vector data is out of range. There were two problems with your map.
The first was, that your dataset contains three coordinate for every point, while OpenLayers 2 can only handle two. To fix this, you have to include an ignoreExtraDims
parameter to your format
object:
format: new OpenLayers.Format.GeoJSON({
ignoreExtraDims: true
})
The second problem is, that your data is in the wrong place. Your WMS layers range roughly from 430.000 m to 480.000 m in X axis, and from 5.100.000 m to 5.130.000 m in Y axis. Your data, however ranges from 5.546.000 m to 5.597.000 m in X axis, while the Y range is correct. You have to shift your data to the correct place prior to visualizing.
Are you trying to add/remove layers?
You can do something similar by showing/hidding the layers like this
Assuming that you have something like this (and several other layers):
var layer1 = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var layer2 = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
});
var viewObject = new ol.View({
center: [0, 0],
zoom: 2
})
var mapObject = new ol.Map({target: 'map'});
mapObject.addLayer(raster);
mapObject.addLayer(vectorLayer);
mapObject.setView(viewObject);
Add checkboxes in the HTML:
<div>
<label class="checkbox"><input type="checkbox" id="layer1" checked /> Layer 1</label>
<label class="checkbox"><input type="checkbox" id="layer2" checked /> Layer 2</label>
</div>
Then, in your script section:
$('input[type=checkbox]').on('change', function () {
var layer = {
layer1: layer1,
layer2: layer2
}[$(this).attr('id')];
layer.setVisible(!layer.getVisible());
});
btw, you should add JQuery in order to make it work.
Best Answer
there are two different way you can try,
1) you need to host your web server to receive the file that client uploaded. The file will be processed in your server and return the geojson file to the front-end.
here is an example (with php)
then you will get a geojson file to show in ol3.
2) the other one is using File API to process the file without write the server side code, and read the file content to show in ol3.
dev.w3.org/2006/webapi/FileAPI/
i also make a pure javascript lib to convert zip file with shp, dbf to geojson, just like user upload their file and show in ol3.
(this demo support .prj so no need to set EPSG and assign proper Encoding to show correct attribure in ol3)