0

My name.geojson file is in EPSG:3857 and I try to open it on OpenLayers but it didn't show. Which code should I use to open name.geojson file?

<!doctype html>
        <html>
          <head>
              <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
            <style>
              .map {
                height: 400px;
                width: 100%;
              }
            </style>
            <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
            <title>OpenLayers example</title>
          </head>
          <body>
           <div id="map" class="map"></div>
            <script type="text/javascript">
            var map = new ol.Map({
                target: 'map',
                layers: [
                  new ol.layer.Tile({
                    source: new ol.source.OSM()
                  })
                ],
                view: new ol.View({
                  center: ol.proj.fromLonLat([37.41, 8.82]),
                  zoom: 2
                })
              });
            </script>
          </body>
</html>

My GeoJSON is like:

{ "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } }, "features": [ { "type": "Feature", "properties": { "PROV_NAME": "PHAYAO", "REGION": "เหนือ", "Length": 471901.950000, "Area": 6099882141.720000, "PROV_CODE": "56", "REG_CODE": "02", "PROV_NAMT": "พะเยา" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 11178637.241381312, 2240871.010733759 ], [ 11178705.330343476, 2240860.5557918623 ], [ 11178753.986649765, 2240860.1461515916 ],
4
  • Can you show the geoJson file your are trying to load ?
    – Shiko
    Commented Nov 23, 2017 at 18:58
  • { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } }, "features": [ { "type": "Feature", "properties": { "PROV_NAME": "PHAYAO", "REGION": "เหนือ", "Length": 471901.950000, "Area": 6099882141.720000, "PROV_CODE": "56", "REG_CODE": "02", "PROV_NAMT": "พะเยา" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 11178637.241381312, 2240871.010733759 ], [ 11178705.330343476, 2240860.5557918623 ], [ 11178753.986649765, 2240860.1461515916 ], Commented Nov 23, 2017 at 19:11
  • do u understand Commented Nov 23, 2017 at 19:13
  • Check the sample in the answer
    – Shiko
    Commented Nov 23, 2017 at 19:18

1 Answer 1

0

Check below example :

<!doctype html>
<html >
  <head>
      <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>


   <div id="map" class="map"></div>
    <script type="text/javascript">
    var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'https://gist.githubusercontent.com/anonymous/fddba97a4d51953e5b5c8358d0f1fd48/raw/9f9c14fe49073e4dbaa1be5ace3aa5ce67837ee2/test2.json'
    }) 
    });


    var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayer
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 2
        })
      });
    </script>
  </body>
</html>

The GeoJson coordinates is EPSG 3857.

{
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::3857"
        }
    },
    "features": [{
        "type": "Feature",
        "properties": {

        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
            [-625570.6, 6465993.0],
            [-305006.9, 6696510.8],
            [-546330.2, 6768547.6],
            [-445478.6, 7053093.0],
            [-279794.0, 7056694.8],
            [-359034.5, 7337638.4],
            [-211359.0, 7485313.8],
            [62380.8,   6955843.3],
            [220861.7,  6909019.4],
            [91195.5,   6700112.6],
            [213658.1,  6682103.4],
            [-625570.6, 6465993.0]]]
        }
    }]
}
2
  • thx you very much !! i love u Commented Nov 23, 2017 at 19:22
  • @sdfkswadfgkdl welcome but please mark it as answer
    – Shiko
    Commented Nov 23, 2017 at 19:23

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.