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 ],
|improve this question
  • Can you show the geoJson file your are trying to load ? – Shiko Nov 23 '17 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 ], – sdfks wadfgkdl Nov 23 '17 at 19:11
  • do u understand – sdfks wadfgkdl Nov 23 '17 at 19:13
  • Check the sample in the answer – Shiko Nov 23 '17 at 19:18
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]]]
        }
    }]
}
|improve this answer
  • thx you very much !! i love u – sdfks wadfgkdl Nov 23 '17 at 19:22
  • @sdfkswadfgkdl welcome but please mark it as answer – Shiko Nov 23 '17 at 19:23

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.