I am having problems getting booklet maps that work in angular 2. In notepad, I wrote the following code to create a simple map:
<head>
<title>Experiment maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/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 imported the same stylesheet and script into the index.html file in angular, however, when I load the component, I just get a 400px div divider with a red background, without a map in any shape or form. Am I referencing css and script sheets incorrectly?
I also tried adding styleUrls: ['https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css']angular to the component itself without success.
In addition, you have 2 stylesheets that are referenced in index.html, with rel = "stylesheet", for example:
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0- rc.3/dist/leaflet.css" />
I tried to remove my original style.css and just leave the left version.
thank
source
share