0

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?

Improve this question
7
  • By client do you mean 'user' or do you mean web browser?
    – nmtoken
    Commented Jul 6, 2019 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
    Commented Jul 6, 2019 at 8:50
  • from browser user will upload shapefile something like gipong.github.io/shp2geojson.js
    – Veena Hosur
    Commented Jul 6, 2019 at 8:51
  • 1
    Have a look at shp2geojson.js library: github.com/gipong/shp2geojson.js
    – TomazicM
    Commented Jul 6, 2019 at 9:27
  • 2
    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
    Commented Jul 6, 2019 at 10:17

1 Answer 1

Reset to default
5

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>
Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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