Scripts run on locationfound but not on locationerror.
locationerror is true when the user don't accept to share his position, wright?
If the user give his agreement, alert('ok') is done.
If he don't give his agreement, alert('error') is not done.
Someone's knows why?
var map = L.map('map')
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map);
map.locate({setView: true, maxZoom: 10});
map.on('locationfound', function() {
alert('ok');
});
map.on('locationerror', function() {
alert('error');
map.setView(45.0681298, 7.6059589, 10);
});
Related
I am using Geoserver to host my mbtiles file on EC2. I am trying to open this file in Leaflet but it don't understand how I should set the url.
L.tileLayer('http://ec2-35-180-202-91.eu-west-3.compute.amazonaws.com:8080/geoserver/nurc/wms?service=WMS&version=1.1.0&request=GetMap&layers=nurc%3Afichierdeformesdesvoiesdureseauferrenational', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap'
})
.addTo(map);
Any clue?
Based on comments, here is a solution that worked. Thank you for the comments.
var mapboxurl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.XXXXX';
var mapboxattributes = 'Map data © OpenStreetMap contributors, ' + 'Imagery © Mapbox';
var voiesferrees = L.tileLayer.wms("http://ec2-35-180-202-91.eu-west-3.compute.amazonaws.com:8080/geoserver/nurc/wms?", {
layers: "nurc:fichierdeformesdesvoiesdureseauferrenational",
format: "image/png",
transparent: true,
attribution: mapboxattributes,
});
i'm looking for import GPX file inside my Leaflet map
but when i try the site it respond with L.GPX is not a constructor
i only have that in my head
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
and that inside body
<div id="map"></div>
<script>
var sites = {!! json_encode($markers) !!};
var map = L.map('map').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}#2x.png?key=2Qw6dd02HLfOXS3LDGMP', {
attribution: '© MapTiler © OpenStreetMap contributors'
}).addTo(map);
var marker;
sites.forEach(element => {
marker = L.marker([element[0], element[1]]).addTo(map);
});
var gpx = '/resources/gpx/pont.gpx'; // URL to your GPX file or the GPX itself
new L.GPX(gpx, {
async: true,
polyline_options: {
color: '#ff0000',
}
}
).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
</script>
You have to load the plugin before you can use it:
Usage
First, include the Leaflet.js and Leaflet-GPX scripts in your HTML
page:
As described, add the following line, in your header or before your script
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
I'm working with ngx-leaflet. By default the map shows the zoom controls on the top left. However I cannot find how the positioning of this can be changed.
Here is an outdated method:
options = {
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
zoom: 5,
zoomControl: false,
center: L.latLng(46.879966, -121.726909)
};
mapReady(map: L.Map) {
map.addControl(L.control.zoom({ position: 'bottomright' }));
}
.
<div class="leaflet-container grow z-0" leaflet [leafletZoom]="leafletZoom" [leafletCenter]="leafletCenter" (leafletMapReady)="($event)">
<div [leafletLayer]="tileLayer"></div>
<div *ngFor="let marker of markerLayers " [leafletLayer]="marker"></div>
</div>
source
Is there an updated way to do this with the latest version of ngx-leaflet (3.0)?
Here's a screenshot that shows that there isn't a zoom method on the control object:
Since you're using direct imports, you want to do the following:
import { control, Map, latLng, tileLayer } from 'leaflet';
options = {
layers: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
zoom: 5,
zoomControl: false,
center: latLng(46.879966, -121.726909)
};
mapReady(map: Map) {
map.addControl(control.zoom({ position: 'bottomright' }));
}
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})