Styled Line

This example also uses the hash property to sync the map's location with the address bar.

svelte

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
  center={[-68.137, 45.137]}
  zoom={5}
  hash
>
  <GeoJSON id="maine" {data}>
    <LineLayer
      layout={{ 'line-cap': 'round', 'line-join': 'round' }}
      paint={{
        'line-width': 5,
        'line-dasharray': [5, 2],
        'line-color': '#008800',
        'line-opacity': 0.8,
      }}
    />
  </GeoJSON>
</MapLibre>

Back to Examples

Github