Try to do this 🙂 React leaflet for some reason do not include images and you will need to reset default icons image. Below is some working example, I hope it will solve your issue. You also can add icons from one of public link https://cdnjs.com/libraries/Leaflet.awesome-markers import React, { Component } from ‘react’; import L … Read more
Answer for 2020 I also had this problem and solved it in my own project, so I thought I would share what I did. NextJS can dynamically load libraries and restrict that event so it doesn’t happen during the server side render. See the documentation for more details. In my examples below I will use … Read more
I finally found the correct code for the Icon.js file : import L from ‘leaflet’; const iconPerson = new L.Icon({ iconUrl: require(‘../img/marker-pin-person.svg’), iconRetinaUrl: require(‘../img/marker-pin-person.svg’), iconAnchor: null, popupAnchor: null, shadowUrl: null, shadowSize: null, shadowAnchor: null, iconSize: new L.Point(60, 75), className: ‘leaflet-div-icon’ }); export { iconPerson };
The <div id=”leafletmap”> must be added to the dom before calling L.map(‘leafletmap’).
Looks like you haven’t loaded in the Leaflet stylesheet. From the react-leaflet GitHub guide: If you are not familiar with Leaflet, make sure you read its quick start guide before using this library. You will notably need to add its CSS to your page to render the map properly, and set the height of the … Read more
I found a way to fix it. Steps to fix: Open your package.json file and edit your browserslist as follows. From ?? Operator results in “Unexpected Token” err when used in package #9468: “browserslist”: { “production”: [ “>0.2%”, “not dead”, “not op_mini all” ], “development”: [ “last 1 chrome version”, “last 1 firefox version”, “last … Read more