I know I'm missing something, but can't find what.
The following code successfully sets the map and places the pins, but I can't get the popups to pop.
Any ideas on what I'm missing?
Thank you
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Test Map',
minZoom: 4,
maxZoom: 4
})
.addTo(map);
$.each(JSON.parse(data), function(idx, obj) {
console.log([obj['lat'], obj['lng']]);
var marker = L.marker([obj['lat'], obj['lng']])
.addTo(map)
.bindPopup('test');
});
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 have a Leaflet map with a control with openstreetmap and googlemap, when I load my page I see a openstreetmap for a istance and then swich to googlemap but I want to show openstreetmap for default.
this is my code:
<script>
var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
var googleMap = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var map = L.map('map', {
center: [43.44084,11.8602],
zoom: 13,
layers: [openStreetMap, googleMap]
});
var baseMaps = {
'openStreetMap': openStreetMap,
'googleMap': googleMap
};
L.control.layers(baseMaps).addTo(map);
map.spin(true);
$.getJSON("http://localhost/fit-file-analysis-2/geojson.php",function(data){
L.geoJson(data).addTo(map);
map.spin(false);
});
You add an object of baseMaps to your map but you didn’t affect a tile layer.
Like #IvanSanchez says, you must add the tile layer to your map:
openStreetMap.addTo(map);
I'm working on a map with a few circleMarkers. When a user is clickin on one of this circleMarker, I would like to center the map on this circleMarker and to zoom in. It works when I try this on multipolygon layers, but I didn't succeed on circleMarkers. Does anyone can help me?
Here is the code for my circleMarkers:
<script>
var map = L.map('map', {
center: [41.8, 12.5],
zoom: 5,
zoomControl:true, maxZoom:15, minZoom:4,
});
var feature_group = new L.featureGroup([]);
var raster_group = new L.LayerGroup([]);
var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri',
});
basemap.addTo(map);
function style1(feature) {
return {
weight: 2,
radius: 10,
opacity: 1,
color: 'black',
weight: 1,
fillOpacity: 1,
fillColor: 'red'
};
}
L.geoJson(villes, {
style: style1,
pointToLayer: function (feature, latlng)
{
return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true });
}
}
)
.addTo(map)
.showLabel;
</script>.
Here is a link to the complete map.
Thank you.
This can be achieved really simply.
Let's assume marker points to your leaflet marker and map to your leaflet map.
Quick way (recommended)
marker.on("click", function(event) {
map.setView(marker.getLatLng(), 16);
}, marker);
Here, I don't even compute the needed zoom level, because I assume leaflet will have to zoom to its max level anyway.
I could also have added my marker to a L.LayerGroup, even if the main point of a LayerGroup is to group multiple markers.
Anyhow, the more precise way
marker.on("click", function(event) {
map.setView(marker.getLatLng(), map.getBoundsZoom(layerGroup.getBounds());
}, marker);
Note that the quick way will do it nicely too. The second solution might seem more precise but it also slower, and implies a use of LayerGroup which is not the way it has been designed to work (create a new layergroup for each marker).
Don't forget to take yout time reading the docs, it's well-designed and pretty easy to understand.
I find the solution:
function onClick(e) {map.setView(this.getLatLng(),15);}
L.geoJson(villes, {
style: style1,
pointToLayer: function (feature, latlng)
{
return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick);
}
}
)
.addTo(zoom1)
.showLabel;
Thanks Stranded Kid for your help.
I have a leaflet map that I will with this:
$('#map').height($(window).height()-64+'px');
var map = L.map('map' , { zoomControl:false }).setView([51.505, -0.09], 13);
new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
This gives a greyscale kinda boring map. I am trying to get a more colorful one for open street view like the one in the below link of you click on the layers and click "streets"
http://leafletjs.com/examples/layers-control-example.html
If you want to have a colored OSM map, change your L.tileLayer function with this
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
});
Here is a complete list of various basemap providers for leaflet.
Check this link as well
this is a part of my leaflet code :
// Init
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [test, boutiques]
});
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// overlays
var overlays = {
"Test": test,
"Boutiques": boutiques
};
L.control.layers(overlays).addTo(map);
I want that a overlay can be displayed one by one (via radio button), the problem is that at loading the "boutiques" overlay is selected but "test" is also displayed.. How to put "test" hidden by default ?
Just initialize map without test:
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [boutiques]
});
JSFiddle example.