CODEWITHSUNDEEP
angularleaflet
taxer03
taxer03

Reputation: 63

Angular 2 & leaflet maps

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

Upvotes: 5

Views: 8021

Answers (2)

Bunnynut
Bunnynut

Reputation: 1328

It's not possible to use leaflet the 'regular' way within a component this way. You will have to load it into your project using npm for example (npm install leaflet).

Here is a nice tutorial on how to incorporate this into your Angular 2 application: https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/

Upvotes: 1

noam aghai
noam aghai

Reputation: 1446

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.

Upvotes: 3

Related Questions