leaflet.pattern
Version:
Provides the ability to use SVG patterns as backgrounds for Leaflet Paths.
63 lines (57 loc) • 1.74 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]
});
// Default Stripes.
var stripes = new L.StripePattern();
stripes.addTo(_map);
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "GeoJson Example Area"
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-120.34, 50.68],
[-120.35, 50.68],
[-120.35, 50.69],
[-120.34, 50.69],
[-120.34, 50.68]
]]
}
};
L.geoJson(geojsonFeature, {
style: {
fillPattern: stripes
}
}).addTo(_map);
</script>
</body>
</html>