CP-01-Ejemplo-OpenLayers

Base para crear fiddles de mapea

by solcursomapea

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.16.0/css/ol.css">
<script src="https://openlayers.org/en/v3.16.0/build/ol.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/configuration.js"></script>
<div id="map"></div>


<button type="button" onclick="osm_test()">Carga Capa OSM</button>

CSS

<style rel="stylesheet">
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
      

// 1. Crear un nuevo mapa con capa OSM directamente haciendo uso de Mapea
// Layer de tipo "OSM"
// bbox: [96388, 3959795, 621889, 4299792],


function osm_test(){
 	map2 = new M.map({
  container: "map",
  layers: ["OSM"],
  bbox: [96388, 3959795, 621889, 4299792],
  controls: ["layerswitcher", "mouse", "panzoombar"],
  zoom: 2
});
}