I am new in Openlayers 3. I have vector layer importing from geojson file. I would like to show information about my feature after click on vector layer.
Any idea how I can do it?
I used the library from here for this purpose. The sample code is
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
//handling Onclick popup
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var coord = event.feature.getGeometry().getCoordinates();
popup.show(coord, '<div><h2>Tilte</h2><p>' +feature.get('<property_in_single_quotes>')+ '</p></div>');
}
});
Hope this helps
Take a look at these examples:
1) http://openlayers.org/en/v3.14.1/examples/vector-layer.html?q=overlay
2) http://openlayers.org/en/v3.14.1/examples/popup.html?q=overlay
Instead of putting the vector information next to the map, you put it in the popup <div> you created.
Related
I want show the info window for google maps. But the data or view is a ui5 view as below,
var oView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.XML,
viewName :"com.example.view.ListView"
});
And this view is perfect.
Mainly I have the google info window and I need to place this inside that info window as follows,
var infowindow = new google.maps.InfoWindow({
content: view, //Here I am getting below error
position: coordinate
});
infowindow.open(map);
So i am getting
InvalidValueError: setContent: not a string; and Element-
In this I know I can place a domNode or string inside the google info window's content. So I need to know how can we convert this ui5 view to domNode or any other solution.
You can get the DOM Node of a SAPUI5 View or Control by using the method getDomRef
var infowindow = new google.maps.InfoWindow({
content: view.getDomRef(),
position : coordinate
});
infowindow.open(map);
Please be aware that a SAPUI5 View/Control only has a DOM Reference after it was first rendered. Furthermore after a potential rerendering you might have to re-apply the above code.
BR Chris
I'm using Google places AutoComplete on a textbox and it's essentially working, picking the locations and stuffing them into the textboxes.
The problem is that I want to only stuff the selection name - not the full name + address formatting out of the list that the AutoComplete list produces. I can't seem to find a way to override what goes into the textbox.
var $name = $("#txtName");
$name.focus();
var autocomplete = new google.maps.places.Autocomplete($name[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
// explicitly update model
// but doesn't display in UI
$scope.locationData.Name = place.name;
// explicitly update the input box - doesn't update UI
$name.val(place.name);
return false; // doesn't work - updates UI
});
Basically what I'd like to do is take over the input box text assignment myself by doing the assignment myself and forcing autocomplete to not set the textbox value.
Is this possible?
Set the value with a short delay.
$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);
Using .off() allows the user to edit the name if they wish. If you wish to only allow the places API name remove .off().
I understand how to get my current location with HTML5.
How do I add a click handler, so when a button is pressed it shows my current position on the map?
Google's example pretty much explains how it's done, but the button is set to predefined coordinates. How do I attach the "Home" button to current position coordinates instead?
Custom Control Example
From Google demo
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
As initialLocation is global you can use this to set the click event listeners: simply set the map to initialLocation
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(initialLocation)
});
I'm trying to work out from the Leaflet.js docs how it would be possible to open more than one popup upon showing the page. For instance, if one had three markers (each representing a building), each one would have their popup opened immediately.
http://leaflet.cloudmade.com/reference.html#popup
cryptically says:
"Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want."
but
http://leaflet.cloudmade.com/reference.html#map-addlayer
gives no hints about how this might be achievable.
Can anyone clarify if this is possible, and give any hints on how to do it?
You must add the popups as Layer.
Try with this example code:
var popupLocation1 = new L.LatLng(51.5, -0.09);
var popupLocation2 = new L.LatLng(51.51, -0.08);
var popupContent1 = '<p>Hello world!<br />This is a nice popup.</p>',
popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);
var popupContent2 = '<p>Hello world!<br />This is a nice popup.</p>',
popup2 = new L.Popup();
popup2.setLatLng(popupLocation2);
popup2.setContent(popupContent2);
map.addLayer(popup1).addLayer(popup2);
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup();
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
example: http://jsfiddle.net/paulovieira/yVLJf/
found it here: https://groups.google.com/forum/#!msg/leaflet-js/qXVBcD3juL4/4pZXHTv1baIJ
marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup();
use autoClose option
In the latest version, there is an autoClose option.
To have both marker and popup open at same time, without adding layers explicitly :
var popup1 = new L.Popup({'autoClose':false});
popup1.setLatLng([53.55375, 9.96871]);
popup1.setContent('First popup');
var popup2 = new L.Popup({'autoClose':false});
popup2.setLatLng([53.552046, 9.9132]);
popup2.setContent('Second popup');
L.marker([53.55375, 9.96871]).addTo(myMap)
.bindPopup(popup1).openPopup();
L.marker([53.552046, 9.9132]).addTo(myMap)
.bindPopup(popup2).openPopup();
This solution work for me:
L.marker([30.4160534, -87.2226216], {icon: icon_url}).bindPopup('Hello World',{autoClose:false}).addTo(map).openPopup();
here is the preview image: https://prnt.sc/NuX9Qs291IQq
triky solution is remove popup link from map object on open:
map.on('popupopen', function (e) {
delete map._popup;
});
I'm currently working on a project that requires that I have a div stacked above a Google Map. However, I need to pass the mousemove event of the div to the Map. To do that, I need to find the LatLng co-ordinates from the map container pixel co-ordinate (since triggering the Maps mousemove event requires the LatLng co-ordinates).
Is there any other way to pass the mousemove event from the div to the map, and if not, how do I go from the Map container co-ordinates to LatLng. I read that doing so requires creating a dummy overlay, and then using the getProjection() on that to get a MapCanvasProjection, and finally calling the fromContainerPixelToLatLng(). Is there any simpler way or do I really have to create a dummy overlay first?
As far as I can tell, this is the way you have to do it. I was reluctant at first, too, since it seemed like such overkill, but once I did it everything worked great. Here's an example implementation with a convenient delayedInit() callback:
function Dummy(map) {
this.setMap(map);
}
Dummy.prototype = new google.maps.OverlayView();
Dummy.prototype.draw = function() {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
}
Dummy.prototype.onAdd = function(){
// the Overlay dummy is ready and can be called upon
delayedInit();
}
var dum;
... and after you've instantiated your Google map:
dum = new Dummy(map);