i have a map leaflet and show on map marker whit lat,lug.
how now create location link from marker lat,lug ?
enter image description here
i for create link used this code :
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
navigator.clipboard.writeText(
`https://maps.google.com/?q=${this.orderInfo.latitude},${this.orderInfo.longitude}`
);
Related
Just a quick question, if anyone has ever replaced the Mapbox default marker with a Maki icon. I've only seen examples of using Maki icons for point tilesets/layers, but I'm wanting to use it for non-tileset features, specifically replacing the marker that adds after geocoding, at the location of the address just geocoded.
Or, trying to find something that is similar to Google Maps symbols below. Any suggestions appreciated.
var pinImage = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ff4b00',
fillOpacity: .9,
scale: 5,
strokeColor: '#CDDC39',
strokeWeight: 0,
strokeOpacity: .5
}
The MapboxGeocoder control has a marker option https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#parameters which controls the marker placed on the map when you select a result.
There is an example at https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ to create a Marker with a custom icon.
So you could create an HTML Element which contains either an SVG or PNG icon from Maki and use that as your element in your custom Marker passed to the MapboxGeocoder control.
I think this sample is what you are looking for Use a custom render function with a geocoder
It allows you to add a custom render function including the icon...
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'poi',
// see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
render: function(item) {
// extract the item's maki icon or use a default
var maki = item.properties.maki || 'marker';
return (
"<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/#mapbox/maki#6.1.0/icons/" +
maki +
"-15.svg'><span class='geocoder-dropdown-text'>" +
item.text +
'</span></div>'
);
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);
I am working with mapbox markers and I have created multiple markers as follows:
var cord = [{lng:,lat:},{lng:,lat:}]
function createMarker(){
for(var i = 0; i < cord.length; i++){
var marker = new mapboxgl.Marker({})
.setLngLat([cord[i].lng, cord[i].lat])
.addTo(map);
}
}
I wanted each marker to detect the click but I am unable to figure out how to do it?
Is it possible to detect click on each marker ?
You can add a click event handler like this:
marker.element.addEventListener('click', event => alert('click'));
My function is supposed to display a marker over an existing icon (US Cities) when clicked/selected. The marker is an image file. Then when the user clicks on another icon, the previous marker should disappear.
It seems to work fine at first. The first marker is created when the icon is clicked. When the second icon is clicked, the marker is created and the original marker disappears. When a third icon is clicked, the marker does not appear. The console says "marker is not defined".
Here is my code:
map.on('click', 'usa_cities', function(highlightMarker) {
var markerCoordinates = highlightMarker.features[0].geometry.coordinates.slice();
var markerElement = document.createElement('div');
markerElement.id = 'marker';
// create the marker
new mapboxgl.Marker(markerElement)
.setLngLat(markerCoordinates)
.addTo(map);
map.on('click', 'usa_cities', function() {
marker.remove()
});
}),
Thank you
You don't need to create a new marker each time the user clicks. You can simply call marker.setLngLat(markerCoordinates).
I am currently working with Bing maps version 8 . I was previously working with version 7 . When plotting pushpins in version 7 a htmlContent attribute was sent along with the pushpins. What this html content did was that the pushpin was contained inside the div element .
var pushpinOptions = {
htmlContent: "<div id='container" + siteIndex + "'style='pointer-events: all !important; z-index: 35000; '></div><div id='lines"+siteIndex+"'></div>",
anchor:new Microsoft.Maps.Point(iconWidth/2,iconHeight/2),
width: iconWidth,
height: iconHeight
};
var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);
I used Konva JS to plot over these pushpins which i plotted with BingMaps.
var stage = new Konva.Stage({
container: 'container' + siteIndex,
width: width,
height: height,
stroke: 'green'
});
'container' + siteIndex, was the id of the div i set in bing maps pushpins which i used in konva to plot another image over the pushpins. This is my requirement . I have to plot a pushpin with coordinates and then plot some images over the pushpins . Now when i shifted from v7 to v8 for various reasons, I am facing an issue .
In v8 htmlContent is not sent with the pushpins, rather we send an svg image which has no way to identify after being plotted other than co-ordinates .
var customHtml = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle id="myCircle htmlId" cx="25" cy="25" r="20" stroke="orange" stroke-width="4" fill="yellow" /></svg>';
var pin = new Microsoft.Maps.Pushpin(latLon, {
icon: customHtml.replace("htmlId",siteIndex.toString()),
anchor: new Microsoft.Maps.Point(iconWidth/2,iconHeight/2)
});
Now , what i am lokking for is a way to either plot images with a third party api which plots over co-ordinates or find to way to get access of the pushpins i plotted without the html content i.e with svg images. When i access the id with
document.getElementById("myCircle 0");
i get null.
I have looked for many different third party apis like leafleat js, konva js , Graphics js. But i do not find a way to identify my pushpins .
Is there a way to achieve what i wish to? There must be.
HTML pushpins are not supported in Bing Maps V8 as they can't be drawn on an HTML5 canvas. Using SVG would render on the Canvas but there is no DOM element create, which is why you aren't able to use document.getElementById. Using DOM elements with maps really limits performance and is the main reason why rendering is now done with an HTML5 canvas. That said, even in V7 using the approach of custom HTML in general so you can do document.getElementById to retrieve the pushpins was not a good approach. If you want to assign a unique ID to each pushpin and then be able to retrieve it, you should use a custom JavaScript property, or the existing metadata property. For example:
var pin = new Microsoft.Maps.Pushpin(map.getCenter());
pin.metadata = {
id: 'myCircle 0'
};
map.entities.push(pin);
function getPushpinById(id){
var pin;
for(var i=0,len = map.entities.getLength(), i<len;i++){
pin = map.entities.get(i);
if(pin.metadata && pin.metadata.id === id){
return pin;
}
}
}
Using this approach would allow the greatest performance in your app. However, if you really want to use custom HTML to create pushpins, it is possible to achieve this in V8 by using a custom overlay. Here is a code sample: https://msdn.microsoft.com/en-US/library/mt762877.aspx
I have a leaflet l.control info popup on the top right corner of my map.
When I move one of my custom marker to the top right behind the l.control and release the mouse button, I am no more able to select the marker (because the l.control div is in the foreground)
Is there a way to prevent the user from dragging a marker behind the l.control div ?
I can't move the map to make the marker visible again as I plan to fix the marker position based on the container position (so if you move the map the marker will stay at the same place)
Thanks
I think easiest way to disable marker draggable, when the mouse enter the div info.
If your final goal is to fix the marker position to the map's center, just don't make it draggable and use L.Map's move event to update the marker when the map gets moved?
var map = new L.Map('leaflet', {
'center': [52.378333, 4.9],
'zoom': 12,
'layers': [
L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
})
]
});
var marker = new L.Marker(map.getCenter()).addTo(map);
map.on('move', function () {
marker.setLatLng(this.getCenter());
});
Example on Plunker: http://plnkr.co/edit/PnnuMowCXvjRxyPqEj31?p=preview