I want to change the icon marker in ionic 3,
var dot= L.icon({
iconUrl: 'dot.png',
shadowUrl: 'dot-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative..
});
...
...
L.marker([this.lat, this.lng], { icon: dot}).addTo(this.map);
https://leafletjs.com/reference-1.3.0.html#icon
It is not working! just does not show ther marker, there is not show any error.
Where must to be the dot.png?
Related
Using the below L.popup code, I would have thought the popup would expand width to match the provided image. Seems the width of the popup is still 51 instead of 100 or 300. Why doesnt the popup change the width?
var waterway = L.icon({
iconUrl: '/user_public/ski/images/waterway-canal-icon.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -30]
iconAnchor
});
var popup = L.popup({
maxWidth: '400'
})
.setLatLng( [34.653791786519115, 138.80018854141235] )
.setContent('<img src="http://www.fillmurray.com/100/150" />')
.openOn(map);
L.marker([34.653791786519115, 138.80018854141235],
{icon:waterway}).addTo(map).bindPopup(popup);
I've searched everywhere, or almost, on the web to find a solution to add color to markers to a leaflet map when using geoJson, but in vein. So here I am today asking you how to achieve this little miracle ?
[Here]1 is my map. As you can see, all the markers have the default color, blue. I would like 3 more colors.
I've managed to make the leaflet markercluster plugin work. I was wondering how to make color-markers work.
Thank you all !
You have to set the icon for each marker:
You have to know a way how to differ the markers, so that you know which marker needs which icon. I used for this the value in the feature.properties.icon, this is a custom value
L.geoJSON(someGeojsonFeature, {
pointToLayer: function(feature, latlng) {
var _icon = L.icon({
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
if (feature.properties.icon == "black") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png'
} else if (feature.properties.icon == "gold") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png'
} else if (feature.properties.icon == "green") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png'
}
return L.marker(latlng, {
icon: _icon
});
}
}).addTo(map);
The following code is in a javascript function within a file called maplocation.js that is supposed to fire only on a button click but instead it fires automatically when the page loads for the first time. The code does not wait for the button click but loads the map instantly. On button click it is supposed to add a new image of a car to the location.
window.map.panTo([data.Data.LatLng.Lat, data.Data.LatLng.Lng]);
var vehicleIcon = L.icon({
iconUrl: settings.mapIcon,
iconSize: [22, 25],
iconAnchor: [11, 20],
popupAnchor: [0, -22]
});
L.circle([data.Data.LatLng.Lat, data.Data.LatLng.Lng], 140, { color: 'Green' }).addTo(window.map);
L.marker([data.Data.LatLng.Lat, data.Data.LatLng.Lng], { icon: vehicleIcon }).addTo(window.map).bindPopup("<b style='width:200px;'>" + settings.mapTitle + "</b><br />");
I am getting the center of a leaflet feature to show its label.
Then, I am specifying an offset when binding the label so it appears upper and righter.
The thing is that i need to add the offset in the entryJSON.getBounds().getCenter() code.
Is there a way of adding an offset in a leaflet latlong object? ( I can imagine something like entryJSON.getBounds().getCenter().offset([-10, -57]) but this is not working...)
var marker = new L.marker(entryJSON.getBounds().getCenter(), { opacity: 0.01 });
marker.bindLabel('whatever here', {noHide: true, className: "info", offset: [-10, -57] });
The label's offset property works with pixels. A L.LatLng object works with coordinates not pixels. What you could do is use the conversion methods of L.Map to turn your current coordinate position into a pixel position, change that, and then convert back:
var latLng = L.latLng([0,0]);
var point = map.latLngToContainerPoint(latLng);
var newPoint = L.point([point.x - 10, point.y - 57]);
var newLatLng = map.containerPointToLatLng(newPoint);
Example: http://plnkr.co/edit/LeNqz8?p=preview
Reference: http://leafletjs.com/reference.html#map-latlngtocontainerpoint
a much more easier one: https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
The standard method of using a custom icon as shown in the Leaflet docs isn't working for me when I have a geojson data source. the layer is added fine, but is using the default marker icon. There's no reference to my custom icon PNG when i examine the DOM. Here's my code:
var crossIcon = L.icon({
iconUrl: 'plus.png',
shadowUrl: 'marker-shadow.png',
iconSize: [11, 11],
shadowSize: [11, 11],
iconAnchor: [6, 6],
shadowAnchor: [5, 5],
popupAnchor: [5, 5]
});
var points = L.geoJson(labels, {
icon: crossIcon
});
map.addLayer(points);
layerControl.addOverlay(points, 'Site Locations');
I've tried several suggestions found on SO and elsewhere with no success. plus.png is located in /lib/images/ where the default icon is also found.
Looking at the API for GeoJson here, there is no such option when creating a L.GeoJson layer for icon. I believe you may be looking for the style option, for polylines and polygons, or the pointToLayer option for specifying icons.
The sample GeoJson page on Leaflet's website shows this scenario. Look at the icon with the baseball player.
The icon is defined in this way:
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
The icon is applied to the L.geoJson layer through the pointToLayer option, which specifies a function; like this:
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
}
})
This function will be called for each GeoJSON point. The function will return an L.Marker that uses your specified icon.
So, to answer your question: Your code block that creates your Layer should look like this:
var points = L.geoJson(labels, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: crossIcon });
}
});
Rather than adding it as geojson layer you can add it as a marker
var crossIcon = L.icon({
iconUrl: 'plus.png',
shadowUrl: 'marker-shadow.png',
iconSize: [11, 11],
shadowSize: [11, 11],
iconAnchor: [6, 6],
shadowAnchor: [5, 5],
popupAnchor: [5, 5]
});
L.marker(icon:crossIcon);