Tag: leaflet 언어

leaflet 맵 표시 언어 변경

지도 데이터 서버 변경하기

leaflet의 기본 맵은 각 지역마다 현지 나라의 언어로 표기되어 한국 맵은 한국어, 일본 맵은 일본어, 프랑스 맵은 프랑스어로 표기되어 있습니다.

하지만 전체 맵을 영어로 표기하고 싶거나 산맥, 해양 등 용도에 맞게 지도의 이미지를 변경하고 싶을 때는 아래 링크에서 원하는 맵의 유형과 서버를 확인하여 서버만 변경해주면 됩니다.

1. 링크에서 서버 확인

http://leaflet-extras.github.io/leaflet-providers/preview/

링크에 접속하면 다음과 같은 화면입니다.

초록색 네모칸에서 서버 정보, 빨간색 네모칸에서 맵의 종류 샘플을 볼 수 있습니다.

샘플로 OpenStreetMap.France를 적용해보도록 하겠습니다.

빨간 네모칸에서 OpenStreetMap.France을 선택하면 초록 네모칸에 서버 정보가 표시됩니다.

‘https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png’

‘&copy; OpenStreetMap France | &copy; <a href=”https://www.openstreetmap.org/copyright”>OpenStreetMap</a> contributors’

이 두 부분만 코드에서 변경해주면 바로 적용이 됩니다.

2. 코드 적용

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { icon } from "leaflet";
const Icon = icon({
iconUrl: "marker-icon.png",
iconSize: [16, 16],
iconAnchor: [12, 16],
});
const MyMap = () => {
return (
<MapContainer
center={[37.56675, 126.97842]}
zoom={10}
scrollWheelZoom={true}
style={{ width: "500px", height: "500px" }}
>
<TileLayer
attribution='&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
/>
<Marker position={[37.56675, 126.97842]} icon={Icon}>
<Popup>서울시청이에요.</Popup>
</Marker>
</MapContainer>
);
};
export default MyMap;
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import { icon } from "leaflet"; const Icon = icon({ iconUrl: "marker-icon.png", iconSize: [16, 16], iconAnchor: [12, 16], }); const MyMap = () => { return ( <MapContainer center={[37.56675, 126.97842]} zoom={10} scrollWheelZoom={true} style={{ width: "500px", height: "500px" }} > <TileLayer attribution='&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png" /> <Marker position={[37.56675, 126.97842]} icon={Icon}> <Popup>서울시청이에요.</Popup> </Marker> </MapContainer> ); }; export default MyMap;
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { icon } from "leaflet";
const Icon = icon({
  iconUrl: "marker-icon.png",
  iconSize: [16, 16],
  iconAnchor: [12, 16],
});

const MyMap = () => {
  return (
    <MapContainer
      center={[37.56675, 126.97842]}
      zoom={10}
      scrollWheelZoom={true}
      style={{ width: "500px", height: "500px" }}
    >
      <TileLayer
        attribution='&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
      />
      <Marker position={[37.56675, 126.97842]} icon={Icon}>
        <Popup>서울시청이에요.</Popup>
      </Marker>
    </MapContainer>
  );
};

export default MyMap;

설정에 따라 변경된 맵과 언어를 확인할 수 있습니다.