I have a React Web application and I have been asked to make an offline map so after I did a lot of research and to find a map that match also the features that the design have I finally found react-leaflet is the best choice for using a map.
But after I finished the installation for the map and the tile layer was using HTTPS to draw the map depending on the lat, lang, and center.
I have been asked one more time to turn off the map into an offline map so I figured out a solution after a little bit of search: which is to select an area on the map from osm (Open Street Map) and download an XML file that contains node tags that are responsible for drawing the map after that I used an application to read that file which is (Maperitive).
I made and export for the map into small tiles layers. Finally, I added the tiles folder to my application as the attached image, and from the component, I used the path to navigate to that tiles folder to load the tiles. But the response is getting for me text/HTML and it should be image/png.
import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "styles/modules/vehicle/map.scss";
const Map: React.FC<any> = () => {
const getIcon = (iconSize) => {
return L.icon({
iconUrl: require("assets/images/png/location.png"),
iconSize,
});
};
return (
<div className="map">
<MapContainer
center={[30.02161, 31.25146]}
zoom={18}
scrollWheelZoom={false}
style={{ width: "100%", height: "100%" }}
>
<TileLayer url='assets/tiles/{z}/{x}/{y}.png' />
<Marker position={[30.02161, 31.25146]} icon={getIcon(60)}>
<Popup>
A pretty CSS3 popup. <br /> customizable.
</Popup>
</Marker>
</MapContainer>
</div>
);
};
export default Map;
Related
I want to draw a map using Equirectangular projection in the react-leaflet.
The reaction-leaflet used CRS, which supports Equirectangular projection, but the image of the desired map is not connected and truncated.
The coordinates also do not appear in the correct position.
<MapContainer
center={[0, 0]}
zoom={2}
scrollWheelZoom={true}
zoomControl={false}
style={{ width: "100%", height: "100%" }}
minZoom={2}
maxZoom={5}
doubleClickZoom={false}
crs={CRS.EPSG4326}
>
It looks like you are rendering an Open Streets Map correct? I believe that the Open Steets Map is supposed to use the EPSG:3857 projection. Open Street Map tiles use a coordinate system based on the wgs84 datum (ESPG 3857). I don't think you can project any map on any projection. You can refer to this GIS.stackexchange question which explains the differences.
I just tried it on a demo leaflet map that I have and got the same thing. .
<MapContainer ref={mapRef} center={[lat, lon]} zoom={zoom} scrollWheelZoom={true} crs={CRS.EPSG4326} id="leaflet-container">
I have a react leaflet map that is more or less built as a component as below:
<>
<MapContainer
center={[startLat, startLen]}
more props...
>
<TileLayer
url={`...`}
attribution='...'
/>
{data?.length > 0 &&
data.map((item) => {
return (
<Marker
key={item.name}
position={[item.lat, item.lang]}
more props...
>
</Marker>
);
})}
</MapContainer>
</>
I would like some of the markers to be animated. Doesn't really matter how, they just need to stand out. I found a leaflet plugin that looks very useful: https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing
But to be honest I don't know how to apply it to this Marker React component. Is it possible? Or is there another easy way of making one marker on the map move/stand out?
How can I center the MapView on the current user location?
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={region}
style={mapStyle}
onPress={() => Keyboard.dismiss()}
showsUserLocation
region={region}
/>
Read this article, full explanation on how to do it.
How to auto zoom into your current location using React Native Maps
I am using react leaflet library in my project and attempting to show a marker on my map view by using a Marker component, following this tutorial on Egghead along. However, it doesn't display but a broken image, as follows:
Current view so far
And this is the implementation in my project:
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconUrl: ('./markers/marker.png')
});
// my current implementation
<MapContainer
center={[19.000855082428515, -98.19408389636365]}
zoom={13} >
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
position={[19.000855082428515, -98.19408389636365]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
I´ve also used the icon property of Market set up with this function outside my Component:
const getIcon = () => (
new L.Icon({
iconUrl: require('./markers/marker.png'),
iconSize: [35, 35]
})
);
// code
<Marker
icon={getIcon()}
position={[19.000855082428515, -98.19408389636365]}>
//code
What is the issue that doesn't allow the market to show up? or is there another way to get the marker to show up?
I at last found my way to resolve my issue. Fortunately, this has been answered some years ago on GitHub with the issue #453.
What works for me was removing the import 'leaflet/dist/leaflet.css'; line and replace it in the HTML index file for the link tag specified on their documentation and ta-da, happy in the end 😄
I am making a globe that is in a canvas. I want to zoom towards the globe from far somewhere.
Eg: Globe's position is at [0,0,0] and camera is at [0,0,100] now I want when the page loads the camera zooms towards it slowly creating nice animation.
I have wrote this much amount of code:
import './App.css';
import {Canvas} from '#react-three/fiber'
import {OrbitControls} from '#react-three/drei'
import Earth from './models/Earth'
import {Suspense,useState} from 'react'
function App() {
return (
<Canvas concurrent
colorManagement style={{backgroundColor:"black",height:"100vh",width:"100vw"}}
orthographic camera={{ zoom: 1, position: [0, 0, 25] }}
>
<ambientLight intensity={0.5} />
<OrbitControls />
<Suspense fallback={null} ><Earth size={0.1} /></Suspense>
</Canvas>
);
}
export default App;
Main question is how to change zoom dynamically when page loads?
This is practically inbuilt into React, suspense can do it. https://twitter.com/0xca0a/status/1402558012519337989
<Suspense fallback={null}>
<ComponentThatLoadsModel />
<Zoom />
</Suspense>
function Zoom() {
return useFrame(state => state.camera......
The zoom component will mount once everything in the suspense block has been loaded, that makes it trivial to execute an action afterwards. You simply drop the zoom component in.
Here's an example that does it: https://codesandbox.io/s/cranky-newton-k7f9x?file=/src/App.tsx