React Open Street Map – React Leaflet Kullanımı

tarafından
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

npm install leaflet react-leaflet --save

MapDisplay Component’i

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>

    )
}
}

Paketin Resmi Sayfası

https://react-leaflet.js.org/