I'm getting started with Ionic 2 / Angular 2 and trying to implement Mapbox into my app.
To display custom markers (code example here) Mapbox expects a DOM element, which, as far as I understand it, is not really the Angular way. I want to add a click event on the marker but because Mapbox uses elements, I'm not entirely sure how to approach this cleanly "the Angular way".
Basically, this is the latest version (showing the map and the marker works, but predictably when I click the marker the event listener can't find this.onMarkerClicked):
export class HomePage {
//(...)
refreshMapPosition() {
/*Initializing Map*/
mapboxgl.accessToken = this.config.mapbox_public_token;
this.map = new mapboxgl.Map({ /*https://www.mapbox.com/mapbox-gl-js/api/#map*/
style: 'mapbox://styles/mapbox/light-v9',
center: [this.Coordinates.longitude, this.Coordinates.latitude],
zoom: 16,
pitch: 80,
minZoom: 7.5,
maxZoom: 17,
container: 'map',
interactive: false,
});
var elCreature = document.createElement('div');
elCreature.className = 'icon-creature alpaca';
elCreature.addEventListener('click', function() {
this.onMarkerClicked();
});
var markerCreature = new mapboxgl.Marker(elCreature, {offset: [-20, -20]})
.setLngLat([this.Coordinates.longitude, this.Coordinates.latitude])
.addTo(this.map);
}
onMarkerClicked() {
console.log("click");
}
}
I'd be much happier if it was possible to have elCreature coming from a component, where I could use <div class="icon-creature alpaca" (click)="onMarkerClicked"></div>. What's the best approach there?
// on your marker HTML
var _self = this;
var _data = this.value;
el.addEventListener('click', function() {
self.markerClicked(_data);
});
// angular method
markerClicked(value){
console.log(value);
}
So I found something that maybe could help you, I created a marker as the documentation mentioned and then I got the element of that market with the getElement() function, after that I added the event to the marker, I do not know if it works with various markers but you can try.
var marker = new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(this.map);
marker.getElement().addEventListener("click", function(){
console.log("function");
});
After sleep a while I found that there another thing that you can use, so you can create a Popup first and then add that Popou to a Marker object with the setPopup() method and actually it like an onClick event, because, when you click the Marker the Popup appears. Here is an example.
var popup = new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("<h1>Hello</h1>");
var marker = new mapboxgl.Marker()
.setLngLat(coordinates)
.setPopup(popup)
.addTo(this.map);
The variable "coordinates" is an array, such that coordinates = [lng,lat], and this.map is just a variable under my Angular class that call to the mapboxgl.Map object.
You have to know that I am using Ionic 4 in this case. If you need more information please tell me.
Regards.
Related
so i want to add a Layer if a other Layer is added ....
i did make a small Example
var mymap = L.map('mymap').setView([51.505, -0.09], 13);
var baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(mymap);
var layer1 = L.marker([51.505,-0.10]);
var layer2 = L.marker([51.505,-0.09]);
var layer3 = L.marker([51.505,-0.8]);
var basemaps = {
"OSM": baseLayer
};
var overlays = {
"Layer1": layer1,
"Layer2": layer2,
"Layer3": layer3
}
L.control.layers(basemaps,overlays,{collapsed:false}).addTo(mymap);
layer1.on("add",function(){
layer2.addTo(mymap);
});
and on
JSFiddle (Updated Version)
Like you (may) can see the second Marker is shortly added but instantly removed after the add-Event is finished ...
Iam not sure how i can prefent it from doing that or more specific how i realy can add the second marker (since in the Layer Control the checkbox isnt even activated in that short moment) ....
you can either use map.on('layeradd') and or try the layeradd
event on your layer1 object.
leaflet's documentation link: http://leafletjs.com/reference-1.0.3.html#layerevent
EDIT... add the following code to js-fiddle code.
layer1.on('add',(e)=>{
layer2.addTo(mymap);
});
layer1.addTo(mymap);
if that doesn't remove the addTo line from above and paste the following
setTimeout(()=>{
layer1.addTo(mymap);
},500);
EDIT 2 :
var controlObj = L.control.layers(basemaps,overlays,{collapsed:false}).addTo(mymap);
layer1.on("add",function(){
console.log(controlObj._form[2].click())
});
this code works... but its not how it should be dont... will have to figureout a better way to do this, but this will work temporarily.
so I'm making a website using leaflet with dozens of base maps. I want to incorporate information about each map that is only visible if the user wants it. To do this, I would like to make an overlay map with popups, but I want the popups to change depending on the base map selected by the user.
How would I go about doing this?
Thank You So Much
You need to either use a plugin that keeps track of the base maps for you (like active layers) or you need to do it yourself.
If you are using the Leaflet layers control, you can subscribe to the basemapchange event to do this easily.
You need two things: active base layer management (easy) and dynamic popups (not too hard)
To wit:
First, here is the event handler to track active base layer when it changes.
map.on("baselayerchange",
function(e) {
// e.name has the layer name
// e.layer has the layer reference
map.activeBaseLayer = e.layer;
console.log("base map changed to " + e.name);
});
Because using L.marker().bindPopup() creates the popup content right there and does not support callbacks, you must manually create the popups in response to click event by calling map.openPopup() with your dynamic html (dynamic because it uses a variable: the active basemap name)
marker.on("click", function(e) {
var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
map.openPopup(html,
e.latlng, {
offset: L.point(1, -24)
});
});
Here is a working example on JS fiddle: http://jsfiddle.net/4caaznsc/
Working code snippet also below (relies on Leaflet CDN):
// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);
// Set up the OSM layer
var baseLayer1 = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
name: "Base layer 1"
});
var baseLayer2 = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
name: "Base layer 2"
});
// add some markers
function createMarker(lat, lng) {
var marker = L.marker([lat, lng]);
marker.on("click", function(e) {
var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
map.openPopup(html,
e.latlng, {
offset: L.point(1, -24)
});
});
return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];
// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers);
// show overlay by default
overlay.addTo(map);
// show features
map.fitBounds(overlay.getBounds(), {
maxZoom: 11
});
// make up our own property for activeBaseLayer, we will keep track of this when it changes
map.activeBaseLayer = baseLayer1;
baseLayer1.addTo(map);
// create basemaps and overlays collections for the layers control
var baseMaps = {};
baseMaps[baseLayer1.options.name] = baseLayer1;
baseMaps[baseLayer2.options.name] = baseLayer2;
var overlays = {
"Overlay": overlay
};
// create layers control
var layersControl = L.control.layers(baseMaps, overlays).addTo(map);
// update active base layer when changed
map.on("baselayerchange",
function(e) {
// e.name has the name, but it may be handy to have layer reference
map.activeBaseLayer = e.layer;
map.closePopup(); // any open popups will no longer be correct; take easy way out and hide 'em
});
#map {
height: 400px;
}
<script src="https://npmcdn.com/leaflet#0.7.7/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet#0.7.7/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>
I am using leaflet js with openstreetmap in my project.
I have multiple circlemarkers at same place in my map.
I want to store some Id in that circlemarkers so that I can Identify that which data should be refereed when circlemarker is clicked.
My circlemarker is
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.addTo(map);
Here I am using title for other purpose that's why I cant use it.
Can any one tell me some way to do this.
It sounds like you would like to add new functionality (functions, properties, etc) to an existing class. It would make sense to use object-oriented principals for this. For this purpose, I'd recommend you extending the CircleMarker class to add those properties.
customCircleMarker = L.CircleMarker.extend({
options: {
someCustomProperty: 'Custom data!',
anotherCustomProperty: 'More data!'
}
});
Now when you create your circle marker, create an instance of your extended object instead.
var myMarker = new customCircleMarker(myPoint, {
title: 'unselected',
radius: 20,
someCustomProperty: 'Adding custom data to this marker!',
anotherCustomProperty: 'More custom data to this marker!'
});
myMarker.addTo(map);
Now you can get the properties like you would any other option from the marker. This is just a simple case of extending, and you can do more as needed, such as adding other properties or functions to the object.
JSFiddle example: JSFiddle
With the current version of leaflet (0.8-dev) you can just set your custom properties on the marker object itself, without having to create a custom marker class...
function map() {
return L.map('leaflet-canvas',
{
maxZoom: 10,
minZoom: 0,
crs: L.CRS.Simple
});
}
var map = map().setView([0, 0], 10).on('click', onMapClick);
function onMapClick(e) {
var marker = L.circleMarker(e.latlng, {draggable:true});
marker.myCustomID = Math.floor((Math.random() * 100) + 1);
marker.on('click', onMarkerClick);
map.addLayer(marker);
// 'click' the new marker to show the ID when marker created
marker.fireEvent('click');
}
function onMarkerClick(e) {
alert(e.target.myCustomID);
}
Here is a TypeScript friendly way:
DataMarker.ts
import * as L from 'leaflet';
export class DataMarker extends L.Marker {
data: any;
constructor(latLng: L.LatLngExpression, data: any, options?: L.MarkerOptions) {
super(latLng, options);
this.setData(data);
}
getData() {
return this.data;
}
setData(data: any) {
this.data = data;
}
}
SomeOtherFile.ts
import { DataMarker } from './DataMarker';
const marker = new DataMarker([ lat, lng ], anyData, markerOptions);
--
Note 1: I decided not to merge the marker options with the data property
Note 2: Adjust the type of data if you need something more specific
marker is basically javascript object rite.
Below snippet solve my case simply.
var marker = new L.marker([13.0102, 80.2157]).addTo(mymap).on('mouseover', onClick);
marker.key = "marker-1";
var marker2 =new L.marker([13.0101, 80.2157]).addTo(mymap).on('mouseover', onClick);
marker2.key = "marker-2";
function onClick(e) {
alert(this.key); // i can expect my keys here
}
just to complete the picture , to create a handler which will respond to a mouse click on a marker and provide access the new options
function onMarkerClick(e) {
console.log("You clicked the marker " + e.target.options.someCustomProperty);
console.log("You clicked the marker " + e.target.options.anotherCustomProperty);
}
marker.on('click', onMarkerClick);
Try this Uniquely identifying Leaflet Markers , its working for me.
//Handle marker click
var onMarkerClick = function(e){
alert("You clicked on marker with customId: " +this.options.myCustomId);
}
//Create marker with custom attribute
var marker = L.marker([36.83711,-2.464459], {myCustomId: "abc123"});
marker.on('click', onMarkerClick);
I would recommend to structure in your data for your markers in the standard GeoJSON format, which makes it compatible for direct saving as shapefile, etc.
var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.properties.id = your_Id;
myMarker.addTo(map);
To retrieve the stored information and do things with it or pass it on to other parts of your program, showing a sample onclick function:
myMarker.on('click',markerOnClick);
function markerOnClick(e) {
my_ID = e.layer.properties.id;
console.log(my_ID, e.latlng);
// do whatever you want with my_ID
}
It took me a while to find out the e.layer.properties way to access the clicked marker's properties, so hope this helps someone. Most other examples only focused on yielding the lat-long of the marker, e.latlng.
Note that you can use this same code even with a whole layer / group of markers. The function will work on each individual marker.
I have a easy solution. options property in each circleMarker is the good place to store custom value.
var myMarker = L.circleMarker(myPoint, { custom_id: 'gisman', radius: 20 });
myMarker.addTo(map);
You can easily retrive the value in options.
function markerOnClick(e) {
var id = e.options.custom_id;
}
I'm currently trying to learn the Bing Maps API and currently trying to build a map with multiple pins that can be hovered to reveal a info window with that pins data. At the moment I'm experiencing a few problems. If anyone could help with the following points that would be great:
When I mouseleave a pin the info window doesn't get removed?
How can I use the data I retrieve in the addPin() to populate the
required info window?
In createInfoBox() I want to hide any active info window when the
map gets moved but this seems to get triggered even if the map isn't
moved?
If there are any improvements i can make please let me know
jsfiddle: http://jsfiddle.net/kyllle/vpepD/23/ and JS below
JS
var dealerMap = {
createInfoBox: function(infobox) {
var instance = this,
pushpin = infobox;
// Now create infowindows
var NewWindow = new Microsoft.Maps.Infobox(pushpin.getLocation(), {
title: 'title',
offset: new Microsoft.Maps.Point(-3, pushpin.getHeight() - 5),
zIndex: 999,
visible: true
});
//Display infowindow
instance.displayInfoBox(NewWindow, pushpin);
//Hide infowindow if map is moved - currently gets run without moving map
//Microsoft.Maps.Events.addHandler(dealerMap.myMap, 'viewchange', instance.hideInfoBox(NewWindow));
},
displayInfoBox: function(infobox, pin) {
var instance = this;
//Show updated infowindow
dealerMap.myMap.entities.push(infobox);
//Mouse out handler to remove window
Microsoft.Maps.Events.addHandler(pin, 'mouseleave', function() {
instance.hideInfoBox(NewWindow);
});
},
hideInfoBox: function(infobox) {
var instance = this;
console.log('this was called');
dealerMap.myMap.entities.remove(infobox);
},
addPin: function() {
var instance = this;
//make $.ajax json call
var response = data.dummy;
//on success make each pin with returned data
for (var i = 0, len = response.length; i < len; i++) {
var responseItem = response[i],
pinLocation = new Microsoft.Maps.Location(responseItem.lat, responseItem.long);
//Create new pin
var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {
icon: 'http://www.kylehouston.com/testing/sportscar_' + responseItem.id +'.png',
width: 32,
height: 37
});
//Push new pin onto map
this.myMap.entities.push(NewPin);
//Event handlers to show and hide requested infowindow information
Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', function(e) {
console.log(this);
dealerMap.createInfoBox(e.target);
});
}
},
init: function() {
var instance = this;
var mapOptions = {
credentials: "AvGoKWSuMorGQb5h4UyyatCBGmGzSZe7-dWQMzXt4qqz6mV_WCC5m-paxvQhednd",
center: new Microsoft.Maps.Location(37.09024, -95.712891),
zoom: 5,
enableClickableLogo: false,
enableSearchLogo: false
}
dealerMap.myMap = new Microsoft.Maps.Map(document.getElementById('mapDiv'), mapOptions);
//now add some pins
instance.addPin();
}
}
dealerMap.init();
});
I highly recommend only showing one infobox at a time on the map. Showing multiple infoboxes can crowd the map and make for a bad user experience. It also uses up a lot more resources. A better approach is to create a single infobox and reuse it for each pushpin as you want to display content. I wrote a blog post that shows how to do this here: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/
Hi I am using the following code to
var view = new storeLocator.View(); //it has an event called load
$(view).on("load",function(){
alert("Gochcha!!");
return true;
})
But I don know why I never get the alert to fired ? Can anybody please tell me what am I missing ?
I think the code snippet din make things clear. Lemme share the entire code I am trying:
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-28, 135),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var panelDiv = $('#panel');
var data = new MyDataSource;
var view = new storeLocator.View(map, data, {
geolocation: true,
features: data.getFeatures()
});
$(view).on("load",function(){
alert("Gochcha!!");
return true;
})
});//End of map load
What I am trying is not Triggering the event, but binding my function to an event of a javascript object, so that whenever the event fires I get my function called first and then continue what it was suppose to do. The even does fire as I see the map and the data get loaded but I am not getting my function to get working.
make sure the context in which you are raising the event is the view otherwise this wont get caught