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 😄
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 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;
I have a website featuring a map with a marker for different places of interest. I am using the js code below that works perfectly :
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
//. t is an array containing gps positions of the different places
for(i=0;i<t.length;i++){
var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
}
But when I try to add a pop-up for each marker with the code below, the whole map is moved to the left, and not centered anymore on the initial position defined with setView :
for(i=0;i<t.length;i++){
var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
marker.bindPopup("<b>mon titre"</b><br>mon texte").openPopup();
}
Any idea of what is going on and the best way to solve the problem ?
Thank you in advance.
I found the solution : the problem comes from the fact that the pop-ups are open.
Using the following line of code works :
marker.bindPopup("<b>mon titre"</b><br>mon texte").closePopup();
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?
I have a leaflet.js project where I have a baselayer, a polygon geojson layer, and another tilelayer above the geojson layer which shows placenames. I've managed to get the placenames tilelayer to visualise above the geojson layer by adding it to a map pane. However, this has disabled click and hover events on the geojson layer. I'm thinking I probably have to add the goejson layer to it's own pane, or possibly the same pane as the placenames tilelayer, but I'm not sure.
Here's my code which add my placenames layer to a pane:
var topPane = map.createPane('leaflet-top-pane', map.getPanes().mapPane);
topPane.appendChild(CartoDB_PositronOnlyLabels.getContainer());
Here's my CSS code for the pane:
.leaflet-top-pane {
pointer-events: none;
}
I've tried adding my geojson layer to the same pane, and changing the pointer-events option, but either it won't work, or I haven't hit on the right combination. Has anyone any ideas as to how I can resolve this so that I can have my tilelayer overlay above my geojson layer but still be able to interact with the geojson layer?
You're not using the Leaflet library properly (e.g. manually appending a layer to a HTML container), assuming you will know the CSS class of the pane, etc).
Use this instead:
map.createPane('labels');
map.getPane('labels').style.zIndex = 1000;
map.getPane('labels').style.pointerEvents = 'none';
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
}).addTo(map);
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB',
pane: 'labels'
}).addTo(map);
You can see a working example here.