Quickstart Guide

import { MapsForDevelopers } from '@mapsfordevelopers/js'

const map = new MapsForDevelopers({
  apiKey: 'YOUR_API_KEY',
  container: 'map',
  center: [-95.37, 29.76],
  zoom: 12,
  layers: ['parcels', 'pois']
})

// Add click handler for parcels
map.on('click', 'parcels', (e) => {
  const parcel = e.features[0]
  console.log('Owner:', parcel.properties.owner)
  console.log('Value:', parcel.properties.assessed_value)
})

import { Map, ParcelLayer, POILayer } from '@mapsfordevelopers/react'

export default function MyMap() {
  const handleParcelClick = (parcel) => {
    console.log('Selected:', parcel.properties)
  }

  return (
    <Map
      apiKey="YOUR_API_KEY"
      center={[-95.37, 29.76]}
      zoom={12}
    >
      <ParcelLayer onClick={handleParcelClick} />
      <POILayer categories={['restaurant', 'hospital']} />
    </Map>
  )
}

import { MapView, ParcelLayer } from '@mapsfordevelopers/react-native'

export default function App() {
  return (
    <MapView
      apiKey="YOUR_API_KEY"
      initialRegion={{
        latitude: 29.76,
        longitude: -95.37,
        zoom: 12,
      }}
    >
      <ParcelLayer
        onPress={(parcel) => {
          Alert.alert('Parcel', parcel.properties.address)
        }}
      />
    </MapView>
  )
}

import MapsForDevelopers

class MapViewController: UIViewController {
    var mapView: MFDMapView!

    override func viewDidLoad() {
        super.viewDidLoad()

        mapView = MFDMapView(frame: view.bounds)
        mapView.apiKey = "YOUR_API_KEY"
        mapView.setCenter(CLLocationCoordinate2D(
            latitude: 29.76,
            longitude: -95.37
        ), zoom: 12)

        mapView.addLayer(.parcels)
        mapView.delegate = self
        view.addSubview(mapView)
    }
}

class MapActivity : AppCompatActivity() {
    private lateinit var mapView: MFDMapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mapView = MFDMapView(this).apply {
            apiKey = "YOUR_API_KEY"
            setCenter(LatLng(29.76, -95.37), zoom = 12)
            addLayer(Layer.PARCELS)

            setOnParcelClickListener { parcel ->
                Toast.makeText(
                    context,
                    "Owner: ${parcel.owner}",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
        setContentView(mapView)
    }
}

import 'package:mapsfordevelopers/mapsfordevelopers.dart';

class MyMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MFDMap(
      apiKey: 'YOUR_API_KEY',
      initialCenter: LatLng(29.76, -95.37),
      initialZoom: 12,
      layers: [
        ParcelLayer(
          onTap: (parcel) {
            showDialog(
              context: context,
              builder: (_) => AlertDialog(
                title: Text(parcel.address),
                content: Text('Value: $${parcel.assessedValue}'),
              ),
            );
          },
        ),
      ],
    );
  }
}