2

I'm using the leaflet.pattern npm package. What am I missing? My Leaflet map is in a Vuejs application.

Maybe I need to correct the import statements?

import L from "leaflet";
import "leaflet.pattern/dist/leaflet.pattern-src.js";

  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);


  var simpleStripePattern = new L.StripePattern();
  simpleStripePattern .addTo(myMap);

No pattern appears on the map.

I have also tried this...

  var myPattern = new L.StripePattern();
  var shape = new L.PatternRect({
    x: 5,
    y: 5,
    width: 40,
    height: 40,
    rx: 10,
    ry: 10,
    fill: true
  });
  myPattern.addShape(shape);
  myPattern.addTo(myMap);

Again, no pattern appears on the map.

I also tried adding these additional import statements and this did not have an effect...

import "leaflet.pattern/dist/leaflet.pattern.js";
import "leaflet.pattern/src/StripePattern.js";
import "leaflet.pattern/src/PatternPath.js";
import "leaflet.pattern/src/PatternRect.js";

This code resulted in an error that might provide insight... var shape = new L.PatternRect({ width: 40, height: 40, rx: 10, ry: 10, fill: true });

  var pattern = new L.Pattern({ width: 50, height: 50 });
  pattern.addShape(shape);
  pattern.addTo(myMap);

  var circle = new L.Circle(this.center, 400.0, {
    fillPattern: pattern,
    fillOpacity: 1.0
  });
  circle.addTo(myMap);

The error:

Uncaught (in promise) RangeError: Maximum call stack size exceeded at NewClass._updateStyle [as _superUpdateStyle] (leaflet.pattern-src.js?3913:216) at NewClass._updateStyle [as _superUpdateStyle] (leaflet.pattern-src.js?3913:217) at NewClass._updateStyle [as _superUpdateStyle] (leaflet.pattern-src.js?3913:217) at NewClass._updateStyle [as _superUpdateStyle] (leaflet.pattern-src.js?3913:217) at NewClass._updateStyle [as _superUpdateStyle] (leaflet.pattern-src.js?3913:217) at NewClass._updateStyle [as _superUpdateStyle] (leaflet.pattern-src.js?3913:217)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.