I added a basic icon instance to my map, but cannot figure out how to give it a custom image. (I closely followed this example . After some digging, I have found examples on Mapbox's own page with code showing how to add custom images but it looks like they are adding markers as layers (with GeoJSON sources). It seems like so much code just to have a custom image. My code just looks like this :
var marker = new mapboxgl.Marker()
.setLngLat([-99, 30])
.addTo(map);
Is there a way to add my own image (PNG) for example? I have searched though the options for marker instances at the Mapbox documentation at this link but I can't find any information there.
Just try this...
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://path_to_your_icon/icon.png)';
el.style.width = '50px';
el.style.height = '50px';
new mapboxgl.Marker(el)
.setLngLat([-99, 30])
.addTo(map);
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'm doing an experiment with gifshot and leafletjs. I want to insert an image inside a marker popup but the problem is that the popup will not adapt his size to fit the content. I've tried to apply some css rules but it will not be displayed on the marker that is present on the map, I need some tips and help to fix this.
Here is an image that is showing my problem:
var animatedImage;
map.on('click', function(event){
marker = map.mouseEventToLatLng(event.originalEvent);
var icns = L.marker([marker.lat, marker.lng]).addTo(map);
sessionStorage.setItem('lat', marker.lat);
sessionStorage.setItem('lng', marker.lng);
gifshot.createGIF({}, function(obj){
if(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
icns.bindPopup(animatedImage).openPopup();
}
});
});
Any help will be appreciated.
I want to be able to add properties to markers in leaflet 0.7.7.
I tried:
var marker = L.marker([51.5, -0.09]);
marker.properties = {};
marker.properties.someprop = "Test"
var addedMarker = marker.addTo(mymap);
// console.log the addedMarker here does not show any properties
when I console.log the addedMarker, I do not see the properties.
It works perfectly for me, see http://playground-leaflet.rhcloud.com/nata/edit?html,console .
I am use leaflet-directive to create map using leaflet.
Is it possible to remove leaflet link and OSM copyright from the map.
I wish to put in leaflet image instead.
When creating the map object, try this:
var map = L.map('map', { attributionControl:false });
It worked for me
A reference to the attribution control instance is being stored in the attributionControl property of your L.Map instance:
var map = new L.Map('map').setView([0, 0], 0);
attribution = map.attributionControl;
When you've got that you can use the setPrefix method to set a new prefix:
attribution.setPrefix('<img src="image.png">');
http://leafletjs.com/reference.html#control-attribution-setprefix
It's probably not legal to remove copy-right information, but if you're familiar with javascript search in the leaflet code for
'leaflet-control-attribution'
Greetings
I'm working on a GWT app that's using Google Maps. I'm trying to add many lettered markers to my map. Originally, I had:
Marker marker = new Marker(point);
marker.setImage("http://www.google.com/mapfiles/markerA.png");
map.addOverlay(marker);
But that didn't work. The call to setImage caused an exception in the maps API and nothing showed up on the map. I searched and found some half-answers talking about MarkerOptions, so I tried:
Icon icon = Icon.newInstance(Icon.DEFAULT_ICON);
icon.setImageURL("http://www.google.com/mapfiles/markerA.png");
MarkerOptions ops = MarkerOptions.newInstance(icon);
ops.setIcon(icon);
Marker marker = new Marker(point, ops);
map.addOverlay(marker);
This was a bit better in that my app was not throwing exceptions anymore and I was seeing marker shadows, but still no custom marker images.
I would prefer a non-JSNI solution to this problem.
Thanks!
This sample seems to cover what you want to achieve: IconDemo.java.
// Create our "tiny" marker icon
Icon icon = Icon.newInstance(
"http://labs.google.com/ridefinder/images/mm_20_red.png");
icon.setShadowURL("http://labs.google.com/ridefinder/images/mm_20_shadow.png");
icon.setIconSize(Size.newInstance(12, 20));
icon.setShadowSize(Size.newInstance(22, 20));
icon.setIconAnchor(Point.newInstance(6, 20));
icon.setInfoWindowAnchor(Point.newInstance(5, 1));
MarkerOptions options = MarkerOptions.newInstance();
options.setIcon(icon);
// LatLng point; MapWidget map;
map.addOverlay(new Marker(point, options));
The live demo can be seen here: http://gwt.google.com/samples/HelloMaps-1.0.4/HelloMaps.html#Creating%20Icons
Here's my new working solution (thx again igro):
Icon icon = Icon.newInstance("http://www.google.com/mapfiles/markerA.png");
icon.setIconSize(Size.newInstance(20, 34));
MarkerOptions ops = MarkerOptions.newInstance(icon);
Marker marker = new Marker(point, ops);
map.addOverlay(marker);
Here is my code in 3.10 Version
LatLng centerIcon = LatLng.newInstance(-25.90307367246304, -48.82550597190857);
MarkerImage markerImage = MarkerImage.newInstance("http://someIcon.png");
MarkerOptions mOpts = MarkerOptions.newInstance();
mOpts.setIcon(markerImage);
mOpts.setPosition(centerIcon);
Marker marker = Marker.newInstance(mOpts);
marker.setMap(mapWidget);