How to add a scaleline out of map area?
My HTML:
<div id="map"></div>
<div id="scaleline"></div>
and javascript code for adding scaleline:
var scale = new ol.control.ScaleLine({
target: document.getElementById("scaleline")
});
map.addControl(scale);
It sounds a CSS problem, but how do i configure css for div "scaleline" ?
Should work. See in action in this fiddle
var scaleLineControl = new ol.control.ScaleLine({
target: document.getElementById('scaleline')
});
var map = new ol.Map({
controls: ol.control.defaults().extend([scaleLineControl])
})
Related
I want to add image and text to popup of leaflet map such as this link:
https://www.bookdepository.com/
I can add image But How I can add text near the image?
my code is here:
<div id="map" style="width:270px;height:310px;"></div>
<?php
$matrix = [
[34.05777800, 51.48416700],
[38.50972200, 46.65444400],
[29.26666700, 51.21666700],
[34.05777800, 51.48416700],]
?>
<script type="text/javascript">
var matrix = JSON.parse('<?php echo json_encode($matrix);?>');
var map = L.map('map').setView(matrix[0],7);
var i = 1;
function myLoop() {
setTimeout(function () {
var div = L.DomUtil.create('div', 'my-div');
var img = L.DomUtil.create('img', 'my-img',div);
img.style.width = '60px';
img.style.height = '80px';
div.style.textAlign = 'right';
img.src = 'http://127.0.0.1:8000/productImages/64517.jpg';
L.marker(matrix[i]).addTo(map)
.bindPopup(div)
.openPopup();
map.flyTo(matrix[i]);
i++;
if (i < 10) {
myLoop();
}
}, 6000)
}
L.tileLayer('https://stamen-tiles
{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
ext: 'jpg'
}).addTo(map);
myLoop();
</script>
My output is this pic:
You can use bindpopup function of leaflet to attach a pop up with your custom html.
marker.bindPopup("<div>Your custom html</div>");
You can find more information here.
You can indeed use the .bindPopup method like this (in your case) :
matrix
.bindPopup("<div> <p>Text</p> <img src="path/or/url"/> </div>");
Nevertheless it seems that using the css background-image in a <span> tag as popup image doesn't work correctly, I recommend using an <img> tag.
Hope it's helpful, you can find more information on methods there.
Is there a way to make only part of a Packery/Draggabilly container draggable? Say, only making the .chartHeader in the below example draggable - yet having the overall .chartContainer move as one piece? Currently, only the .chartHeader is draggable and everything else stays behind. I'd like to have everything move at once like one big happy family.
Here's a fiddle: http://jsfiddle.net/uD5rG/
Thanks in advance!
<div class="chartContainer">
<div class="chartHeader">HEADER</div>
<div class="chartContent">CONTENT</div>
</div>
Here's my packery/draggabilly config:
var container = document.querySelector("#packeryContainer");
var pckry = new Packery( container, {
itemSelector: '.chartContainer',
columnWidth: 350,
rowHeight: 255,
gutter: 15
});
// make packery items draggable
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
var elem = itemElems[i];
// get the .chartHeader element
var headerElem = elem.querySelector(".chartHeader");
// make element draggable with Draggabilly
var draggie = new Draggabilly( headerElem );
// bind Draggabilly events to Packery
pckry.bindDraggabillyEvents( draggie );
}
Fixed # http://jsfiddle.net/uD5rG/1/
I added draggabilly's handle option, as seen below
// make element draggable with Draggabilly
var draggie = new Draggabilly( elem , {
handle: '.handle'
});
Use the binding to jquery UI Draggable. It works fine for me with the jquery UI attribute handle.
http://packery.metafizzy.co/draggable.html#jquery-ui-draggable
Your solution, that you posted on jsfiddle does not work for me.
Just use the handle option like Cole mentioned.
$(function () {
var $container = $('.packery');
$container.packery({
columnWidth: 80,
rowHeight: 82 /* +2 for the bottom margin on .item */
});
// bind draggabilly events to item elements
$container.find('.item').each(makeEachDraggable);
function makeEachDraggable(i, itemElem) {
// make element draggable with Draggabilly
var draggie = new Draggabilly(itemElem, {
handle: '.header'
});
// bind Draggabilly events to Packery
$container.packery('bindDraggabillyEvents', draggie);
}
});
Here's a simple fiddle: http://jsfiddle.net/ex5TJ/
Also, have a look at this link for more details: http://draggabilly.desandro.com/
using jquery:
var draggie = $grid.find('.grid-item').draggable({
handle: '.ui-sortable-handle'
});
$grid.packery('bindUIDraggableEvents', draggie);
I have the same question as asked here but provided no accepted answer has been given and that my procedure is different, I'm opening a new one.
I have a map inside a Foundation tab that is hidden at the beginning and it only displays part of the map when opened. I've read the issues related to that and tried the attempts there but no luck. I know I have to re-initialize the map on tab change but I can't make it work.
I have a function that holds all the map info:
function startMap(obj){
var markers = new Array();
var glat_center = $(obj).attr('data-glat');
var glong_center = $(obj).attr('data-glong');
var Latlng_center = new google.maps.LatLng(glat_center, glong_center);
var mapOptions = {
zoom: zoom,
scrollwheel: false,
center: Latlng_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: mapStyles,
mapTypeControl: false,
streetViewControl: false,
minZoom: 4,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(obj, mapOptions);
if($(obj).attr('data-glat') && $(obj).attr('data-glong')){
var glat = $(obj).attr('data-glat');
var glong = $(obj).attr('data-glong');
var Latlng = new google.maps.LatLng(glat, glong);
var marker = new google.maps.Marker({
position: Latlng,
map: map
});
}
}
My html markup looks like this
<div class="tabs" data-section="auto">
<!--two more tabs here-->
<section class="property-location">
<a href="#" class="title" data-section-title>Title</a>
<div class="tab-content" data-slug="section3" data-section-content>
<div class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;">
</div>
</div>
</section>
</div>
So then, what I'm trying to do is call this function when the tab is clicked, as I can't find any other tab events in Foundation docs. First I find the .title of the tab that contains the map, then look if a map exists (just in case) and then I call the function on the div holding the map.
$('.tabs .property-location').find('.title').click(function() {
if(($('.tab-content').find('.google-map')).length) {
//console.log('I found a map');
startMap($('.google-map'));
}
});
I know it's finding the map because I console.log it, but the console throws this error
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]
which is on the following src http://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/14/7/main.js
So it's the Google Maps JS that's throwing this error but I can't understand why.
I know it's difficult, but any ideas?
You pass a jQuery-element, but google maps needs a HTMLElement. Use
var map = document.querySelector('.google-map');
startMap(map);
instead of
startMap($('.google-map'));
Instead of querySelector you can use getElementsByClassName
var map = document.getElementsByClassName('google-map')[0];
But the always recommended approach is to refer to the map by an id :
<div id="the-google-map" class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;"></div>
var map = document.getElementById('the-google-map');
I have the below code, based on one of the API samples. A click on the map creates a marker. A click on the marker opens up an info window. Now I want a click on the info window to do something. E.g. a click anywhere might close it, as opposed to the little cross in the corner. Or a click on it might open a new URL. Etc.
Unfortunately it seems there is no "click" event for info windows.
The closest I've got is shown as a commented out line below: I wrap my info window content in a div, and give that an onClick. This works, but there is a big border around it. I really want to be able to click anywhere in the info window box.
Is there a way?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Click Test</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
google.maps.visualRefresh = true; //New look visuals.
function initialize() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '400px';
mapdiv.style.height = '600px';
}
var mapOptions = {
zoom:3,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
//content: "<div onClick='test1()'>(lat,lng):<br/>"+location.lat()+","+location.lng()+"</div>"
content: "(lat,lng):<br/>"+location.lat()+","+location.lng()
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
infowindow.addListener('click',test1); //Does nothing
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function test1(){alert("test1");}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
UPDATE:
This image shows the problem when I use a clickable div inside the content (background set to red to show the extent of the region I can make clickable, and also that I can style; if I set a negative margin I just get scrollbars, not a bigger region!). It is the whole white area I want to be clickable, not just that red rectangle.
I decided to use InfoBox found in the Google Maps Utility Library. So in the header add a link to the library. Then replace the new google.maps.InfoWindow() line with this one:
var infowindow = new InfoBox({
closeBoxURL:"",
content: '<div onClick="test1();return false;" style="background:white;opacity:0.8;padding:8px">(lat,lng):<br/>'+
location.lat()+","+location.lng()+"</div>"
});
By setting closeBoxUrl to a blank string I get no close option. I added a large padding just so you can see that clicking right to the edge does indeed work.
You can also do it this way. I also use the boxClass option so the formatting is done in CSS:
var infoContent=document.createElement('div');
infoContent.innerHTML="(lat,lng):<br/>"+location.lat()+","+location.lng();
infoContent.onclick=test1;
var infowindow = new InfoBox({
closeBoxURL:"",
boxClass:"marker_popup",
content: infoContent,
});
(Aside, if doing it this way, on just some browsers it creates a marker below the InfoBox! Simplest fix is to change test1 so it looks like: function test1(event){alert("test1");event.preventDefault();return false;} )
P.S. I chose InfoBox over InfoBubble, as the latter has no documentation, and it had no obvious advantages to compensate for that major flaw! InfoBox has documentation and a reference. (links are for version 1.1.9)
I used the code of a beginners turtorial (by Mano Marks / Google) about the autocomplete method of GMaps. Now everything works fine, however I don't know how to change the color of the suggested strings in the autocomplete box that is adjusted to my input-field
I want to do that because the default color seems to be white!!??
Does somebody know how to change that color! Thanks a lot.
Here is the code:
HTML:
Suche:<input type="text" id="autocomplete" size="40" />
......
JS:
//Autocomplete
var acOptions = {
types:['establishment'],
};
var autocomplete =
new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
autocomplete.bindTo('bounds',map);
var ac_iw = new google.maps.InfoWindow();
var ac_marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete,'place_changed',function(){
ac_iw.close();
var place = autocomplete.getPlace();
if(place.geometry.viewport){
map.fitBounds(place.geometry.viewport);
}
else{
map.setCenter(place.geometry.location);
map.setZoom(17);
}
ac_marker.setPosition(place.geometry.location);
ac_iw.setContent('<strong>' + place.name + '</strong><br/>');
ac_iw.open(map,ac_marker);
google.maps.event.addListener(ac_marker,'click',function(){
ac_iw.open(map,ac_marker);
});
});
AFAIK there is no particular text-color set for the suggestions. But however, you may use the CSS-selector
.pac-container *
... to apply a custom style.