I am creating a map with leaflet, but the text of the popup appear fuzzied. ( Windows 7 Enterprise / Leaflet 0.7.7 / Google Chrome Version 51.0.2704.79 m)
<script>
var mymap = L.map('mapid', {
center: [42.9050205, 1.8760075],
zoom: 9
});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFsfdNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution:
'museodelprado © www.museodelprado.es',
id: 'mapbox.streets'
}).addTo(mymap);
var MuseosIcon = L.Icon.extend({
options: {
shadowUrl: L.Icon.Default.imagePath + '/marker-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new MuseosIcon({iconUrl: L.Icon.Default.imagePath + '/marker-icon-2x-green.png'}),
redIcon = new MuseosIcon({iconUrl: L.Icon.Default.imagePath + '/marker-icon-2x-red.png'}),
blueIcon = new MuseosIcon({iconUrl: L.Icon.Default.imagePath + '/marker-icon-2x-blue.png'}),
yellowIcon = new MuseosIcon({iconUrl: L.Icon.Default.imagePath + '/marker-icon-2x-yellow.png'});
L.marker([42.13675,1.93143],{icon: blueIcon,title: 'MAQ. 1'}).addTo(mymap)
.bindPopup( "The Museo del Prado is the main Spanish national art museum, located in central Madrid. <br> It features one of the world's finest collections of European art, <br> dating from the 12th century to the early 19th century, <br> based on the former Spanish Royal Collection").openPopup();
var popup = L.popup();
</script>
my browser zoom was not at 100% (press Ctrl+zero)
Related
I’m wondering if anyone can help me.
I’m pretty new to coding and i’m trying to implement leaflets marker cluster into my site, however nothing is showing up when I add the usage from GitHub.
var BPalace = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker1 = L.marker([51.5015385807725, -0.14176521957406812], {
icon: BPalace
}).bindPopup('Buckingham Palace');
var BatterseaPark = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker2 = L.marker([51.478988287721876, -0.15648732182296068], {
icon: BatterseaPark
}).bindPopup('Battersea Park');
var wembley = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker3 = L.marker([51.55619811605852, -0.2794567696109353], {
icon: wembley
}).bindPopup('Wembley Stadium');
var bAirport = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker4 = L.marker([52.452333381857784, -1.7435316209846132], {
icon: bAirport
}).bindPopup('Birmingham Airport');
L.featureGroup([marker1, marker2, marker3, marker4])
.addTo(mymap);
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(marker1(map)));
map.addLayer(markers).addTo(mymap);
Is there something I’m doing wrong? I have added the relevant files to my html page, but when i refresh nothing seems to happen.
Any help will be much appreciated.
Thank you
Your attempt was correct but the code not, change it to:
var markers = L.markerClusterGroup();
marker1.addTo(markers);
marker2.addTo(markers);
marker3.addTo(markers);
marker4.addTo(markers);
markers.addTo(mymap);
And remove:
L.featureGroup([marker1, marker2, marker3, marker4])
.addTo(mymap);
I am using Leaflet Routing Machine to create map route.
My requirement is, if there are multiple locations like A, B, C, D, E. I am getting the length of svg path from A to E. But i need length form A to B, B to C, C to D, D to E. Please help someone.
click to see image
Red color line is svg path. So, when i click on any marker then i need length from basel to that marker. i mean, i need to get length from basel to neuchatel or basel to bern or neuchatel to bern, etc.
var routeControl = L.Routing.control({
waypoints: waypoints,
reverseWaypoints: false,
lineOptions: {
styles: [{color: 'red', opacity: 1, weight: 3}]
},
geocoder: L.Control.Geocoder.nominatim({
serviceUrl: 'http://localhost:8084/'
}),
createMarker: function(i, wp, nWps) {
console.log(wp)
let custom_icon = L.divIcon({
iconSize: [100, 20],
popupAnchor: [-30, -18],
shadowUrl: '',
html: '<div class="notification '+wp.name+'" data-pathid="'+(i+1)+'" style="color: #000;background-color: transparent;"><img src="img/blue.png"><span class="city-name">' + latlng[i].name + '</span></div>'
})
marker = L.marker(
[wp.latLng.lat, wp.latLng.lng],
{
icon: custom_icon
})
.bindPopup(latlng[i].name)
.openPopup()
.addTo(map);
// marker.on('click', onMarkerClick);
}
}).addTo(map);
I've got custom icons working in my Leaflet map just fine when I run gatsby develop locally, but when I try to build I get an error related to my custom marker icon:
WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor
Related imports:
import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker'
Create custom icon:
// Init custom map icon
const mapIcon = MapIcon();
const markerIcon = new Icon({
iconUrl: mapIcon,
iconSize: [36, 36],
iconAnchor: [18, 18],
shadowSize: [36, 36],
shadowUrl: 'https://unpkg.com/leaflet#1.5.1/dist/images/marker-shadow.png',
shadowAnchor: [10, 18],
popupAnchor: [0, -16],
tooltipAnchor: [13, -4]
});
JSX:
{ markerData.length > 0 ? markerData.map((node, index) => (
<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={markerIcon}>
<Popup className="leaflet-popup" onOpen={(el) => openPopup(el)}>
<h5 className="popup-location-title">{node.location_title}</h5>
<h6 className="popup-address">{node.address}</h6>
<div className="popup-description" dangerouslySetInnerHTML={{ __html: node.description }}></div>
{!!node.embed ?
<div className="popup-embed">
<Embed url={node.embed} className="popup-media-embed" />
</div>
: null}
</Popup>
<Tooltip className="leaflet-tooltip">
<span className="title">{node.location_title}</span>
<span className="address">{node.address}</span>
</Tooltip>
</Marker>
)) : null }
I've tried all the solutions listed here: https://github.com/Leaflet/Leaflet.markercluster/issues/874. I've also looked at several similar questions. Nothing seems to help. For instance, I also tried importing leaflet like so import * as L from "leaflet" and like so import L from "leaflet". And then creating the new icon like so const markerIcon = L.Icon({, like so const markerIcon = L.icon({, like so const markerIcon = new L.Icon({, and like so const markerIcon = new L.icon({. I can console.log(L), but none of these works.
I would love some assistance.
Got it to build. I had to wrap the icon construction in a check for the window obj:
// Init custom map icon
if (typeof window !== 'undefined') {
const mapIcon = MapIcon();
markerIcon = new Icon({
iconUrl: mapIcon,
iconSize: [36, 36],
iconAnchor: [18, 18],
shadowSize: [36, 36],
shadowUrl: 'https://unpkg.com/leaflet#1.5.1/dist/images/marker-shadow.png',
shadowAnchor: [10, 18],
popupAnchor: [0, -16],
tooltipAnchor: [13, -4]
});
}
And again when passing the icon to the marker:
<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={(!!markerIcon) ? markerIcon : null}>
So I start using leaflet on my site, and I manage to make a search in which with the name of my items, I could show them. the problem is that I need to display information on click, but my markers aren't clickable.
here is my component:
<template>
<div id="mapid" style="width: 600px; height: 400px"></div>
</template>
<script>
var swal = require('sweetalert');
var config = require('../../config.js');
var Vue = require('vue');
name: 'mapOrganization',
data: function(){
return {
L : {},
}
},
ready: function(){
var L = require('../../lib/leaflet/leaflet.js')
L.Icon.Default.imagePath = '../../lib/leaflet/images';
this.initMap();
}
methods: {
initMap: function(organizations) {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("dasd" + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
}
}
I have try with the Option {clickable: true}, still not working. I'm using the simple example leaflet give on start.
I am using Leaflet in my application and I need to zoom more than 18 levels (19 or 20 will be enough I think). But when I zoom more than 18 levels, the map image disappears leaving only a grey plane.
Here is the html:
<div id="map"></div>
Here is the js:
var options = {
maxZoom: 19,
minZoom: 18
};
$timeout(function() {
$scope.map = L.map('map', options).setView([38.62276209666611, 34.70849695797369], 18);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© Example'
}).addTo($scope.map);
$scope.map.dragging.disable();
});
I already tried these:
map.options.minZoom = 18;
map.options.maxZoom = 19;
And maxNativeZoom.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© Example',
maxNativeZoom:19,
maxZoom:25
}).addTo($scope.map);
maxNativeZoom is an option of L.TileLayer, not an option of L.Map. This is properly documented in the Leaflet reference.
See a working example.
Also set maxZoom to tileLayer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© Example',
maxZoom: 20
}).addTo($scope.map);
here is a Mapbox configuration, I found that the perfect zoom settings for me are "maxNativeZoom" : 19, "maxZoom": 20, you can increase the maxZoom value, but you can't increase "maxNativeZoom" value above 19 because it will show gray tiles
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Mapbox", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 20, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false})