CSS Error in mapbox-gl-geocoder about react-map-gl-geocoder

[SamSamskies]

Oops, sorry looks like I made a bad decision to import the CSS in this component. I was trying to make peoples lives easier and didn't consider that not everyone will have a build system setup to make this work. I'm going to need to do a major version upgrade and remove the CSS import and have users import it themselves as react-map-gl does.

In the meantime, it looks like you might be able to use this library to get things working with Next.js. https://github.com/zeit/next-plugins/tree/master/packages/next-css

[SamSamskies]

@kjkurtz how are you loading the CSS for react-map-gl?

[kjkurtz]

I was letting this library do it and used that next-css plugin in my nextjs config. I’m not in front of my computer at the moment but can give it another try later and give you more detail. Using that next-css plugin though should allow css imports, but maybe not for stuff in node_modules? Not sure right off hand.

[SamSamskies]

A temporary work around for you could be to copy and paste my code (it's only one file) into your code base and load the CSS the same way that you load the react-map-gl CSS.

I plan to remove the CSS import and have users bring it in themselves, but not sure when I'll push that up.

[kjkurtz]

Cool, I did that and it worked at least for styling. I was able to bring it in using the same import statement you did for CSS but within my own component versus a library component. I'm guessing NextJS treats them differently.

I still have one goofy thing where because I am using onClick in ReactMapGL to zoom to polygon bounds, if you click in the Geocoder text box, it zooms to the bounds underneath it.

[SamSamskies]

This click event propagating through to the map is a known issue that I haven't decided on how to fix yet #22. I describe a current work around in the issue.

[SamSamskies]

@kjkurtz I just published v2 which removes the CSS import if you wanna switch back to importing this component as a dependency to take advantage of updates. See release notes here https://github.com/SamSamskies/react-map-gl-geocoder/releases. Let me know if you still need help with fixing the click event propagation problem.

[kjkurtz]

Great, thanks! I'll give it a try. I've also been experimenting with the slightly different mapbox-gl wrapper found here: https://github.com/alex3165/react-mapbox-gl. I've felt it's a little easier to integrate custom components into that one vs Uber's, but I do miss the integration of the viewport with state that the Uber library has. Have you compared them at all?

[SamSamskies]

I checked out that library a long time ago, but ended up going with Uber's react-map-gl for projects that I've worked on. I haven't explored other options much because react-map-gl + deck.gl has been easy to work with.

[kjkurtz]

Gotcha. deck.gl looks pretty awesome, I haven't tried it yet. At this point trying to build out some basic custom features on top of MapboxGL. Thanks again for getting the update out!