mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
133 lines
3.6 KiB
HTML
133 lines
3.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;
|
|
}
|
|
#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;
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
min-width: 3em;
|
|
text-align: right;
|
|
}
|
|
</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.
|
|
It is a bidirectional API communication between parent window and map iframe.
|
|
<br/>
|
|
You don't need to include Openlayers js or css in your main page,
|
|
just add the <a href='../../dist/extra/MapIFrameAPI.js'>API code</a> and embed the widget (as an IFrame)...
|
|
<br/>
|
|
The API provides a controlled mechanism to securely (if used properly) access script from different orign in you page.
|
|
</div>
|
|
|
|
<!-- Map div -->
|
|
<iframe id="map" src="./map.iframe.html?lon=2&lat=46.5&z=5&layer=OSM"></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">
|
|
Draw a polygon in the IFrame: <button onclick="mapAPI.drawPolygon()">Draw Polygon</button>
|
|
<br/>
|
|
Select an object in the IFrame: <button onclick="mapAPI.selectBy({id:93})">Select 93</button>
|
|
<hr/>
|
|
Get/set placemark position:<br/>
|
|
<label>Lon:</label>
|
|
<input id="lon" />
|
|
<label>Lat:</label>
|
|
<input id="lat" />
|
|
<p style="text-align: right;">
|
|
<button onclick="mapAPI.getCenter((d)=>mapAPI.setLonLat(d))">
|
|
Center
|
|
</button>
|
|
</p>
|
|
<hr/>
|
|
<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.setLayer('geoportail');
|
|
// Center map
|
|
// mapAPI.setCenter([2,45]);
|
|
// mapAPI.setZoom(10);
|
|
// Get on move
|
|
mapAPI.on('move', function(data) {
|
|
console.log('Move: ' + data.center[0] +','+ data.center[1] + '-' + data.zoom);
|
|
});
|
|
// Get selection
|
|
mapAPI.on('select', function(data) {
|
|
console.log('Select:', data.selected[0]);
|
|
});
|
|
// Get selection
|
|
mapAPI.on('drawPolygon', function(data) {
|
|
console.log('Draw:', data);
|
|
});
|
|
// Connect lonlat input
|
|
mapAPI.mapInput('getLon', document.getElementById('lon'));
|
|
mapAPI.mapInput('getLat', 'lat');
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |