I downloaded the dist dir from leaflet at Girhub
made a site on IIS so that I can reference it but I can not even follow the examples on the demo page.
I'm using asp.net to build my site and have the following in my ASPX page:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<link rel="stylesheet" href="localhost/leaflet.label.css" />
<link rel="stylesheet" href="localhost/MarkerClusters/dist/MarkerCluster.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="localhost/MarkerClusters/dist/leaflet.markercluster-src.js"></script>
<script type="text/javascript">
var map = L.map('map',
{
crs: L.CRS.EPSG4326,
maxBounds: new L.LatLngBounds([-312, -180], [180, 312])
}).setView([0, 0], 0);
var myIcon = L.icon({
iconUrl: 'http://localhost/CustomIcons/Blue.png',
iconSize: [20, 20],
shadowSize: [50, 64],
iconAnchor: [10, 10],
shadowAnchor: [4, 62],
popupAnchor: [0, 0] });
Then this is the part I can't get:
var myMarkerCluster = L.markerClusterGroup({maxClusterRadius: 120});
//try to add markers
var testmarker1 = L.marker(new L.LatLng(0, 0), { icon: myIcon, draggable: false });
var testmarker2 = L.marker(new L.LatLng(10, 10), { icon: myIcon, draggable: false });
myMarkerCluster.addLayer(testmarker1);
myMarkerCluster.addLayer(testmarker2);
map.addLayer(myMarkerCluster);
Now, the odd thing I noticed is that before I added code for the clusters, I was able to right click on the map and get a leaflet pop up with the lat,lon. I have not removed that functionality in code but now, with the cluster code addition, if I right click, then I get a regular browser context menu. I don't understand what's going on and would like to know what's missing from the marker clustering that I'm trying to accomplish. Please advise....
Don't think there is one by default, you need to add context menu to leaflet, try this
http://leafletjs.com/plugins.html
https://github.com/aratcliffe/Leaflet.contextmenu
Related
I'm trying to make my point marker have a picture icon, but for some reason, it's showing up on my map like this:
I've looked at the documentation on leaflet's website and what not but have had no luck. It's probably something pretty simple that I'm missing or brain farting on haha. Any help is much appreciated. Let me know what other code you might need to address the problem. TIA!
Here's my script
<script>
//create variable to hold the map element, give initial settings to map
var map = L.map("map", {
center: [38.1, -98.583333],
zoom: 4,
});
//add OSM tile layer to map element
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
{
attribution:
'© OpenStreetMap contributors © CARTO',
subdomains: "abcd",
maxZoom: 19,
}
).addTo(map);
var logo = L.icon({
iconUrl: "imgs/patrickLogo.png",
iconSize: [20, 20],
});
L.marker([40.308746567390294, -105.08229135535235], { icon: logo })
.addTo(map)
.bindPopup("Berthoud, CO");
</script>
UPDATE: It's a 404 error. What does that mean and how can I fix it?
RESOLVED: changed my image path to an absolute path and it worked! Thanks, y'all.
var logo = L.icon({
iconUrl:
"https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
iconSize: [20, 20],
});
I have managed to get a working map and I have managed to combine it with the Leaflet timedimension slider. The next thing I have to do is get a moving marker on the map that changes position depending on a scripted path, for example the marker on date X is on some specific coordinates, but on date Y the marker moves towards different scripted position.
I have so far managed to get a marker on the map but I am at loss what I have to do to make it move. I looked at the various examples of posted here and the example that seems to be the closest to what I need to achieve is this one, but the code points towards and external .xml file, which I don't know how I have to code it to work and the example code doesn't show what variables does the marker itself have in the .html file.
My question is, is it even possible to get a marker moving using this "timeDimension" slider and if it is, could someone point me towards some example code I could look at?
And a bit unrelated, is my current set up the best thing to use if I want to have a map with a timeline slider that moves around lots of markers over a span of couple of years?
Here is the code I have so far,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<link rel="stylesheet" href="leaflet.timedimension.control.css" />
<style>#map { height: 500px; }</style>
</head>
<body>
<p style="text-align: center;"><strong><span style="font-size: 20px;">Heading test</span></strong></p>
<!--Map with needed map scripts-->
<div id="map" style="height: 75%; width: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.
<script type="text/javascript" src="SliderScript.js"></script> //This is the Leaflet slider, just renamed
<!--Here is a script for map overlay -->
<!--Markers-->
<script>
var Icontest= L.icon({
iconUrl: 'icons/testicon1.png',
iconSize: [40, 25], // size of the icon
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
});
L.marker([29, 57], {icon: Icontest},{draggable: true}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
</script>
</body>
</html>
This is the SliderScript.js, which is the same thing as the example.js file on this site.
// example.js
var map = L.map('map', {
zoom: 10,
center: [38.705, 1.15],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2014-09-30/2014-10-30",
period: "PT1H"
},
timeDimensionControl: true,
});
var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
layers: 'sea_water_velocity',
format: 'image/png',
transparent: true,
attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
// example.js
var map = L.map('map', {
zoom: 10,
center: [38.705, 1.15],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2014-09-30/2014-10-30",
period: "PT1H"
},
timeDimensionControl: true,
});
var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
layers: 'sea_water_velocity',
format: 'image/png',
transparent: true,
attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
<html>
<head>
<title>Leaflet TimeDimension Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
</head>
<body>
<div id="map" style="height: 100%; width: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script type="text/javascript" src="example.js"></script>
<!--Markers-->
<script>
var Icontest = L.icon({
iconUrl: 'icons/testicon1.png',
iconSize: [40, 25], // size of the icon
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
});
L.marker([29, 57], {
icon: Icontest
}, {
draggable: true
}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
</script>
</body>
</html>
I want the marker to be in the center of the map, but it is wrong.
I read the rest of the articles, but my problem was not solved.
var map = L.map('map').setView([lat, lng], 18);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk', {
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk',
attribution: 'nemajoo',
watch: true
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [28, 60],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'images/mrk.png'});
var center = map.getCenter();
var marker = L.marker([center.lat, center.lng],{icon: greenIcon}).addTo(map);
The problem here could be in any of the 3 configurations given we don't have the image:
mrk.png has some spacing inside the image, this can be fixed with any image editing tool.
the options object, on the anchor tag moves the image, making it look like it's not centered.
When you set the center, as far as I can see, you first get the center from the map, then use this center to position the icon, this is nicely done but markers with distant zooming don't represent it's center accurately.
In resume:
The problem is on the png or the anchor configuration, modify those values and try again.
If this does not work you can upload a sample minimal project so we can check (don't upload api keys or similar)
I'm trying to change the default marker for one of my KML layers. I'm using leaflet-omnivore for this.
This is the code I already have. The markers are not changing to the image and the layer control is only displaying the text, even though the img bit is in the code.
Marker Code:
var redIcon = L.icon({
iconUrl: 'icon.png',
iconSize: [20, 24],
iconAnchor: [12, 55],
popupAnchor: [-3, -76]
});
var nissanLayer = omnivore.kml('icons.kml')
.on('ready', function() {
map.fitBounds(customLayer.getBounds());
//change the icons for each point on the map
// After the 'ready' event fires, the GeoJSON contents are accessible
// and you can iterate through layers to bind custom popups.
customLayer.eachLayer(function(layer) {
// See the `.bindPopup` documentation for full details. This
// dataset has a property called `name`: your dataset might not,
// so inspect it and customize to taste.
layer.icon
layer.bindPopup('<img src="icon.png" height="24"><br><h3>'+layer.feature.properties.name+'</h3>');
});
})
.addTo(map);
var marker = new L.Marker(customLayer, {icon:redIcon});
map.addLayer(marker);
You seem to have overlooked the setIcon() method of L.Marker. I'd also check that a L.Layer is in fact a L.Marker before calling any L.Marker functionality, just for code sanity. e.g.:
var redIcon = L.icon({ /* ... */ });
var omnivoreLayer = omnivore.kml('icons.kml')
.on('ready', function() {
omnivoreLayer.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
layer.setIcon(redIcon);
}
});
})
.addTo(map);
However, the Leaflet-Omnivore documentation says that the better way to apply custom styling to an Omnivore layer is to create a L.GeoJSON instance with the desired filters and styling, and then pass that to the Omnivore factory method. I suggest you read the Leaflet tutorial on GeoJSON to become familiar with this.
So instead of relying on a on('ready') event handler (which would change the markers after they are created), this would save a tiny bit of time by creating the markers directly with the desired style:
var omnivoreStyleHelper = L.geoJSON(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: redIcon});
}
});
var omnivoreLayer = omnivore.kml('icons.kml', null, omnivoreStyleHelper);
I haven't used leaflet that much but I did a small project where I set the icons to an image.
var redIcon = L.icon({
iconUrl: 'red-x.png',
iconSize: [25, 25], // size of the icon
iconAnchor: [12, 55], // point of the icon which will correspond to
marker's location
popupAnchor: [-3, -76] // point from which the popup should open
relative to the iconAnchor
});
var marker = new L.Marker(markerLocation, {icon:redIcon});
mymap.addLayer(marker);
Not sure how helpful this is really.
Links got a guide to follow which might be more use https://leafletjs.com/examples/custom-icons/
I use Leaflet to draw an OpenStreetMap and attach it with a custom icon marker
var mymap = L.map('mapid').setView([x, y], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: ID,
accessToken: accessToken
}).addTo(mymap);
var busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
// shadowUrl: 'images/leaflet/marker-shadow.png',
iconSize: [12, 12],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
// shadowSize: [41, 41]
});
var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);
mymap.on('zoomed', function() {
var currentZoom = mymap.getZoom();
busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
iconSize: [mymap.getZoom*2, mymap.getZoom*2],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
});
marker.setIcon(busIcon);
});
Now I want to resize my marker icon depending on zoom level. There's something wrong in my above code. What should I do? If marker is a CircleMaker, there is a setRadius function for me to handle this with ease. But in this case the marker is a custom icon, I tried as above and failed. How to fix it?
As YaFred said, there were some typos like zoomend, but also mymap.getZoom that should be mymap.getZoom()
I made a new answer to this old question to propose a more efficient solution. You can add a className to your icons (see leaflet documentation).
This means we can edit the height and width of the icon through css! In your zoomend function, instead of creating a new icon, simply call this JQuery:
var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});
For larger amounts of markers, this will significantly improve your performance as mentioned in this stackoverflow question:
Leaflet custom icon resize on zoom. Performance icon vs divicon
You have a typo: zoomed should be zoomend
map.on('zoomend', function() {
});
http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview
Apart from that, I would create and keep the icons out of the zoomend callback.
As it is, your code is creating an icon each time zoom is changing.