4 ms·
This site is so clean. If the creator sees this, or if anyone else has the knowledge or pointers, I would like to know how to create a basic one page site with
by briefcomment 6y ago
This site is so clean. If the creator sees this, or if anyone else has the knowledge or pointers, I would like to know how to create a basic one page site with a map interface just like this one. I have zero programming experience for reference.
- et-al 6y agoThe most basic version of this would be an Google Maps embed, but you'll quickly run into styling and interaction limitations. Not the author, but McBroken looks to be built with Mapbox's Javascript library, so you'll need to break out a text editor. They have some good starter docs here: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/ https://docs.mapbox.com/mapbox-gl-js/example/simple-map/ You can learn a lot by signing up for an API key from Mapbox and tweaking their example code. They even provide online editors so you don't even need to work with an HTML file locally (though I'd still recommend that for permanence). No React, no Webpack needed!
- briefcomment 6y agoThank you. Do you think the side panels (especially the dynamic one on the left) are a part of the Mapbox interface, or something separate?
- rkv 6y agoSomething separate (ie. custom code). You can use "Inspect Element" in your browser to confirm.
- et-al 6y agoAs rkv said, that's a list built in React. The elements (store locations) in the list are filtered by what's in the map's viewport. There are also mouse event handlers on the list and on the map which trigger interactions between the two. This site receives all its data via vector tiles [0]. So as you pan around, you fetch basic visual map information (what the geography looks like) and McDonald's data at the same time. [0] https://docs.mapbox.com/vector-tiles/specification/ https://docs.mapbox.com/vector-tiles/specification/