leaflet.pattern
Version:
Provides the ability to use SVG patterns as backgrounds for Leaflet Paths.
52 lines (46 loc) • 1.33 kB
HTML
<html lang="en" ng-app="spire">
<head>
<meta charset="utf-8">
<title>Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/leaflet.pattern-src.js"></script>
<style>
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mapCenter = new L.LatLng(50.68, -120.34);
var baseLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var _map = new L.Map("map", {
center: mapCenter,
zoom: 14,
layers: [baseLayer]
});
var shape = new L.PatternCircle({
x: 12,
y: 12,
radius: 10,
fill: true
});
var pattern = new L.Pattern({width:50, height:50});
pattern.addShape(shape);
pattern.addTo(_map);
var circle = new L.Circle(mapCenter, 400.0, {
fillPattern: pattern,
fillOpacity: 1.0});
circle.addTo(_map);
</script>
</body>
</html>