Develop Reference

Restricting mouse dragging to a certain area in Map-box-gl-js

Hey guys so I am displaying a map and I want to limit the user mouse dragging to a specific area. For example I want to limit user within New York city. The user can use mouse dragging within the area that covers the city but if the user wants move to see Las Vegas the user should be trapped within the limits of New York.
My map component is currently looking like this.
<Map
mapboxAccessToken={TOKEN}
// onResize=""
initialViewState={{
longitude: -73.935242,
latitude: 40.730610,
zoom: 8,
}}
style={{
width: "100%",
height: "100%",
}}
mapStyle="mapbox://styles/mapbox/dark-v9"
minZoom={8}
// dragPan={false}
>
<FullscreenControl position="top-right" />
<NavigationControl position="top-right" />
<Map/>
When I disable dragPan it disables all mouse dragging but I just want to disable mouse dragging if the user tries to gets out of New York boundaries.

Using Equirectangular projection in react-leaflet

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">

Using OpenStreetMap Localy in my React app

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;

React leaflet bouncing marker

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 place a marker in React Leaflet?

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 😄