1

I have a leaflet script which using ziped shapefiles to add it on the map. The shapefiles are in epsg projection 31700 (dealul piscului 1970) and the position on the openstreet map is not correct, so I need some solution to fix the script and when I place the next zip file(epsg projection 31700 ) that would be automatically converted in wgs84 and placed on correct location.

This is my script:

<head>
    <meta charset='utf-8' />
    <title>
        Test Shapefile
    </title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style>
        html {
        height: 100%
        }

        body {
        height: 100%;
        margin: 0;
        padding: 0;
        }

        #map {
        height: 100%
        }
    </style>
    <link rel="stylesheet" href="gh-pages.css" />
</head>

<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="catiline.js"></script>
    <script src="leaflet.shpfile.js"></script>
    <script>
        var m = L.map('map').setView([44.514572, 27.146654], 14);
        var watercolor = L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png').addTo(m);
        var shpfile = new L.Shapefile('test.zip', {
            onEachFeature: function(feature, layer) {
                if (feature.properties) {
                    layer.bindPopup(Object.keys(feature.properties).map(function(k) {
                        return k + ": " + feature.properties[k];
                        }).join("<br />"), {
                        maxHeight: 200
                    });
                }
            }
        });
        shpfile.addTo(m);
        shpfile.once("data:loaded", function() {
            console.log("finished loaded shapefile");
        });
    </script>
</body>

  • Any reason why you can't reproject the shapefile into EPSG:4326? – IvanSanchez Dec 1 '16 at 11:18
  • I asked becuse I dont know. – user87349 Dec 1 '16 at 11:24
  • But the way you asked ("fix the script") is implying that reprojecting the shapefiles is out of the question, and that the script is broken somehow, y'a know. The wording could have been a bit better. – IvanSanchez Dec 1 '16 at 11:35
2

If you really want to reproject on-the-fly, Proj4Leaflet is exactly what you need.

You will simply have to define the coordinate reference system (crs) you need, as follows:

var crs = new L.Proj.CRS('EPSG:31700',
                '+proj=sterea +lat_0=46 +lon_0=25 +k=0.99975 +x_0=500000 +y_0=500000 +ellps=krass +towgs84=28,-121,-77,0,0,0,0 +units=m +no_defs',
                {resolutions:[
                              8192, 4096, 2048, 1024, 512, 256, 128
                             ],// i am not sure of this
                 origin: [0, 0]// i am not sure of this neither 
                })

And add it as optional argument to your instance m of L.map

var m = L.map('map',{crs: crs}).setView([44.514572, 27.146654], 14); 

Note that there is no external hosting and that you have to download the library to host it locally. Such that

[...]
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="yourLocalFolder/proj4.js"></script>
<script src="yourLocalFolder/proj4leaflet.js"></script>
[...]

UPDATE I The whole code would be, at least between the body tags

<body>
 <div id="map"></div>
 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
 <script src="proj4.js"></script>
 <script src="proj4leaflet.js"></script>
 <script src="catiline.js"></script>
 <script src="leaflet.shpfile.js"></script>
 <script>
    var crs = new L.Proj.CRS('EPSG:31700',
                    '+proj=sterea +lat_0=46 +lon_0=25 +k=0.99975 +x_0=500000 +y_0=500000 +ellps=krass +towgs84=28,-121,-77,0,0,0,0 +units=m +no_defs',
                    {resolutions:[
                              8192, 4096, 2048, 1024, 512, 256, 128
                                 ],// i am not sure of this
                     origin: [0, 0]// i am not sure of this neither 
                    })
    // note the "new L.Map" instead of the "L.map", i.e. we use the constructor instead of the function
    var m = new L.Map('map',{crs: crs}).setView([44.514572, 27.146654], 14);
    var watercolor = L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png').addTo(m);
    var shpfile = new L.Shapefile('test.zip', {
        onEachFeature: function(feature, layer) {
            if (feature.properties) {
                layer.bindPopup(Object.keys(feature.properties).map(function(k) {
                    return k + ": " + feature.properties[k];
                    }).join("<br />"), {
                    maxHeight: 200
                });
            }
        }
    });
    shpfile.addTo(m);
    shpfile.once("data:loaded", function() {
        console.log("finished loaded shapefile");
    });
 </script>
</body>

Also note that this code is not tested and that you will probably have to iterate from it to achieve your goals (as usual in programming).

UPDATE II

proj4.js can be manually grabbed from the latest release's dist/ folder on github. The build 2.3.15 can be downloaded directly by clicking here. The downloaded file name is proj4js-2.3.15.zip. You have to unzip it to access the content of the above-mentioned dist/ folder, where you will find proj4.js

proj4leaflet.js can be manually grabbed from the latest release's src/ folder on github. You can download it directly by clicking here. The downloaded file name is Proj4Leaflet-master.zip. You have to unzip it to access the content of the above-mentioned src/ folder, where you will find proj4leaflet.js.

  • That could be fine but can you send me whole code with this fix? – user87349 Dec 1 '16 at 12:05
  • For example if my local folder is named TEST and placed on C: partiton, how the script will looking like? – user87349 Dec 1 '16 at 12:41
  • So, my question is how to do this part (Note that there is no external hosting and that you have to download the library to host it locally. Such that) of your answer? – user87349 Dec 1 '16 at 12:45
  • @user87349. To make it a bit easier, what you can do is placing the files proj4.js and proj4leaflet.js next to the two other js files catiline.js and leaflet.shpfile.js. What i mean by "next to" is "in the same place on your disk C". Actually this is also next to your html file. Check the modification i just made in the above script. (in which i removed the string part "yourLocalFolder/") – keepAlive Dec 1 '16 at 12:49
  • Great! One more thing... Where to get proj4.js and proj4leaflet.js for my case? – user87349 Dec 1 '16 at 13:35
0

The easiest way to deal with this problem is reproject the shapefiles beforehand. In this case, reprojecting on-the-fly might not be the best solution.

There are a lot of ways to reproject shapefiles, depending on the GIS software package you are most comfortable with. See e.g. How to re-project shapefiles?

  • I know to convert it in some of GIS software, for example QGIS but I need some more automatically. – user87349 Dec 1 '16 at 12:06

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.