mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ol-ext: Iframe API</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="description" content="Use OlIframeAPI to control a map in an iframe" />
|
|
<meta name="keywords" content="Openlayers, ol, iframe, API" />
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
|
|
<!-- API -->
|
|
<script type="text/javascript" src="../../dist/extra/MapIFrameAPI.js"></script>
|
|
|
|
<style>
|
|
#map {
|
|
width: 600px;
|
|
height: 400px;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: Openlayers iFrame API</h1>
|
|
</a>
|
|
<div class="info">
|
|
The ol.ext.IFrameAPI lets you embed an ol map on your website and control the map using JavaScript.
|
|
<br/>
|
|
You don't need to include Openlayers js or css in your m ain page, just add the js API...
|
|
<br/>
|
|
This lets you embed maps created in an other site into yours.
|
|
</div>
|
|
|
|
<!-- Map div -->
|
|
<iframe id="map" src="./map.iframe.html"></iframe>
|
|
<div id="map2"></div>
|
|
|
|
<div class="options">
|
|
<a href="https://codepen.io/viglino/pen/KKMPwxo">See example on CodePen</a>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
// Get API
|
|
var olMap;
|
|
MapIFrameAPI.ready('map', function(api) {
|
|
olMap = api;
|
|
olMap.call('center', { center: [2,45], zoom: 10 });
|
|
olMap.addIFrameListener('move', function(data) {
|
|
console.log('move', data.center, data.zoom);
|
|
})
|
|
olMap.addIFrameListener('click', function(data) {
|
|
console.log('click:', data.center);
|
|
})
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |