Back to very basics. My leaflet map renders, I can even add a scale but I don't see the marker L.marker([45, 1]).addTo(map);. I suppose I don't need to add a default icon. Any clue?
The (very short) code follows exactly the Quick Start Guide: codesandbox
The 'good' version:
import "leaflet/dist/leaflet.css";
import L from "leaflet";
const map = L.map("map").setView([45, 1], 4);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors'
}).addTo(map);
L.control.scale().addTo(map);
L.marker([45, 1], {icon:
new L.Icon({iconUrl: 'https://unpkg.com/leaflet#1.6.0/dist/images/marker-icon.png'})
}).addTo(map);
<div id="map" style="height:100vh"></div>
The default marker Icon is not found over the leaflet package.
Use:
L.marker([45, 1], {icon:
new L.Icon({iconUrl: 'https://unpkg.com/leaflet#1.6.0/dist/images/marker-icon.png'})
}).addTo(map);
Related
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 have been using leaflet to show map in my website, which is in dark mode, but until recently, I found dark mode in leaflet map stopped working at all,
This is my code,
this.map = L.map('dv-map', {
minZoom: this.props.minZoom,
maxZoom: this.props.maxZoom
}).setView(this.props.center, this.props.initLevel);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
maxZoom: this.props.maxZoom,
id: 'mapbox.dark'
})
.addTo(this.map);
I tested other id, such as mapbox.streets, mapbox.satellite etc., still fine, only dark is not working at all.
Can anybody tell me how to prvoide dark mode for the leaflet map?
Thanks
Did you tried this?
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: '© Mapbox © OpenStreetMap <strong>Improve this map</strong>',
tileSize: 512,
maxZoom: this.props.maxZoom,
zoomOffset: -1,
id: 'mapbox/dark-v10',
accessToken: this.props.mapBoxToken
});
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})
I following code how to draw the polyline along path of the map, know for the point present in the map will just give the straight line how to get along the path of the lanes
<!DOCTYPE html>
<html>
<head>
<title>Rotation example</title>
</head>
<body>
<div style="width:80%; height:80%; position:fixed; border: 1px solid;" id="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>
var lineString = new ol.geom.LineString([
[103.986083, 1.350349],
[103.985097, 1.349067]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: lineString,
name: 'Line'
})]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: [255, 255, 0, 0.5],
width: 10
})
})
});
var view = new ol.View({
center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326','EPSG:3857'),
zoom: 18,
rotation: 68*Math.PI/180
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
lineLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
</script>
</body>
</html>
Is there any direction service provided by openlayer3 please point to sample to accomplish it
If you have coordinates along the lanes you can use MultiLineString instead of LineString.
You need to use a routing service for such action. You may setup your own service or you may use any online available. here you can find a list of free online routers and decide which one best feet to your needs.
Once you get your root polyline out of the selected service you can then decode (if encoded) and draw your line within your ol3 map.
Also cosider, depending on the service you are going to use, that ol3 offers a class for reading and writing data in the Encoded Polyline Algorithm Format which is described here
I am trying to add leaflet maps to my webpage and I am using Mapbox tiles. I am not able to get the map in the basic tutorial to work, all I am seeing is a grey screen. I have a mp id from mapbox and I have added it to my code. Attaching relevant code below.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/rakshak.l937n12c/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);
and this is what I am seeing in the console:
GET http://a.tiles.mapbox.com/v4/rakshak.l937n12c/13/4093/2723.png 401 (Unauthorized)
In the css I have just put the map height to height: 100vh.
All I am seeing on my screen are the map zoom controllers and a grey screen. Am I missing an important step ?
Edit 1: Update JS code:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://api.tiles.mapbox.com/v4/rakshak.l937n12c/{z}/{x}/{y}.{format}?access_token=pk.eyJ1IjoicmFrc2hhayIsImEiOiJ5cHhqeHlRIn0.Vi87VjI1cKbl1lhOn95Lpw', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);
Set up your tileLayer to include your map's id and your user token:
var tileLayer = L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
subdomains: ['a','b','c','d'],
mapId: <YOUR MAPID HERE>,
token: <YOUR TOKEN HERE>
});
Here's a working example on Plunker: http://plnkr.co/edit/Kf3f8h?p=preview