Harry Wood
home
>
maps
>
examples
> leaflet >
Leaflet Polygons
Leaflet Polygons
Adding a circle and a triangle. Continuing their
quick Start tutorial
<html> <head> <title>Leaflet Polygons Example</title> <link rel="stylesheet" href="leaflet/leaflet.css" /> <!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]--> <script src="leaflet/leaflet.js"></script> <script language="javascript"> function init() { var map = new L.Map('map'); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(map); map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text. // Location to centre the map var london = new L.LatLng(51.505, -0.09); map.setView(london, 13); // Location of the marker var markerLocation = new L.LatLng(51.5, -0.09); var marker = new L.Marker(markerLocation); map.addLayer(marker); // Add a circle... var circleLocation = new L.LatLng(51.508, -0.11), circleOptions = { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }; var circle = new L.Circle(circleLocation, 500, circleOptions); map.addLayer(circle); // ...and a triangle var p1 = new L.LatLng(51.509, -0.08), p2 = new L.LatLng(51.503, -0.06), p3 = new L.LatLng(51.51, -0.047), polygonPoints = [p1, p2, p3]; var polygon = new L.Polygon(polygonPoints); map.addLayer(polygon); } </script> </head> <body onLoad="javascript:init();"> <div id="map" style="height: 200px"></div> </body> </html>
view directly
Home
Blog
About
Maps
Other
Contact