React Open Street Map – React Leaflet Kullanımı

React projenizde harita ve marker kullanmanız gerekiyorsa, react leaflet isimli npm paketini kullanabilirsiniz. Bugün bu paketi kurdum am sağlıklı çalışmadı. Stackoverflow’da birçok konu açılmış fakat bende etkili olan bir çözüm olmadı.  Daha sonra bir şekilde sorunu çözdüm. Burada da arşiv amaçlı kalsın :)

Gerekli Paketlerin Kurulumu

[php]
npm install leaflet react-leaflet –save
[/php]

MapDisplay Component’i

[php]
import React, { Component } from ‘react’
import Leaflet from ‘leaflet’;
import { Map, TileLayer, Marker, Popup } from ‘react-leaflet’
import ‘leaflet/dist/leaflet.css’;

Leaflet.Icon.Default.imagePath =
‘../node_modules/leaflet’

delete Leaflet.Icon.Default.prototype._getIconUrl;

Leaflet.Icon.Default.mergeOptions({
iconRetinaUrl: require(‘leaflet/dist/images/marker-icon-2x.png’),
iconUrl: require(‘leaflet/dist/images/marker-icon.png’),
shadowUrl: require(‘leaflet/dist/images/marker-shadow.png’)
});

export default class MapDisplay extends Component {
state = {
lat: 41.257017,
lng: 29.077524,
zoom: 13,
}

render() {
const position = [this.state.lat, this.state.lng]
return (

<Map center={position} zoom={this.state.zoom} style={{height : ‘400px’}}>
<TileLayer
attribution=’&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors’
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
Son Konum
</Popup>
</Marker>
</Map>

)
}
}
[/php]

Paketin Resmi Sayfası

[php]
https://react-leaflet.js.org/
[/php]