How can I put the type of addListener of google maps onto Mapbox instead of below one?
Thanks for the response!
stationI.addListener('click', function() {
SetStationInfo(this.title);
});
Herebelow is the full code:
for (var i=0;i<APIinfo.network.stations.length;i++){
popup = new mapboxgl.Popup({ offset: 25 })
.setText(APIinfo.network.stations[i].name); //Mapbox
var marker = new mapboxgl.Marker()
.setPopup(popup)
.setLngLat([APIinfo.network.stations[i].longitude, APIinfo.network.stations[i].latitude])
.addTo(map); //Mapbox
stationI.addListener('click', function() { //Google Maps
SetStationInfo(this.title);
});
}
Reading your code, not sure what stationI is, if it's a layer or an object.
But regarding the events in mapbox, you can do that with:
map.on('click', function(e) {
console.log('A click event has occurred at ' + e.lngLat);
});
you can also add the layer:
map.on('click', 'yourLayerId', function(e) {
console.log('A click event has occurred at ' + e.lngLat);
});
Related
I am having trouble trying to display the event name from an array of objects in a parsed JSON file within Google Maps Ionic framework. Right now I have the markers displaying for each event with a simple string called "testing" which displays fine. The problem is I am unsure of how to display each events name within this info window and not the string I made. Any help would be appreciated. I'll post the sample image I have now as well as the info window functionality below. Thanks!
what I have displaying now:
here
marker/info window functionality:
getMarkers(){
//this.http.get('assets/data/markers.json').map((res)=>res.json()).subscribe(data=>{
this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500').map((res)=>res.json()).subscribe(data=>{
this.addMarkersMap(data);
});
}
addMarkersMap(markers){
for(let marker of markers)
{
var loc = marker.calEvent.locations[0]['coords'];
console.log(loc);
marker = new google.maps.Marker({
position: loc,
map: this.map,
});
var infoWindow = new google.maps.InfoWindow({
content: markers.eventName
});
google.maps.event.addListener(marker, 'click', function(str)
{
return function() {
infoWindow.setContent(str);
infoWindow.open(this.map, marker);
}
}(markers.eventName));
}
}
I correct myself. You could benefit from a closure here.
Use a self-calling function to seal your parameter to the infowindow:
google.maps.event.addListener(marker, 'click', function(str)
{
return function() {
infoWindow.setContent(str);
infoWindow.open(this.map, marker);
}
}(markers.calEvent.eventName));
I'm trying to use angular-leaflet-directive with Websocket, though I'm able to integrate successfully, the positions of the markers are not getting updated dynamically. However The positions of map gets updated if I move mouse over the map but doesn't get updated when the lat-lng value changes.
Below is code snippet of module.
$scope.markers = {};
angular.extend($scope, {
bounds : $scope.bounds,
center : {},
kppaths : {},
events: {
markers:{
enable: [ 'move' ]
}
}
});
$stomp.setDebug(function(args) {
$log.info(args);
});
$scope.startWS = function() {
var connectionHeaders = {};
// Connect
$stomp.connect("/kp-ws").then(function(frame){
$log.info("connected to server")
$stomp.send('/app/start', {});
// Subscribe for message
$scope.subscription = $stomp.subscribe('/topic/kp', function(
data, headers, res) {
angular.forEach(data, function(k,v){
$scope.markers[k.markerId].lat = k.lat;
$scope.markers[k.markerId].lng = k.lng;
});
});
});
};
$scope.stopWS = function() {
$stomp.send('/app/stop', {});
$scope.subscription.unsubscribe();
$stomp.disconnect();
};
$scope.$on("leafletDirectiveMarker.move", function(event, args){
$log.info(args.model.lat);
});
} ]);
The html file
<div class="card-block">
<leaflet bounds="bounds" geojson="geojson" lf-center="center"
paths="kppaths" markers="markers" event-broadcast="events" width="100%" height="480px"></leaflet>
</div>
Is I'm missing something, Please let me know or suggest how to fix this issue?
The possible workaround I found is:
leafletData.getMap().then(function (map) {
$timeout(function() {map.invalidateSize()});
});
basically, once the map is invalidated, it updates markers' position. Although not perfect, considering some performance issues, the workaround at least solves the main issue.
I want to open the popup in Angular Leaflet as a hover and not on click.
I have a markers array initialized and an overlay of a layer on top of the base layer.
I am trying to create a layer where buses and bus stops belong to each other. So each layer belongs to the same type in the overlays.
I am using the code
markers = [];
markers.push(
{ layer : layername,
lat : latitude,
lng : longitude,
message: busNames(data),
icon :{....}
}
});
I have another push marker set on the same layer which builds busStop data.
Now how do I display the popups when mouse is moved over them as hover instead of showing them on click
P.S - I am new to coding and hence please help me with proceeding further.
For each marker you are creating you have to listen to 'mouseover' and 'mouseout' events.
You open the popup when 'mouseover' is sent, close it when 'mouseout' is sent.
var marker = L.marker([51.5, -0.09]).addTo(map);
var tooltipPopup;
marker.on('mouseover', function(e) {
tooltipPopup = L.popup({ offset: L.point(0, -50)});
tooltipPopup.setContent("Hello");
tooltipPopup.setLatLng(e.target.getLatLng());
tooltipPopup.openOn(map);
});
marker.on('mouseout', function(e) {
map.closePopup(tooltipPopup);
});
Here is an example
First, you have to include 'leafletData' to your controller, after that add 'mouseover' and 'mouseout' events to your Marker.
angular
.module('myapp')
.controller("EventsController", [ '$scope', 'leafletData', function($scope, leafletData) {
$scope.$on('leafletDirectiveMarker.mouseover', function(event, args){
console.log('I am over!');
var popup = L.popup({ offset: L.point(0, -28)})
.setLatLng([args.model.lat, args.model.lng])
.setContent(args.model.message)
leafletData.getMap().then(function(map) {
popup.openOn(map);
});
});
$scope.$on('leafletDirectiveMarker.mouseout', function(event){
leafletData.getMap().then(function(map) {
map.closePopup();
});
});
}]);
I have an AngularJS application and I'm currently trying to access the "search_expanded" event of Leaflet Search control but having no luck.
Here's my code:
angular.module('myApp', [ 'leaflet-directive' ])
.controller('ShowMapCtrl', ["$scope", "leafletData", function ($scope, leafletData) {
// some code
leafletData.getMap().then(function(map) {
map.on('search_expanded', function(e){
alert("search control expannded");
});
});
The search_expanded event, and all the other events supported by L.Control.Search are fired on the actual control instance not on the map instance as you can see in the following example:
var controlSearch = new L.Control.Search({
layer: new L.LayerGroup()
}).on('search_expanded', function () {
console.log('search_expanded!')
}).addTo(map);
http://plnkr.co/edit/njeXYb4PfbaG3hppcgmO?p=preview
First off I would try to throw some exception handling in there:
leafletData.getMap().then(function(map) {
map.on('search_expanded', function(e){
alert("search control expannded");
}, function(reason) {
alert('Failed: ' + reason);
});
Also, instead of alert, I prefer to use console.log() especially with Angular applications.
leafletData.getMap().then(function(map) {
map.on('search_expanded', function(e){
console.log("search control expannded");
}, function(reason) {
console.log('Failed: ' + reason);
});
I came up with a sloppy workaround since the directive won't allow me to catch the search control events.
var expanded = false;
$scope.$on('leafletDirectiveMap.layeradd', function(){
$('input.search-input').focus(function(){
expanded = !expanded;
if(expanded)
{
console.log("search control expanded");
}
});
});
I have implemented a custom overlay. I want to add an event which will pop an info window when I click the overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('okmap'), {
zoom: 4,
center: {lat: 35.0000, lng: 103.0000}
});
for (var n in nodes) {
var myMarker = new MyMarker(map, {latlng: new google.maps.LatLng(nodes[n][0], nodes[n][1]),
image: 'assets/img/light-green.png',
labelText: (Math.random() * 100).toFixed(0)});
markers.push(myMarker);
var infowindow = new google.maps.InfoWindow({
content: n
});
myMarker.addListener('click', function() {
infowindow.open(map, myMarker);
});
}
}
But it is not working!
I faced a simliar problem some time back. Here are two things that helped me.
I am considering the main overlay element to be a div.
In your MyMarker.draw function make sure that you are using a pane that has access to the DOM events.e.g.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
See https://developers.google.com/maps/documentation/javascript/customoverlays#initialize for more details.
Make sure you define an event listener, also in the MyMarker.draw function.
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});