mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
111 lines
2.9 KiB
HTML
111 lines
2.9 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;
|
|
}
|
|
#loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0,0,0,.5);
|
|
z-index: 99;
|
|
}
|
|
#loading > div {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border: 2px solid #369;
|
|
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
|
|
padding: 1em 2em;
|
|
}
|
|
</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 main page, just add the js API and the widget (as an IFrame)...
|
|
<br/>
|
|
This lets you embed maps created in an other site into yours and control them with the API.
|
|
</div>
|
|
|
|
<!-- Map div -->
|
|
<iframe id="map" src="./map.iframe.html"></iframe>
|
|
<!-- iframe id="map" src="https://viglino.github.io/ol-ext/examples/misc/map.iframe.html"></iframe -->
|
|
<!-- iframe id="map2" src="./map.iframe.html"></iframe -->
|
|
|
|
<div class="options">
|
|
<button onclick="mapAPI.fn.drawPolygon()">Draw Polygon</button>
|
|
<button onclick="mapAPI.fn.selectBy({id:93})">Select 93</button>
|
|
<br/>
|
|
<i>Look messages in the console...</i>
|
|
<hr/>
|
|
<a href="https://codepen.io/viglino/pen/KKMPwxo">See example on CodePen</a>
|
|
</div>
|
|
|
|
<div id="loading">
|
|
<div>Connecting API...</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var mapAPI;
|
|
|
|
/*
|
|
MapIFrameAPI.ready('map2', function(api) {
|
|
api.addIFrameListener('select', function(data) {
|
|
console.log('Select on Map2');
|
|
})
|
|
});
|
|
*/
|
|
|
|
// Get API
|
|
MapIFrameAPI.ready('map', function(api) {
|
|
document.getElementById('loading').style.display = 'none';
|
|
mapAPI = api;
|
|
// mapAPI.fn.setLayer('geoportail');
|
|
// Center map
|
|
mapAPI.fn.setCenter([2,45]);
|
|
mapAPI.fn.setZoom(10);
|
|
// Get on move
|
|
mapAPI.addIFrameListener('move', function(data) {
|
|
console.log('Move: ' + data.center[0] +','+ data.center[1] + '-' + data.zoom);
|
|
})
|
|
// Get selection
|
|
mapAPI.addIFrameListener('select', function(data) {
|
|
console.log('Select:', data.selected[0]);
|
|
})
|
|
// Get selection
|
|
mapAPI.addIFrameListener('drawPolygon', function(data) {
|
|
console.log('Draw:', data);
|
|
})
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |