I'm starting to learn the OpenStreetMap / OpenLayers API to put maps in my web app. While I've got to grips with the mapping itself, I've found that the div which contains the map won't stay where I put it. Here's my code so far:
maptest.htm
<html>
<head>
<title>OpenStreetMap Test</title>
<script language="JavaScript" src="/resources/OpenLayers-2.13.1/OpenLayers.js"></script>
<script language="JavaScript" src="/resources/proj4js/lib/proj4js-combined.js"></script>
<script language="JavaScript" src="maptest.js"></script>
</head>
<body onload="init()">
<h2>OpenStreetMap Test</h2>
<div id="map" style="border: 1px solid black; margin-left: auto; margin-right: auto; margin-top: 10%; height: 300px; width:300px;"></div>
</body>
</html>
maptest.js
function init() {
Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";
var EPSG27700 = new OpenLayers.Projection("EPSG:27700");
var EPSG900913 = new OpenLayers.Projection("EPSG:900913");
var map = new OpenLayers.Map("map",{
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.KeyboardDefaults()
]});
var OSM = new OpenLayers.Layer.OSM("OpenStreetMap");
var OSMcycle = new OpenLayers.Layer.OSM("OSM Cycle", ['http://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
'http://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
'http://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png']);
map.addLayers([OSMcycle,OSM]);
var position = new OpenLayers.LonLat(321550,507250).transform(EPSG27700,EPSG900913);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
var zoom = 13;
map.setCenter(position,zoom);
}
Without the onload="init()" the div is in the centre of the page, horizontally, and a short way down from the top. However, with init() called, the div snaps back to the left-hand side, just below the title. It still has the correct size and the border, so the CSS styling isn't being ignored completely, but I don't understand why it's not staying in position? I've tried putting the CSS into a stylesheet instead of inline, and the same thing happens.
OpenLayers comes with a default stylesheet that contains the following CSS
div.olMap {
margin: 0 !important;
}
This is overriding your inline css margin-right: auto, margin-left: auto, and margin-top: 10%.
You can fix this by applying your preferred styles to the #map selector in an external style sheet (or internal).
#map {
margin-left: auto !important;
margin-right: auto !important;
margin-top: 10% !important;
}
This works because your reference to an ID'ed selector, #map, has a higher priority than the class'ed selector, .olMap.
Here's a jsfiddle of a working solution.
Related
I'm using Mapbox with wordpress.
I see that the popup by default has anchor position which generates css.
I can't manage to center the popup on click : for example, some of the popup are truncated when i open it because the map does'nt center on it.
I tried all the solutions i found here, none of them work. I'm not using Json but wordpress loop to display markers and put content in popups. I find no solutions for anything else than json .
So i just want to know if it's possible to entirely disable the position of the popup so that i can put it always on the map corner, whatever the marker I click..
EDIT
Finally I just changed some css to make the popup stick to the left of the map: I disabled the anchor default position with transform:none, I place it in the corner of the map container with top and left..And then I disabled the arrow around the popup.
.mapboxgl-popup{
transform:none !important;
top: 15%;
left: 10px;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
display:none !important;
}
use this example from officail map box example :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a popup</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8],
zoom: 3
});
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat([-96, 37.8])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);
</script>
</body>
</html>
and you can see the example result on the below link :
https://www.mapbox.com/mapbox-gl-js/example/popup/
Hi in the below code I am using in my website but it was displaying like this
http://rushdainfotech.in/contact.php
Can any one please help me
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
The google translate aspect seems to be working fine. However, there is a global style that you have:
img {
max-width: 100%;
height: auto;
width:100%;
}
Simply comment out or move it to be class based the width: 100% and it should look fine.
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
I'm working on a site and wanted to vertically center this rollover image on the Welcome screen. The image is 100% horizontally but vertically its too short, so I was hoping to get equal space on both sides. Can anyone help me? heres a link to the welcome screen:
http://www.gimmicinc.com
Thanks in advance.
yea sorry about that, probably dont need the preload code but here it is just in case:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GiMMiC</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
overflow-y:hidden;
}
</style>
</head>
<center>
<body onload="MM_preloadImages('http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000rollover_zps9d73f3a5.jpg')"><img src="http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000main_zpse8da217b.jpg" style="vertical-align:middle" alt="ENTER" name="Image1" width="100%" height="100%" border="0" id="Image1" />
</body>
If you don't need perfect support in IE8, then this would be easy to accomplish by setting the image as a background in CSS and use the background-size property to scale it. For example:
#bg {
display: block;
height: 1000px;
height: 100vh;
width: 100%;
background: url('http://i1055...1.jpg') center center / cover no-repeat;
}
#bg:hover {
background-image: url('http://i1055...rollover.jpg');
}
Then your markup would look something like this:
<a id='bg' href='/home.html'></a>
And if you only need to preload that one image, that can be done easily with a single line of JS:
<script>var img = new Image(); img.src='http://i1055...rollover.jpg';</script>
Or possibly use a grayscale filter in place of the rollover image (http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
I'm trying to add a button to the OpenLayers map that is supposed to call a JS function when clicked. I've managed to get it to appear how I would like, but the trigger functionality does not work.
If I have the Control.Navigation present, clicking on the button seems to start a dragging event and I can drag the map by clicking even on that button. But even if I remove all other controls, the button's trigger handler does not get called.
I've also tried adding "autoActivate" parameter (which does not make the control automatically active for some reason anyway), I've tried to call activate() function for the button after I've added it, which seem to toggle the control's "active" property, but it still does not respond to the clicks.
Can someone point me to the right direction, please, or post a working example? My non-working example is below.
Thanks,
Janis
<html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButton {
position: absolute;
top: 0;
right: 0;
background: red;
width: 22px;
height: 22px;
}
</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;
function buttonClicked()
{
alert ('Button clicked.');
}
function init()
{
map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
map.zoomToMaxExtent();
panel = new OpenLayers.Control.Panel();
map.addControl (panel);
panel.addControls ([new OpenLayers.Control.Button ({autoActivate: true, displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'})]);
//panel.controls[0].activate(); <-- this does not help.
}
</script>
</head>
<body onload="init()">
<div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>
The button DIV can't receive click events since the panel DIV (which contains the button) has no dimensions. You should style the panel DIV as well. Also the class given to the button under the panel is olControlButtonItemActive so you need to style it instead of olControlButton.
OpenLayers.Control.Panel handles activation of child controls, to have it activate the button automatically you should set the defaultControl option to button when instantiating a new Panel instance. Otherwise, you'll have to click the button once before you can actually trigger it.
<html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButtonItemActive {
position: absolute;
top: 0;
right: 0;
background: red;
width: 22px;
height: 22px;
}
.olControlPanel {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;
function buttonClicked()
{
alert ('Button clicked.');
}
function init()
{
map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
map.zoomToMaxExtent();
button = new OpenLayers.Control.Button ({displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'});
panel = new OpenLayers.Control.Panel({defaultControl: button});
panel.addControls([button]);
map.addControl (panel);
}
</script>
</head>
<body onload="init()">
<div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>