I'm trying to reproduce Foursquare's web user interface.
What I noticed is that on the tip map, the markers are load way before the map was loaded.
is this possible with leaflet ?
With this piece of code, I don't think it's possible
L.marker([lat, lng], {icon: iconMarker}).addTo(map);
How are they doing it?
I think I know how:
They're loading the Tiles after positioning the markers, something like :
markers = L.marker([lat, lng], {icon: iconMarker}).addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v4/MapID/{z}/{x}/{y}.png?access_token=Token').addTo(map);
Ofcourse, just as long as the Leaflet library is loaded, you can create markers, layers, polygons, whatever. There doesn't have to be an instance of L.Map to do this.
// Define marker first
var marker = L.marker([0,0]);
// Define map later
var map = L.map('map', {
'center': [0, 0],
'zoom': 1,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
// Add afterwards
marker.addTo(map);
Working example on Plunker: http://plnkr.co/edit/0zaogf?p=preview
Or include the marker when defining the map:
// Define marker first
var marker = L.marker([0,0]);
// Define map later include marker
var map = L.map('map', {
'center': [0, 0],
'zoom': 1,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
}),
marker
]
});
Related
So I have been trying to place BoatMarker or WindBarbs to a leaflet map but when I put this code in, it returns a blank map. If I remove these variables the map will suddenly show up. I have no idea why this does not work, as there arent any errors or messages that pop up. I've put my code below, mostly taken from Awesome Panel example (https://awesome-panel.org/reactive_leaflet):
import panel as pn
class LeafletMap(pn.reactive.ReactiveHTML):
_template = """<div id="mapid" style="height:100%"></div>"""
__css__ = ["https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"]
__javascript__ = ["https://unpkg.com/leaflet#1.7.1/dist/leaflet.js", "https://unpkg.com/leaflet.boatmarker/leaflet.boatmarker.min.js"]
_scripts = {
"render": """
var mymap = L.map(mapid).setView([50, 0], 6);
state.map=mymap
var tileLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFyY3Nrb3ZtYWRzZW4iLCJhIjoiY2s1anMzcG5rMDYzazNvcm10NTFybTE4cSJ9.TV1XBgaMfR-iTLvAXM_Iew'
}).addTo(mymap)
var marker1 = L.marker([48, -2], name='marker1');
var marker2 = L.marker([50, 0], name='marker2');
var marker3 = L.marker([52, 2], name='marker3');
var boatmarker = L.boatMarker([48, -2], name='marker4');
var layer1 = L.layerGroup([marker1, marker2, marker3, boatmarker]);
layer1.addTo(mymap)
""",
# Need to resize leaflet map to size of outer container
"after_layout": """
state.map.invalidateSize();console.log("invalidated");
""",
}
leaflet_map = LeafletMap(min_height=700, sizing_mode="stretch_both")
pn.Row(leaflet_map, sizing_mode="stretch_both").servable()
I've tried the same method for other leaflet custom markers and markings, like wind barbs (https://github.com/spatialsparks/Leaflet.windbarb/blob/master/README.md). The same issue also occurs.
I have a map with different markers. The markers could be selected from the control panel. But, I would like to show the preview of the markers, when we hover over the marker tab in control panel.
If possilbe, the hover effect similar to the following jQuery example
Can anyone help me how this could be acheived? Following is the code:
// Map intialization
var map = L.map('map').setView([51.505, -0.09], 12.5);
// OSM layer
var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// OSM HOT
var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
});
var singleMarker = L.marker([51.505, -0.09]);
// Layer controller
var baseMaps = {
"OpenStreetMap": OSM,
"OSM HOT": OpenStreetMap_HOT
};
var overlayMaps = {
"Marker": singleMarker
};
var layerControl = L.control.layers(baseMaps, overlayMaps, {
collapsed: false,}).addTo(map);
JSFiddle Example
Can you something like grabbing the event of the marker? Like so:
$('.leaflet-pane.leaflet-marker-pane').hover(function(){
alert('your code here?');
});
And from there call the tooltip event to show next to the marker?
Referring to the examples in a previous question: Leaflet MarkerCluster with GeoJson
I am trying to use markercluster with leaflet after the geojson data has been loaded, I can see the data is loading along with the markercluster markers from the console but it looks like the final map.addLayer is failing, the browser just seems to hang when it gets to this point.
I am able to load up and display the map points after the geojson is loaded with geojsonAjax.addTo(map); so this part is working.
the leaflet library and plugins are loaded in the following order:
leaflet.js
leaflet.ajax.min.js
leaflet.markercluster.js
// Add basemap tiles and attribution.
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
});
// Create map and set center and zoom.
var map = L.map('map', {
scrollWheelZoom: false,
center: [47.5, 10],
zoom: 5
});
// Add basemap to map.
map.addLayer(OpenStreetMap_Mapnik);
var geojsonAjax = new L.GeoJSON.AJAX("/campaign-results/geojson", {
pointToLayer: function(feature, latlng) {
return new L.marker(latlng);
},
});
//geojsonAjax.addTo(map);
//map.addLayer(geojsonAjax);
//console.log("data loaded:", geojsonAjax);
var markers = L.markerClusterGroup()
//geojson ajax listener
geojsonAjax.on('data:loaded', function () {
// Add the cluster data after the geojson layer has loaded.
markers.addLayer(geojsonAjax);
console.log("add markers:", markers);
map.addLayer(markers);
});
I am trying to use Leaflet in Combination with Custom Tiles to make a fictional Map, but it seems to not be working even when I set the Error Tile URL to a completely different image, it doesn't even show that.
My JS Code looks like this:
axios.get("https://crugg.de/udumap/map1/tiles/tiles.json").then((result) => {
let tilesData = JSON.parse(result.data.replace(/(\/\/)[A-Z a-z,:'()\/.#0-9]*/gm, ""));
console.log(tilesData.center);
let map = L.map('map', {
center: [tilesData.center[0], tilesData.center[1]],
zoom: tilesData.center[2]
}).setView([tilesData.center[0], tilesData.center[1]], tilesData.center[2]);
L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
attribution: 'Map data © UD:RP Map contributors',
minZoom: tilesData.minzoom,
maxZoom: tilesData.maxzoom,
zoomOffset: -1,
bounds: L.latLngBounds(L.latLng(tilesData.bounds[0], tilesData.bounds[1]), L.latLng(tilesData.bounds[2], tilesData.bounds[3])),
errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
}).addTo(map);
});
JSFiddle: https://jsfiddle.net/5xprc6n3/1/
This is my first time using Leaflet and I have no Idea why this isn't working.
You have to remove the bounds property.
L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
attribution: 'Map data © UD:RP Map contributors',
minZoom: tilesData.minzoom,
maxZoom: tilesData.maxzoom,
zoomOffset: -1,
errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
}).addTo(map);
I am trying out Leaflet.js and I have a map with a marker like this:
var marker = new L.marker([5.897818, -1.120009],{
draggable: true,
autoPan: true
}).addTo(mymap);
This is showing ok but I want it to appear on my current location instead of the above hardcoded location.
How do I do this?
What you need is to tap into the Geolocation API and use the results of that to create a marker.
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
navigator.geolocation.getCurrentPosition(position => {
const { coords: { latitude, longitude }} = position;
var marker = new L.marker([latitude, longitude], {
draggable: true,
autoPan: true
}).addTo(mymap);
console.log(marker);
})
There's some issue issue using the API with Stackoverflow, so here's a link to a working JSFiddle.