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);
Related
I want to get a popup marker(by image) on my map every time I double click on the screen. Every time I try to copy other's code, it won't work. Can someone help plz?THE MARKER NEEDS TO BE AN IMAGE!
I try to copy other's code, but it won't work. I'm still new in this line of work, so I don't know really how to do it on my own.
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
map.on('dblclick',(e)=>{
L.marker(e.latlng).addTo(map).bindPopup('Hello World').openPopup()
})
Demo: https://plnkr.co/edit/u7QL15wYzLprVwhP
Custom icons: https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 95], // size of the icon
iconAnchor: [22, 94],
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
I'm trying to scrape together some code to show multiple layers of data on a leaflet map using GeoJSON. This is mostly working, however some of the data is for the exact same lat long position and when it displays in Leaflet it just shows a single marker. All of the others are buried beneath it and are inaccessible.
I then added in the MarkerCluster plugin, which spiderfied the markers, but they were all identical. Thinking this was a limitation with the basic MarkerCluster plugin, I went for the Spiderfier Clusterer and that does exactly the same thing.
The code I'm using did work with the Spiderfier Clusterer when I was just using L.marker to create the points. Now that I've switched to L.GeoJSON it seems to have stopped.
Can someone tell me what I'm doing wrong and why all of the markers in the Cluster are the same?
var oms = new OverlappingMarkerSpiderfier(timemap);
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(geojsonFeature.geometry.coordinates);
timemap.openPopup(popup);
});
function getMapInfo(thisLayer, startyear, endyear)
{
layerGroups["layerGroup" + thisLayer] = L.layerGroup();
var clusters = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
maxClusterRadius: 0
});
$.getJSON("geojson.php?layer="+thisLayer+"&startyear="+startyear+"&endyear="+endyear, function (geoJSONFeature)
{
iconGroup["icon"+thisLayer]= new L.Icon({
iconUrl: "css/images/"+geoJSONFeature.features[0].properties.icon,
shadowUrl: "css/images/shadow.png",
iconSize: [32, 37],
shadowSize: [51, 37],
shadowAnchor: [10, 37],
iconAnchor: [10, 40],
popupAnchor: [5, -20]
});
var location = new L.geoJSON(geoJSONFeature, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: iconGroup["icon"+thisLayer]});
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+geoJSONFeature.features[0].properties.item+'</h1><p>'+geoJSONFeature.features[0].properties.shortdesc+'</p>');
layer.bindTooltip(geoJSONFeature.features[0].properties.item);
oms.addMarker(layer);
}
}).addTo(layerGroups["layerGroup" + thisLayer]);
timemap.addLayer(layerGroups["layerGroup" + thisLayer]);
});
}
i was use leaflet.js to draw about 10000 icon markers,because it is icon marker,so i cannot use circleMarker. I find a leaflet plugin Leaflet.Canvas-Markers,it can help me draw 10000 icon markers fast, but this plugin caused the click event to fail.
This is my code
var ciLayer = L.canvasIconLayer({}).addTo(leafletMap)
var icon = L.icon({
iconUrl: 'StructWell.png',
iconSize: [20, 18],
iconAnchor: [10, 9]
});
function markerClickHandler (e) {
console.log(e)
console.log()
}
let markers = []
SiteList.results.forEach((site, i) => {
var marker = L.marker([site.latitude, site.longitude], {icon: icon, title: JSON.stringify(site)})
marker.on('click', markerClickHandler)
// ciLayer.addMarker(marker)
markers.push(marker);
})
ciLayer.addLayers(markers);
function markerClickHandler do not work when i click the marker.
was I do some bug,or are there any more solutions. The key is large number of icon markers with click event.
thanks
Listener should be added like below:
ciLayer.addOnClickListener(function (e,data) {
console.log(data)
});
var map = L.map('map').setView([59.9578,30.2987], 10);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
preferCanvas: true
}).addTo(map);
var ciLayer = L.canvasIconLayer({}).addTo(map);
ciLayer.addOnClickListener(function (e,data) {
console.log(data[0].data.mydata)
});
var icon = L.icon({
iconUrl: 'https://img.icons8.com/metro/26/000000/marker.png',
iconSize: [20, 18],
iconAnchor: [10, 9]
});
var markers = [];
for (var i = 0; i < 10000; i++) {
var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + Math.random()*3.6], {icon: icon}).bindPopup("I Am "+i);
marker.mydata="I Am "+i
markers.push(marker);
}
ciLayer.addLayers(markers);
.map{
width: 100%;
height: 100px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-canvas-marker#0.2.0"></script>
<div class="map" id="map"></div>
You can check examples provided by Leaflet.Canvas-Markers.
Hope this will helps you.
I am trying to visualize a Leaflet Marker based on a json file stored in gist. So far, I do not manage, since my web map (http://geo.uzh.ch/~gboo/netap/netap.html) shows the base map only and not the marker.
When I inspect the webpage in Firefox, it gives me this error:
TypeError: undefined is not a function (near '...}).addTo(map);...')
Here the code snipet:
$(document).ready(function() {
var map = L.map('map', {
center: [46.798333, 8.231944],
zoom: 8,
minZoom: 9,
maxZoom: 16,
zoomControl:true
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap'
}).addTo(map)
$.getJSON("https://gist.githubusercontent.com/netapschweiz/13d37c1ee99e2c052246/raw/f64297e6bc783c1af5844921012116703fd37e0d/map.geojson", {
pointToLayer: function(feature, latlng) {
var smallIcon = L.icon({
iconSize: [27, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: 'www.geo.uzh.ch/~gboo/netap/img/catMarker.png'
});
return L.marker(latlng, smallIcon);
}
}).addTo(map);
});
Could someone help me? Many thanks!
It looks like the core of your confusion is thinking that $.getJSON has some relationship to L.geoJson. It doesn't: $.getJSON is a jQuery function that fetches data, L.geoJson is a Leaflet function that puts data on the map. To fix this code, you'll need to read the jQuery docs for $.getJSON (that explain that you need to supply a callback as the second argument) and the Leaflet docs for L.geoJson (that explain that you need to supply data as the first argument).
That's the way to go:
var geojsonMarkerOptions = L.icon({
iconUrl: 'http://',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
$.getJSON('http://', function(data) {
L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: geojsonMarkerOptions})
}})
}).addTo(map);
I have geojson layer like this:
var icon_mfc = L.icon({
iconUrl: 'icons/mfc_h32.png',
iconAnchor: [11, 32]
});
var mfc_layer = L.geoJson(mfc,{
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: icon_mfc}).bindPopup(feature.properties.name);
}
});
i want find marker and i want fitbound and open popup on this marker, i know(for example) attribute marker "feature.properties.name".
Use the .eachLayer method to iterate through layers, and write your JavaScript logic inside of it.