OpenLayers – Why is My Shapefile Not Loading?

coordinate systemjavascriptopenlayers-2shapefile

This is my website for test: http://www.cv.nctu.edu.tw/tonywang/shapefile-js-openlayers/ol_simple.html

I want to put my Shapefile in OpenLayers. I found an example at https://github.com/mattwigway/shapefile-js/tree/openlayers

I tried it and put my Shapefile in OpenLayers using proj4 to convert EPSG:3826 (my Shapefile's projection is EPSG:3826) to EPSG:4326.

But, I can't see my Shapefile on the OpenLayers map. What's wrong?

Best Answer

If you look at the picture below, you'll see your Shapefile is actually being displayed on the map. But it's not being projected to your map's reference system.

enter image description here

Your Shapefile has EPSG:4326 (as you can see here) and your map has EPSG:900913. So, in your ol_simple.js file, change line:

var outProj = new OpenLayers.Projection('EPSG:3857');

by:

var outProj = map.getProjectionObject();

And that should do the trick. Your Shapefile should be located where it is expected to.

enter image description here

Related Solutions

OpenLayers – How to Automatically Transform Between Base Layer and Vector Layer

Updated JSFiddle

The trick is to use preFeatureInsert inside your Vector Layer constructor:

preFeatureInsert: function(feature) {
            feature.geometry.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"))
       }

My earlier comment was incorrect in that I had mistyped what projection the OSM was built in. When I was retyping the edit, I realized a possible answer would be to simply use this parameter.

Essentially, this will take the input data as 4326 and transform it to 900913 for the entire vector layer before adding the data to the map.

[GIS] How to change color of a layer in openlayers

you could use this:

var myStyle= {fillColor: "#ff0000"};

             var BounderyshpLayer = new OpenLayers.Layer.Vector({
             projection: new OpenLayers.Projection('EPSG:3826'),
             style: myStyle
             });

see: http://jsfiddle.net/expedio/2xvfbtdw/

or even use a stylemap with different style for default and select:

var defStyle = {fillColor: "#ff0000",strokeColor: "green", strokeOpacity: "0.7", strokeWidth: 3, cursor: "pointer"};
        var sty = OpenLayers.Util.applyDefaults(defStyle, OpenLayers.Feature.Vector.style["default"]);

        var sm = new OpenLayers.StyleMap({
            'default': sty,
            'select': {strokeColor: "red", fillColor: "green"}
        });

        var BounderyshpLayer = new OpenLayers.Layer.Vector({
             projection: new OpenLayers.Projection('EPSG:3826'),
             styleMap: sm,
             });

see: http://jsfiddle.net/expedio/yxr5wdjo/

nice website with Information about the Feature-Style and Stylemap: http://www.peterrobins.co.uk/it/olstyle.html

PS: Just for demonstration purposes: If you open your website and use the console of your debug-tool (firebug for example) you run this code in your developer tools (non permanent change of course):

map.layers[2].style={fillColor: "#ff0000",fillOpacity:"0.5"};map.layers[2].redraw();

have a look at the screenshot:

enter image description here

Best Answer

Related Solutions

OpenLayers – How to Automatically Transform Between Base Layer and Vector Layer

[GIS] How to change color of a layer in openlayers

Related Question