1

I want to build functionality to upload ESRI shapefile and overlay it on map using OpenLayers 3. Once user cross checked I want to save to PostgreSQL/PostGIS table.

So far as I Googled I am not getting any resources. Is there any way to do in OpenLayers 3?

closed as unclear what you're asking by Vince, whyzar, nmtoken, Kadir Şahbaz, Jochen Schwarze Jul 12 at 8:22

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • By client do you mean 'user' or do you mean web browser? – nmtoken Jul 6 at 8:42
  • I would say that your nil results through search are correct, you won't be able to upload a shapefile directly into OpenLayers of any version, as its a binary format not intended for web view. You might though consider a solution based on use of a WFS-T service – nmtoken Jul 6 at 8:50
  • from browser user will upload shapefile something like gipong.github.io/shp2geojson.js – veena hosur Jul 6 at 8:51
  • 1
    Have a look at shp2geojson.js library: github.com/gipong/shp2geojson.js – TomazicM Jul 6 at 9:27
  • 1
    Your comments, don't really match your question, please edit the question to add more details of what you are trying to do, what you have found, what you have tried – nmtoken Jul 6 at 10:17
2

Using shp2geojson.js library it is possible to load ESRI shapefile and convert it to standard GeoJSON object that can then be used to create overlay in OpenLayers 3.

Below is simple example of such usage. Shapefile Mexico_and_US_Border.zip is loaded directly from https://opendata.arcgis.com/ site and then added as overlay over OSM map. The only critical part is when reading features from GeoJSON object with ol.format.GeoJSON().readFeatures method. Here the right input and ouput projections have to be specified.

<!DOCTYPE html>
<html>
  <head>
    <title>Load SHP overlay</title>
    <link rel="stylesheet" href="lib/ol3/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="lib/ol3/ol-debug.js"></script>
    <script src="lib/jszip/jszip.js"></script>
    <script src="lib/jszip/jszip-utils.js"></script>
    <!--[if IE]>
    <script type="text/javascript" src="lib/jszip-utils-ie.js"></script>
    <![endif]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
    <script src="lib/shp2geojson/preprocess.js"></script>
    <script src="lib/shp2geojson/preview.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>      
      var featureStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 1
        })
      });

      var sourceOSM = new ol.source.OSM();

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: sourceOSM
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
      var vectorSource;
      var vectorLayer;

      loadshp({
        url: 'https://opendata.arcgis.com/datasets/e735940321bd4383bab528a91bf526f8_0.zip?outSR=%7B%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%7D',
        encoding: 'utf-8'
      }, function(geojson) {
           var features = new ol.format.GeoJSON().readFeatures(geojson, {defaultDataProjection: 'EPSG:4269', featureProjection: sourceOSM.getProjection()});
           vectorSource = new ol.source.Vector({
             features: features
           });
           vectorLayer = new ol.layer.Vector({
             source: vectorSource,
             style: featureStyle
           });
           map.addLayer(vectorLayer);
         }
      );
    </script>
  </body>
</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.