Skip to main content

· One min read
Rob Blackbourn

This release made some changes to the hooks.

The original implementation used refs to hold the center and zoom, which proved unnecessary. The refs have been removed, and the api looks cleaner.

Current:

  const [zoom, setZoom] = useZoom({ ref, defaultZoom: 6 })

  const [center, setCenter] = useMouseEvents({
    ref,
    defaultCenter: { latitude: 51.4768, longitude: -0.0005 },
    zoom,
  })

  useClick({
    ref,
    center,
    zoom,
    onClick: (coordinate: Coordinate, point: Point)
      => console.log('click', { coordinate, point }),
    onDoubleClick: (coordinate: Coordinate, point: Point) => {
      // Zoom in on the new coordinate.
      setCenter(coordinate)
      setZoom(zoom + 1)
    }
  })

Previous:

  const [zoom, zoomRef, setZoom] = useZoom({ ref, defaultZoom: 6 })

  const [center, centerRef, setCenter] = useMouseEvents({
    ref,
    defaultCenter: { latitude: 51.4768, longitude: -0.0005 },
    zoomRef,
  })

  useClick({
    ref,
    centerRef,
    zoomRef,
    onClick: (coordinate: Coordinate, point: Point)
      => console.log('click', { coordinate, point }),
    onDoubleClick: (coordinate: Coordinate, point: Point) => {
      // Zoom in on the new coordinate.
      setCenter(coordinate)
      setZoom(zoom + 1)
    }
  })

Rob

· One min read
Rob Blackbourn

I had a play using the browser geolocation api to center the map on the location of the browser. You have to allow your browser to know your location for this to work.

import { useEffect, useState } from 'react'

import { Coordinate, Map, TileLayer } from '@jetblack/map'

export function Geolocation() {
  const [center, setCenter] = useState<Coordinate>({
    latitude: 51.47684676353231,
    longitude: -0.0005261695762532147,
  })
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      ({ coords: { latitude, longitude } }) => setCenter({ latitude, longitude }),
      error => console.log('error', error)
    )
  }, [])

  return (
    <div style={{ textAlign: 'center', marginTop: 50 }}>
      <div style={{ margin: '0 auto' }}>
        <Map center={center}>
          <TileLayer />
        </Map>
      </div>
    </div>
  )
}

· One min read
Rob Blackbourn

This release made some changes to the tile providers.

The dprs property was removed, as I decided to follow the leaflet strategy of checking the resolution of the browser.

I removed the MapTiler tile provider, as they appear to have significantly different url construction. I have added a story which demonstrates how to use different MapTiler tiles.

Some more documentation on the components was added.

Rob

· One min read
Rob Blackbourn

Most of the features are now working and I'm thinking about an actual release.

There are still some design choices that I'd like to review before I commit to a major version release, but I think I'm almost there.

Rob