description |
---|
Layer Component |
Name | Type | Description |
---|---|---|
id | string | only required if referenced outside of nested layer |
style | object | Layer Style Object |
customLayer | CustomLayerInterface | To include external layers e.g. deck.gl |
filter | FilterSpecification | Filter expression |
visible | boolean | Show/Hide Layer |
sourceId | string | Required for Vector Sources |
beforeType | string | background | fill | line | symbol | raster | circle | fill-extrusion | heatmap | hillshade | sky |
beforeId | string | Id of Layer to insert Layer before |
featureState | object | Define Feature State |
*required
import { Component, createSignal } from "solid-js";
import MapGL, { Viewport, Source, Layer } from "solid-map-gl";
import 'mapbox-gl/dist/mapbox-gl.css';
const App: Component = (props) => {
const [viewport, setViewport] = createSignal({
center: [-122.45, 37.78],
zoom: 6,
} as Viewport);
return (
<MapGL
options={{ style: 'mb:light' }}
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
>
<Source
source={{
type: 'geojson',
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
}}
>
<Layer
style={{
type: 'circle',
paint: {
'circle-radius': 5,
'circle-color': 'red',
},
}}
/>
</Source>
</MapGL>
);
};