PMap JS SDK

<script src="https://pechmap.com/sdk/v1/pmap.js"></script>

<div id="my-map" style="width:100%; height:400px; border-radius:12px;"></div>
<script src="https://pechmap.com/sdk/v1/pmap.js"></script>
<script>
  const map = new PMap({
    container: 'my-map',
    center: [3.3792, 6.5244],  // [lng, lat]
    zoom: 13,
    theme: 'dark',
  })
</script>

const map = new PMap({
  container: 'my-map',
  center: [8, 9],
  zoom: 4,
  theme: 'dark',
  markers: [
    { lat: 6.5244, lng: 3.3792, label: 'Lagos',        color: '#F59E0B' },
    { lat: 5.5502, lng: -0.2174, label: 'Accra',       color: '#F59E0B' },
    { lat: -1.2921, lng: 36.8219, label: 'Nairobi',    color: '#F59E0B' },
    { lat: -25.746, lng: 28.188,  label: 'Pretoria',   color: '#F59E0B' },
  ],
})

// Add a marker later
const markerId = map.addMarker({
  lat: 9.0579, lng: 7.4951, label: 'Abuja', color: '#E7C878',
  onClick: ({ label }) => alert('Clicked: ' + label),
})

// Remove it
map.removeMarker(markerId)

// Fit map to show all markers
map.fitMarkers()

const map = new PMap({ container: 'my-map', zoom: 4 })

// Listen for map clicks
map.on('click', ({ lat, lng }) => {
  console.log('Map clicked at', lat, lng)
})

// Marker click
map.on('markerClick', ({ id, label }) => {
  console.log('Marker clicked:', label)
})

// Map ready
map.on('ready', () => {
  console.log('Map is ready!')
  map.flyTo(6.5244, 3.3792, 13)
})

// Fly to a location (lat, lng, zoom)
map.flyTo(6.5244, 3.3792, 15)

// Change theme
map.setTheme('light')    // or 'dark', 'africa', 'satellite'

// Get current position
const { lat, lng } = map.getCenter()
const zoom = map.getZoom()

// Resize (call after container size changes)
map.resize()

// Clean up
map.destroy()

// Install
npm install @pmap/maps-sdk

// React usage
import { PmapMap } from '@pmap/maps-sdk'

export default function MyPage() {
  return (
    <PmapMap
      center={[3.3792, 6.5244]}
      zoom={13}
      markers={[
        { id: '1', coordinates: [3.3792, 6.5244], popup: 'Lagos HQ' }
      ]}
      onPlaceClick={(place) => console.log(place)}
      style={{ height: '400px', borderRadius: '12px' }}
    />
  )
}

<!-- Service area map — amber pins on dark Africa map -->
<iframe
  src="https://pechmap.com/embed/map?lat=9&lng=8&zoom=3&theme=dark&markers=[
    {%22lat%22:6.5244,%22lng%22:3.3792,%22label%22:%22Lagos%22,%22color%22:%22%23F59E0B%22},
    {%22lat%22:5.5502,%22lng%22:-0.2174,%22label%22:%22Accra%22,%22color%22:%22%23F59E0B%22}
  ]"
  width="100%" height="380"
  style="border:none; border-radius:12px;"
  loading="lazy" allowfullscreen
  title="PMap Service Areas">
</iframe>

<!-- Or fetch the snippet via API -->
<!-- GET https://pechmap.com/api/v1/embed?lat=9&lng=8&zoom=3&theme=dark -->