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 />");
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 am creating a Leaflet Map Widget using Preact and webpack.
I have 3 buttons with a single map. Below images shows what I implemented.
when click one single button, the map will show some locations. Like wise other buttons also have each locations. First I clicked "Cemeteries" button, Its fine. locations are displaying on the map. But after that I click "Funeral Homes" button, still have the "cemeteries" locations also. When I click "crematoria" button, same problem, "cemeteries", "Funeral Homes" and "crematoria" locations are displaying together.
What I want is, when I click a one single button, map will show only the each button's locations and when I click another button, previous clicked button locations need to remove.
In my componentDidMount() I created the map.
this.state.map = createMap('mapid').setView([51.505, -0.09], 13);
let urlll = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?';
this.state.map.addLayer(tileLayer(
urlll,
{attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'MY_MAPBOX_ID',
tileSize: 512,
zoomOffset: -1,
accessToken: 'MY_ACCESS_TOKEN'
})
)
After that I create 3 methods for button click events. This is a one method
handleMapCemeteries (e) {
e.preventDefault();
var locationsdemo = [
["LOCATION_1", 11.8166, 13.0942],
["LOCATION_2", 87.9804, 76.9189],
["LOCATION_3", 10.7202, 45.5621],
["LOCATION_4", 11.3889, 11.6277],
["LOCATION_5", 10.5929, 43.6325]
];
let marketIcon = icon({
iconUrl: markerIcon,
iconRetinaUrl: markerIcon,
iconAnchor: [5, 25],
popupAnchor: [10, -44],
iconSize: [25, 35],
});
for (var i = 0; i < locationsdemo.length; i++) {
markeDemo = marker([locationsdemo[i][1], locationsdemo[i][2]], {
icon: marketIcon,
draggable: true,
title: 'Hover Text',
}).bindPopup(locationsdemo[i][0]).addTo(this.state.map);
}
}
Is anyone know how to remove markers when button click?
Instead of adding the markers to the map (.addTo(this.state.map);) add them to a LayerGroup / FeatureGroup (make sure the group is a global variable and only initialized once):
var fg = L.featureGroup().addTo(this.state.map);
...
marker. ... .addTo(fg);
and then you can remove all markers:
fg.clearLayers();
Hello how can i get shown popups on my marks using Realtime showing the "name" from results.geojson? So that when i click one it says e.g VW and on another one e.g BMW.
var map = L.map('map'),
realtime = L.realtime('results.geojson', {
interval: 3 * 1000,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
'icon': L.icon({
iconUrl: 'car.png',
iconSize: [50, 50], // size of the icon
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
})
});
}
}).addTo(map);
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?
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);