GeoJSON - Sveaflet

Other Layers - GeoJSON

Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup.

Setup #

  • Svelte
<script>
	import { GeoJSON } from 'sveaflet';
</script>

Default GeoJSON #

  • Svelte
<script>
	import { Map, TileLayer, GeoJSON } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [39.74739, -105], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<GeoJSON />
	</Map>
</div>

GeoJSON with Options #

  • Svelte
<script>
	import { Map, TileLayer, GeoJSON } from 'sveaflet';

	let geojsonFeature = {
		type: 'Feature',
		properties: {
			name: 'Coors Field',
			amenity: 'Baseball Stadium',
			popupContent: 'This is where the Rockies play!'
		},
		geometry: {
			type: 'Point',
			coordinates: [-104.99404, 39.75621]
		}
	};
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [39.74739, -105], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<GeoJSON json={geojsonFeature} options={{ attribution: 'GeoJSON' }} />
	</Map>
</div>

Props #

Prop name Description Type Default
json Optional. An object in GeoJSON format. Object null
options Optional GeoJSONOptions null
DivIcon Icon