OpenLayers and OpenStreetMap instead of Google Maps
Pawel Spychalski (DzikuVx)
8 years ago
parent
8137fe5a1c
commit
9b58be1987
@ -0,0 +1 @@
|
||||
.ol-control,.ol-scale-line{position:absolute;padding:2px}.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,99 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>Asynchronous Loading</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../build/map.css" media="all"/>
|
||||
<script type="text/javascript" src="../build/map.js"></script>
|
||||
|
||||
<style>
|
||||
html, body, #map-canvas {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
html, body, #map-canvas {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('message', function (e) {
|
||||
try {
|
||||
switch (e.data.action) {
|
||||
case 'update':
|
||||
var center = ol.proj.fromLonLat([e.data.lat, e.data.lon]);
|
||||
|
||||
mapView.setCenter(center);
|
||||
iconGeometry.setCoordinates(center);
|
||||
break;
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map-canvas"></div>
|
||||
|
||||
window.addEventListener('message', function (e) {
|
||||
var mainWindow = e.source;
|
||||
var result = '';
|
||||
try {
|
||||
switch(e.data.action){
|
||||
case 'zoom_in':
|
||||
var zoom = map.getZoom();
|
||||
zoom++;
|
||||
map.setZoom(zoom);
|
||||
break;
|
||||
|
||||
case 'zoom_out':
|
||||
var zoom = map.getZoom();
|
||||
zoom--;
|
||||
map.setZoom(zoom);
|
||||
break;
|
||||
case 'center':
|
||||
map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
|
||||
marker.setPosition( new google.maps.LatLng( e.data.lat, e.data.lon ) );
|
||||
map.panTo( new google.maps.LatLng( e.data.lat, e.data.lon ) );
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('message error');
|
||||
}
|
||||
});
|
||||
|
||||
function loadMapScript() {
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
<script type="text/javascript">
|
||||
|
||||
window.onload = loadMapScript;
|
||||
var mapView = new ol.View({
|
||||
center: ol.proj.fromLonLat([0, 0]),
|
||||
zoom: 15
|
||||
});
|
||||
|
||||
var map;
|
||||
var marker;
|
||||
var mapHandler = new ol.Map({
|
||||
target: 'map-canvas',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
view: mapView
|
||||
});
|
||||
|
||||
function initialize() {
|
||||
var iconStyle = new ol.style.Style({
|
||||
image: new ol.style.Icon(({
|
||||
anchor: [0.5, 1],
|
||||
opacity: 1,
|
||||
scale: 0.5,
|
||||
src: '../images/icons/cf_icon_position.png'
|
||||
}))
|
||||
});
|
||||
|
||||
var mapOptions = {
|
||||
zoom: 17,
|
||||
zoomControl: false,
|
||||
streetViewControl: false,
|
||||
center: {lat: 53.570645, lng: 10.001362}
|
||||
};
|
||||
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
|
||||
var currentPositionLayer;
|
||||
var iconGeometry = new ol.geom.Point(ol.proj.fromLonLat([0, 0]));
|
||||
var iconFeature = new ol.Feature({
|
||||
geometry: iconGeometry
|
||||
});
|
||||
|
||||
var image = {
|
||||
url: '../images/icons/cf_icon_position.png',
|
||||
scaledSize: new google.maps.Size(70, 70)
|
||||
};
|
||||
|
||||
marker = new google.maps.Marker({
|
||||
icon : image,
|
||||
position: new google.maps.LatLng(53.570645, 10.001362),
|
||||
map:map
|
||||
});
|
||||
|
||||
iconFeature.setStyle(iconStyle);
|
||||
|
||||
// You can use a LatLng literal in place of a google.maps.LatLng object when
|
||||
// creating the Marker object. Once the Marker object is instantiated, its
|
||||
// position will be available as a google.maps.LatLng object. In this case,
|
||||
// we retrieve the marker's position using the
|
||||
// google.maps.LatLng.getPosition() method.
|
||||
var infowindow = new google.maps.InfoWindow({
|
||||
content: '<p>Your Location: ' + marker.getPosition() + '</p>'
|
||||
});
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
});
|
||||
currentPositionLayer = new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
google.maps.event.addListener(marker, 'click', function() {
|
||||
infowindow.open(map, marker);
|
||||
});
|
||||
|
||||
window.addEventListener('message', function(e) {
|
||||
var data = e.data;
|
||||
var origin = e.origin;
|
||||
});
|
||||
}
|
||||
mapHandler.addLayer(currentPositionLayer);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map-canvas"></div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
Loading…
Reference in New Issue