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>
<!-- iframe de mapea API REST -->
<iframe id="mapaContainer2" width="100%" height="400" scrolling="no" margin="0" marginheight="0" frameborder="1" src="http://ggis.guadaltel.com/mapea4/">
</iframe>

<!-- 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'
  }));