Live edit style with React HMR

[VitalyVaryvdin]

Hi,

I've got map style implemented in js object as StyleSpecification

Is it possible to utilise React HMR to reload style on changes somehow?

[HarelM]

Sounds like it should be possible.
You can also use Maputnik to edit your style.

[VitalyVaryvdin]

I found it simpler to real-time manipulate the style once its in js object. Might be doing something wrong here though, just started with the maps. So i can't really use Maputnik anymore

Changing style does trigger some kind of re-render, since map view state gets reset, however style isn't updated until i actually reload the page. Style passed to the map via useState hook. Any clues what could be wrong here?

[HarelM]

I can't help without seeing any code, I'm also not a react expert, so I might also be wrong...

[VitalyVaryvdin]

The code is basic

Style.tsx

export const Style: StyleSpecification = {
	version: 8,
	name: "",
	sources: {
		openmaptiles: {
			type: "vector",
			url: "/api/map/tiles"
		}
	},
	sprite: "/api/map/sprite",
	glyphs: "/api/map/glyphs/{fontstack}/{range}.pbf",
	layers: [
		BackgroundLayer,
		...ParkLayer,
		...LanduseLayer,
		...LandcoverLayer,
		...WaterLayer,
		...AerowayLayer,
		...TunnelLayer,
		...RoadLayer,
		...BridgeLayer,
		...BuildingLayer,
		...BoundaryLayer,
		...PoiLayer,
		...PlaceLayer
	]
}

Map component

import { Style } from "./style/Style"

const [ mapStyle, setMapStyle ] = useState<StyleSpecification>(Style)

<Map
	mapStyle={mapStyle}
	antialias
	styleDiffing
	mapLib={maplibregl}
>
</Map>

[HarelM]

Looks pretty straight forward, I have no clue as to why this works work, live reload should reload the page... Strange... Might be so react optimization or the react wrapper you are using, IDK...

[VitalyVaryvdin]

That's visgl's react-map-gl. Unfortunately, their docs are pretty surface. But i might be better asking there

Thanks for the help!

[sbachinin]

To me it seems unlikely that HMR can help with this.
To reload map style without refreshing the page, you need to either re-create the map or call map.setStyle.
Just reloading a style object apparently doesn't trigger any of these.

If your reloaded module contained not just an object but for example a call to map.setStyle, maybe it would force HMR to run this setStyle each time, and maybe you'll get what you want. But I'm just musing here.

[VitalyVaryvdin]

I've actually tried that after posting the code

useEffect(() => {
    mapRef.current?.getMap().setStyle(mapStyle)
}, [mapStyle])

Didn't do anything. mapRef.current isn't null, double checked that

Is there a way to force map reload through code? That will do in development, i suppose

[HarelM]

setStyle should reload the map.

[VitalyVaryvdin]

Hm, something is pretty wrong then

I've got some simple code handling layers visibility switch, that might be messing it up, i'll check it

[VitalyVaryvdin]

Disabling code handling layers didn't change anything
Apparently, mapStyle in useEffect is still the old style, even though it obviously changed

[VitalyVaryvdin]

react-map-gl states map style would be reloaded on prop change. However, there is something wrong going on with the state

I think the question is out of scope of this repo, closing this discussion