DEV Community

Cover image for How to create the base of a map with ReactJS, Leaflet and TypeScript
AxelleDRouge
AxelleDRouge

Posted on • Edited on

18 2

How to create the base of a map with ReactJS, Leaflet and TypeScript

Liquid syntax error: 'raw' tag was never closed

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (10)

Collapse
 
ibrahimawadhamid profile image
Ibrahim Awad

Thanks for the amazing content. It helped me get started, I'm trying to make an Ionic5 application with React support that includes leaflet maps. I've been using leafletJs in vanilla JS and in ReactJS before, but this is my first time to use it in typescript and in Ionic. Wish me luck (Y)

Collapse
 
axelledrouge profile image
AxelleDRouge

Good Luck ! :) I don't know Ionic, I would be interested to know more about how it went

Collapse
 
vikinatora profile image
Viktor Todorov

Amazing article, it helped me a lot with starting my univeristy project using this exact stack!
I think one thing you have missed at the end of useAddMarker hooks is return { activate, setActivate } as I was getting error when trying to destructure the hook in the AddMarkerButton component.

Collapse
 
axelledrouge profile image
AxelleDRouge

You're welcome, happy to know it helped
oh yes probably, I created this article based on an app I created for my work, I simplified a lot, I may have deleted too much, or made mistakes in copying the function

Collapse
 
javiarch profile image
javiarch

Axelle. Excelente publicación!!
Gracias por compartirlo. Saludos desde Argentina

Collapse
 
axelledrouge profile image
AxelleDRouge

Thank you !

Collapse
 
kingstontwelve profile image
KingstonTwelve • Edited

Help me!)
Module '"../../node_modules/react-leaflet/types"' has no exported member 'Map'

Collapse
 
axelledrouge profile image
AxelleDRouge

Okay but I can't if you don't tell me how

Collapse
 
kingstontwelve profile image
KingstonTwelve

Thank u for answer :) I resolved error.
Your post helped me.

Thread Thread
 
axelledrouge profile image
AxelleDRouge

Ah okay great you are welcome

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay