Menu
I'm having trouble getting leaflet maps working in angular 2. In notepad, I have wrote the following code to create a simple map:
<head>
<title>Experiment maps</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 400px; background: #919191;"></div>
<script>
var map = L.map('map').setView([54.5833300, -5.9333300], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a
href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);
</script>
<h1>map</h1>
</body>
I have imported the same stylesheet and script into the index.html file in angular, however, when I load a component I just get a div placeholder of 400px with a red background, no map in any shape or form. Am I referencing leaflet's css and script files incorrectly?
I have also tried adding styleUrls: ['https://unpkg.com/[email protected]/dist/leaflet.css'] into the angular component itself, with no success.
Also, can you have 2 stylesheets referenced in the index.html, with with rel="stylesheet", like this:
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected] rc.3/dist/leaflet.css" />
I have tried deleting my original style.css and just leaving leftlet's version.
Thanks
817
I develop in typescript (angular 2), and I used the offical javascript leaflet docs.
you just need to install the leaflet directory with this line:
npm install leaflet .
and add after the installation this import at your imports:
import L from "leaflet";
finally you can use leaflet the same as shown at leaflet docs. (with small changes look at google)
Good luck.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
