I have years to play with Openlayers and I am new to Openlayers 3.
I have the following code
<div id="overlay" style="background-color: white; border-radius:10px; border: 1px solid black; padding: 5px 10px;"> <div id="overlay2" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;">var layer = new ol.layer.Tile({ source: new ol.source.OSM() });var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');var overlay = new ol.Overlay({ element: document.getElementById('overlay'), positioning: 'bottom-center'});var overlay2 = new ol.Overlay({ position: center, element: document.getElementById('overlay2')});var view = new ol.View({ center: center, zoom: 6});var map = new ol.Map({ target: 'map', layers: [layer], overlays: [overlay2], view: view});map.on('click', function(event) { var coord = event.coordinate; var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326') var hdms = ol.coordinate.toStringHDMS(degrees); var element = overlay.getElement(); element.innerHTML = hdms; overlay.setPosition(coord); map.addOverlay(overlay);});overlay2 should just stay on the top of the map and do nothing.
overlay creates an info box over the map, where you clicked, showing info about degrees etc.
overlay works, but I cannot see overlay2 and I cannot understand why. Console gives no errors and when I hit ol.Overlay.length , says 1. Does it get overriden? And why?
Thanks
أكثر...
I have the following code
<div id="overlay" style="background-color: white; border-radius:10px; border: 1px solid black; padding: 5px 10px;"> <div id="overlay2" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;">var layer = new ol.layer.Tile({ source: new ol.source.OSM() });var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');var overlay = new ol.Overlay({ element: document.getElementById('overlay'), positioning: 'bottom-center'});var overlay2 = new ol.Overlay({ position: center, element: document.getElementById('overlay2')});var view = new ol.View({ center: center, zoom: 6});var map = new ol.Map({ target: 'map', layers: [layer], overlays: [overlay2], view: view});map.on('click', function(event) { var coord = event.coordinate; var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326') var hdms = ol.coordinate.toStringHDMS(degrees); var element = overlay.getElement(); element.innerHTML = hdms; overlay.setPosition(coord); map.addOverlay(overlay);});overlay2 should just stay on the top of the map and do nothing.
overlay creates an info box over the map, where you clicked, showing info about degrees etc.
overlay works, but I cannot see overlay2 and I cannot understand why. Console gives no errors and when I hit ol.Overlay.length , says 1. Does it get overriden? And why?
Thanks
أكثر...