javascriptleaflet
I am making a vue project and I want to use leaflet inside of my components.
import L from 'leaflet';
export default {
created() {
L.map('map').setView([33.4501001, -101.9107704], 4); // Coordinates, Zoom
},
};
html:
<template lang="html">
<div class="row">
<div>
<h1> Hello </h1>
</div>
<div id="map">
</div>
</div>
</template>
But I get the error Map container not found?
If you want to remove the grayscale map from the start just delete:
"Grayscale": grayscale,
From
var baseMaps = {
"Grayscale": grayscale,
"Streets": streets
};
If you want to remove the layer on a click you call it as a method on the map object. Like so:
map.removeLayer(grayscale)
To remove it from the control you first have to assign the control to a variable. Change this:
L.control.layers(baseMaps, overlayMaps).addTo(map);
To this:
lcontrol = L.control.layers(baseMaps, overlayMaps).addTo(map);
Then you can call:
lcontrol.removeLayer(grayscale)
..to remove it from the control.
This Leaflet plugin lets you do exactly that:
Leaflet.pattern
Provides the ability to use SVG patterns as backgrounds for Leaflet Paths.
Options include:
From the stripe pattern example:
Best Answer
vue2-leaflet provides Vue2 leaflet components so you can do things like
<l-map ...><l-tile-layer ...>...</l-tile-layer></l-map>.Here's the GitHub Repo.