Geojson CSS implementation for Leaflet
Switch branches/tags
Nothing to show
Clone or download
Latest commit dc3f973 Aug 13, 2014

README.md

Leaflet.geojsonCSS

Geojson CSS implementation for Leaflet.

Live demo

Screenshot

Use L.GeoJSON.CSS or L.geoJson.css instead of L.GeoJSON and L.geoJson:

L.geoJson.css(json).addTo(map);

Install

Download latest release. Use minified or development version.

Or use bower for install:

bower install Leaflet.geojsonCSS --save

Example of GeoJSON with CSS

{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"geometry": {
				"type": "Polygon",
				"coordinates": [[
					[37.61489152908325,55.752586015356876],
					[37.61577129364014,55.7539867694403],
					[37.616543769836426,55.75506145183324],
					[37.6177453994751,55.75443355110991],
					[37.619526386260986,55.753491681072205],
					[37.62143611907959,55.75252563689488],
					[37.62117862701416,55.75211506087468],
					[37.61875391006469,55.750762544596384],
					[37.61813163757324,55.749989657097],
					[37.61302471160889,55.749035602973365],
					[37.612552642822266,55.74907183330299],
					[37.6134967803955,55.750641781933986],
					[37.61489152908325,55.752586015356876]
				]]
			},
			"style": {
				"color": "#CC0000",
				"weight": 2,
				"fill-opacity": 0.6,
				"opacity": 1,
				"dashArray": "3, 5"
			}
		},
		{
			"type": "Feature",
			"geometry": {
				"type": "MultiLineString",
				"coordinates": [[[37.611907,55.747355],[37.612639,55.747611],[37.613671,55.747839],[37.614446,55.748040],[37.616002,55.748446],[37.616364,55.748537],[37.616573,55.748585],[37.616779,55.748627],[37.617038,55.748677],[37.618375,55.748887],[37.620201,55.749173],[37.620494,55.749215],[37.620723,55.749246],[37.621209,55.749296],[37.622037,55.749388],[37.622402,55.749421],[37.622745,55.749461],[37.622990,55.749484],[37.623206,55.749507],[37.623680,55.749562],[37.624266,55.749640]],[[37.624245,55.749770],[37.623771,55.749678],[37.623476,55.749623],[37.623147,55.749577],[37.621484,55.749414],[37.620021,55.749222],[37.618740,55.749021],[37.617359,55.748819],[37.616927,55.748750],[37.616755,55.748721],[37.616592,55.748691],[37.616413,55.748652],[37.616225,55.748608],[37.614894,55.748251],[37.614139,55.748055],[37.613795,55.747971],[37.613487,55.747906],[37.612526,55.747741],[37.612248,55.747656],[37.611791,55.747497]]]
			},
			"style": {
				"color": "#CC0000",
				"opacity": 1,
				"weight": 4
			}
		},
		{
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [37.61001, 55.752301]
			},
			"style": {
				"icon": {
					"iconUrl": "metro.png",
					"iconSize": [32, 32],
					"iconAnchor": [16, 16]
				}
			}
		}
	]
}

Style properties

For Point geometry use only icon property. Value is an object with Leaflet icon options:

{
	"icon": {
		"iconUrl": "metro.png",
		"iconSize": [32, 32],
		"iconAnchor": [16, 16]
	}
}

For LineString (MultiLineString) and Polygon (MultiPolygon) use Leaflet Path options:

{
	"color": "#CC0000",
	"weight": 2,
	"fill-opacity": 0.6,
	"opacity": 1,
	"dashArray": "3, 5"
}

Popup template

In additional to GeoJSON CSS this plugin support templates for Leaflet.Popup. Use property popupTemplate in features:

{
	"type": "Feature",
	"properties": {
		"title": "Kremlin"
	},
	"geometry": {
		"type": "Polygon",
		"coordinates": [[
			[37.61489152908325,55.752586015356876],
			[37.61577129364014,55.7539867694403],
			[37.616543769836426,55.75506145183324],
			[37.6177453994751,55.75443355110991],
			[37.619526386260986,55.753491681072205],
			[37.62143611907959,55.75252563689488],
			[37.62117862701416,55.75211506087468],
			[37.61875391006469,55.750762544596384],
			[37.61813163757324,55.749989657097],
			[37.61302471160889,55.749035602973365],
			[37.612552642822266,55.74907183330299],
			[37.6134967803955,55.750641781933986],
			[37.61489152908325,55.752586015356876]
		]]
	},
	"style": {
		"color": "#CC0000",
		"weight": 2,
		"fill-opacity": 0.6,
		"opacity": 1,
		"dashArray": "3, 5"
	},
	"popupTemplate": "<strong>{title}</strong>"
}