Iframe + GeoJSON

Show case for an Iframe and a GeoJSON layer through API JS

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="http://ggis.guadaltel.com/mapea4/assets/css/mapea.ol3.min.css">
<script src="http://ggis.guadaltel.com/mapea4/vendor/browser-polyfill.js"></script>
<script src="http://ggis.guadaltel.com/mapea4/js/mapea.ol3.min.js"></script>
<script src="http://ggis.guadaltel.com/mapea4/js/configuration.js"></script>
<!-- contenedor de API JS -->
<div id="mapaContainer"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

div#mapaContainer {
  height: 100vh;
  width: 100vw;
}

JavaScript

M.map("mapaContainer")
  .addLayers(new M.layer.GeoJSON({
    source: {
      "crs": {
        "properties": {
          "name": "EPSG:4326"
        },
        "type": "name"
      },
      "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-5.9882354736328125,
              37.375068308716905
            ],
            [-5.942230224609375,
              37.35815085913536
            ],
            [-5.9250640869140625,
              37.34341319857338
            ],
            [-5.9271240234375,
              37.304644804751106
            ]
          ]
        }
      }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-5.991668701171875,
              37.37343130288926
            ],
            [-6.0074615478515625,
              37.37943348292772
            ],
            [-6.0610198974609375,
              37.370702880453074
            ],
            [-6.0651397705078125,
              37.38979975341983
            ],
            [-6.0829925537109375,
              37.40725549559876
            ],
            [-6.101531982421875,
              37.39361854443162
            ]
          ]
        }
      }],
      "type": "FeatureCollection"
    },
    name: 'prueba'
  }));