I am having an issue where when I attempt to render a map using Leaflet in Angular 13, I am getting the following...
I have the leaflet.css and styles.css loaded in the angular.json file...
"styles": ["src/styles.scss",
"node_modules/leaflet/dist/leaflet.css"]
I have the leaflet.css and styles.css loaded in the app.component.ts...
styleUrls: ['./on-site-proctor-locator.component.scss',
'../../../../../node_modules/leaflet/dist/leaflet.css']
In the app.component.ts file, here is where I initialize the map...
this.map = L.map('map').setView([ lat, lon ], zoom);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '© Stadia Maps, © OpenMapTiles' +
'© OpenStreetMap contributors'
});
tiles.addTo(this.map);
Here is what I have setup in the app.component.html file for the div...
<div id="map" class="map-div"></div>
I have looked at other posts of similar struggles and have found nothing that has helped me. I would appreciate any suggestions on what I can do to resolve this issue. Thank you.
this is what worked for me (angular 14 project+leaflet 1.8):
on this line
<div id="map" class="map-div"></div>
add a width and height, to read something like this
<div id="map" class="map-div" style="width: 100%; height: 300px"></div>
leaflet requires the container to be visible, and have a reference width/height in order to render correctly.
I hope it helps
Related
I have sample code that uses Leaflet and open street map. Nevertheless, i am not sure how could i add more markers. Besides i don't really understand the sense of setView function i read that it's for centering map, but what is the sense to have it since there is only one marker which should be automaticly as map center point, and from the other hand if there will be more markers what is a sense of setView?
Additional question: Is Leaflet and open street map free for commercial use?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>
<body>
<div id="mapDiv" style="width: 800px; height: 500px"></div>
<script>
// position we will use later
var lat = 40.73;
var lon = -74.00;
// initialize map
map = L.map('mapDiv').setView([lat, lon], 13);
// set map tiles source
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18,
}).addTo(map);
// add marker to the map
marker = L.marker([lat, lon]).addTo(map);
// add popup to the marker
marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
</script>
</body>
</html>
</pre>
there is only one marker which should be automaticly as map center point
There is nothing in Leaflet itself that would automatically center a map view on your only Marker.
On the other hand, the sample code you show does achieve this, using setView on the same coordinates as your only Marker.
if there will be more markers what is a sense of setView?
setView gives you the ability to define which part of the map you want to initially display in your viewport, independently from your map content / layers (in your case: your markers). Obviously you can define a view that shows all your Markers at once as well.
i am not sure how could i add more markers.
Do L.marker([lat, lon]).addTo(map); as many times as needed, with lat and lon different each time as needed.
Is Leaflet and open street map free for commercial use?
Leaflet is distributed under a BSD 2-clause license, commercial use is permitted.
OpenStreetMap data is free, but not the tiles generated by OSM servers. There are many services generating similar tiles from OSM data or other sources that you can check out. E.g. you can search for "leaflet providers".
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>
<body>
<div id="mapDiv" style="width: 800px; height: 500px"></div>
<script>
// position we will use later
var lat = 40.73;
var lon = -74.00;
// initialize map
map = L.map('mapDiv');
// set map tiles source
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18,
}).addTo(map);
/*
L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 13,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
*/
map.locate({setView: false, maxZoom: 8});
// add marker to the map
map.setView(new L.LatLng(lat, lon), 18);
marker = L.marker([lat, lon]).addTo(map);
// add popup to the marker
marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
</script>
</body>
</html>
</pre>
Map Tiles
I'm using SmartyBC on version 3.1.33. In the smarty template the code of leaflet and openstreetmap will not run. The map will not open.
I've all tested with or without the script between {literal} {/literal}. The map will not open. However, in a normally html site the code works perfectly. What's the mistake?
<html>
<head><link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css">
<script src='https://unpkg.com/leaflet#1.5.1/dist/leaflet.js'></script>
#map {
height: 500px;
}
</head>
<body>
<div id="map"></div>
<script>
{literal}
var map = L.map('map').setView([43.64701, -79.39425], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
{/literal}
</script>
</body>
</html>
No error messages and no map. Thanks for help.
You didn't put #map styles in HTML <style>. I did that and the same code without {literal} tags worked.
https://codepen.io/anon/pen/vqVLjL
How do I upgrade to Font Awesome 5 for the leaflet plugin Leaflet.awesome-markers? This plugin has not been updated on github for some time and uses font awesome v4.
This is for an app that uses mapbox, leaflet and leaflet awesome markers with font awesome v4 and works correctly.
I've tried to upgrade to Font Awesome 5 like so:
app.scss
#import url('webfonts/font-awesome-pro-5.0.1.css');
#import url('webfonts/fa-solid-900.ttf');
#import url('webfonts/fa-solid-900.woff');
#import url('webfonts/fa-solid-900.woff2');
#import url('webfonts/fa-regular-400.ttf');
#import url('webfonts/fa-regular-400.woff');
#import url('webfonts/fa-regular-400.woff2');
And index.html:
<script src="scripts/fontawesome-all-5.0.1.min.js"></script>
After upgrading to Font Awesome 5, the leaflet markers are displaying with the icons too small, and not in the center of the marker. They were correct with v4.
I found this possible fix, but it made no difference, the icons are still too small and not centered: https://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'music'
});
How can I fix this for Font Awesome 5?
As suggested by #mwilkerson's answer, your current code mixes the JS and Webfonts CSS approaches of Font Awesome 5. Only one approach is necessary.
Webfonts CSS:
The Webfonts Font Awesome 5 approach seems to work fine with the (no longer maintained) plugin
lvoogdt/Leaflet.awesome-markers version 2.0.2:
(here using the 'arrow-alt-circle-down' icon to show that it is correctly centered, because the 'music' one is very asymmetric)
var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'arrow-alt-circle-down' //'music'
});
L.marker(paris, {
icon: marker,
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="map" style="height: 180px"></div>
JS approach:
The JS Font Awesome 5 approach dynamically replaces the <i> element by an <svg>, therefore it is no longer styled by the plugin CSS.
You can easily restore this styling by duplicating the CSS rule:
.awesome-marker svg {
color: #333;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'arrow-alt-circle-down' //'music'
});
L.marker(paris, {
icon: marker,
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
.awesome-marker svg {
color: #333;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<div id="map" style="height: 180px"></div>
The first step I'd take in resolving this is to determine whether you need to be using the Webfonts with CSS method for Font Awesome 5, or the SVG with JavaScript method, and then focus on that one, removing the other.
In your example code, you are loading both: Webfonts in your app.scss and SVG/JS in your index.html with the <script> block.
Perhaps resolving that set up issue will solve the whole problem. Or at least, it will help clear things up to identify and troubleshoot any remaining issue.
I would recommend starting with the Webfonts approach, to see if you can get that working. If so, then just remove that <script> block from index.html.
However, there are several common issues around upgrading from v4 to v5 (see notes on upgrading here). One of those issues has to do with the names of some icons changing between these major versions (the linked upgrade doc lists the specific icon names that have changed). There is a v4 shim that can ease the upgrade process by automatically translating any v4-only icon names to their v5 counterparts. But this v4 shim only works with the SVG with JavaScript method (details on that same linked upgrade doc). So if you need to use that v4 shim, then you'll need focus on the SVG with JavaScript method and drop the webfont loading in your app.scss.
steps to implement awesome icons into the map:
add this link to the index.html file(root file) if the app
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css"/>
add this variable
var marker = leaflet.AwesomeMarkers.icon({
icon: 'arrow-alt-circle-down', //'music'
markerColor: 'blue',
prefix: ' fa fa-fa fa-paint-brush',
});
List item
attach the icon to the marker
leaflet.marker([property.lat, property.long], {
icon: marker
})
I am following leaftlet js getting started tutorial. But I am unable to load the map. Here is the code I have
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
</head>
<style>
#mapid { height: 180px; }
</style>
<script>
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={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'I have put public access token'
}).addTo(mymap);
</script>
<body>
<div style="margin-top:100px;margin-left:100px;height: 200px;width:200px" id="mapid"></div>
<div style="height:200px;width:200px;background: red">
</div>
</body>
</html>
In the above code, id: 'your.mapbox.project.id' I am unable to find this. I found only public access token, is this the reason map is not getting loaded .. any help is appreciated
To learn leaflet, you can just use the options of the example (check the source)
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
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);
</script>
Later on, when you are more familiar with leaflet, you can open a mapbox account and learn about what they are adding.
The reason why mapbox is mentioned in the home page of leaflet is because the creator of leaflet is now working for mapbox.
I am facing issue with leaflet library. When I try to load map, images are loaded more then once. I am using leaflet with angular, grunt and browserify. I suspect it can be because of order of loading libraries and async execution, but I am not sure. There is no js error messages, leaflet just breaks.
This is my grunt file:
var $ = require('jquery');
window.jQuery = $;
//require boostrap.js for bootstrap components
var angular = require('angular');
require('ui.bootstrap');
require('showErrors');
require('leaflet');
require('leaflet-directive');
angular.module('common', [
require('angular-resource')
]);
var requires = [
'ngRoute',
'leaflet-directive',
'common',
'ui.bootstrap',
'ui.bootstrap.showErrors'
];
require('./common');
angular.module('app', requires).config(function($routeProvider) {
customRouteProvider.when('/common', {templateUrl: 'js/common/1.html'});
customRouteProvider.otherwise({redirectTo: '/'});
});
Html code:
<div ng-controller="mapController">
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
</div>
mapController:
module.exports = function ($scope, leafletData) {
var map = L.map( 'map', {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2
});
L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo( map );
}
But when I execute the code leaflet breaks and my map looks like:
I tried also with angular-leaflet-directive with standard and it still breaks. Did anyone face this issue before? Any suggestions?
in your file Html code
test with change style div: height: 80vh;
<div ng-controller="mapController">
<div id="map" style="height: 80vh; border: 1px solid #AAA;"></div>
</div>
And check the initialization the component life cycle:
Angular 6 is ngOnInit.
Ionic is ionViewDidEnter.
The idea is that booklet loading is done after initialization of the component.
This problem often occurs due to resizing of any parent container while the map is already initialized.
This my solution in Angular 12 link
If you are having this issue on Vue3 you need to import the CSS:
<script>
import "leaflet/dist/leaflet.css";