VictorVelarde/ OpenLayers 3 - Sincronización con MarineTraffic

## OpenLayers 3 - Sincronización con MarineTraffic


## readme.md

      
    Raw
  

              readme.md
            
          
    Ejemplo sencillo de sincronización de 2 mapas:

a la izquierda un mapa con OpenLayers 3
a la derecha, un mapa con la posición de los buques - AIS, a través de un widget de MarineTraffic


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Marine Traffic en OL3</title>
    <link type="text/css" href="http://openlayers.org/en/v3.12.1/css/ol.css" rel="stylesheet" />
    <style>
        #mapa {
            width: 50%;
            height: 600px;
        }

        #panel {
            width: 50%;
            height: 600px;
            position: fixed;
            right: 0px;
            top: 0px;
        }
    </style>
</head>

<body onload="init()">
    <div id="mapa"></div>

    <div id="panel">
        <iframe id="marineTraffic" frameborder="0" scrolling="no" width="100%" height="100%" src="http://www.marinetraffic.com/es/ais/embed/">
        </iframe>
    </div>

    <script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script>

    <script type="text/javascript">
        var mapa;

        function init() {
            var osm = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            var lon = -3.7930298;
            var lat = 43.44045603;
            var zoom = 12;
            var vista = new ol.View({
                center: ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
                zoom: 12
            });
            mapa = new ol.Map({
                layers: [osm],
                target: 'mapa',
                view: vista
            });

            centrarMapaAIS(lon, lat, zoom);

            vista.on('change:center', actualizar);
            vista.on('change:resolution', actualizar);
        }

        function actualizar(evt) {
            var centro = evt.target.getCenter();
            var lonlat = ol.proj.transform(centro, 'EPSG:3857', 'EPSG:4326');
            var lon = lonlat[0];
            var lat = lonlat[1];
            var zoom = evt.target.getZoom();
            centrarMapaAIS(lon, lat, zoom);
        }

        function centrarMapaAIS(lon, lat, zoom) {
            var url = 'http://www.marinetraffic.com/es/ais/embed/';
            url += "zoom:" + zoom + "/centery:" + lat + "/centerx:" + lon;
            url += "/maptype:3/shownames:true/mmsi:0/shipid:0/fleet:/fleet_id:/vtypes:/showmenu:true/remember:false";
            //console.log(url);

            var iframe = document.getElementById('marineTraffic');
            iframe.src = url;
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Marine Traffic en OL3</title>
	<link type="text/css" href="http://openlayers.org/en/v3.12.1/css/ol.css" rel="stylesheet" />
	<style>
	#mapa {
	width: 50%;
	height: 600px;
	}

	#panel {
	width: 50%;
	height: 600px;
	position: fixed;
	right: 0px;
	top: 0px;
	}
	</style>
	</head>

	<body onload="init()">
	<div id="mapa"></div>

	<div id="panel">
	<iframe id="marineTraffic" frameborder="0" scrolling="no" width="100%" height="100%" src="http://www.marinetraffic.com/es/ais/embed/">
	</iframe>
	</div>

	<script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script>

	<script type="text/javascript">
	var mapa;

	function init() {
	var osm = new ol.layer.Tile({
	source: new ol.source.OSM()
	});

	var lon = -3.7930298;
	var lat = 43.44045603;
	var zoom = 12;
	var vista = new ol.View({
	center: ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
	zoom: 12
	});
	mapa = new ol.Map({
	layers: [osm],
	target: 'mapa',
	view: vista
	});

	centrarMapaAIS(lon, lat, zoom);

	vista.on('change:center', actualizar);
	vista.on('change:resolution', actualizar);
	}

	function actualizar(evt) {
	var centro = evt.target.getCenter();
	var lonlat = ol.proj.transform(centro, 'EPSG:3857', 'EPSG:4326');
	var lon = lonlat[0];
	var lat = lonlat[1];
	var zoom = evt.target.getZoom();
	centrarMapaAIS(lon, lat, zoom);
	}

	function centrarMapaAIS(lon, lat, zoom) {
	var url = 'http://www.marinetraffic.com/es/ais/embed/';
	url += "zoom:" + zoom + "/centery:" + lat + "/centerx:" + lon;
	url += "/maptype:3/shownames:true/mmsi:0/shipid:0/fleet:/fleet_id:/vtypes:/showmenu:true/remember:false";
	//console.log(url);

	var iframe = document.getElementById('marineTraffic');
	iframe.src = url;
	}
	</script>
	</body>

	</html>