Hello. I’d like to introduce my biggest hype project so far :
It is dedicated to live coverage of adventures around the world
The front end is entirely done in hype with the help of various APIs and JS libraries to retrieve and manipulate the live data. Regarding Hype, this project is not about animations but complexe responsive UI management ( take a look at the mobile phone version )
I find that hype + APIs is an incredibly powerful combination for rapid webapp dev.
Feedback is welcome.
Great work. Shows the great potential for using Hype as a UI tool. Also, an interesting journey!
Wow! Nice job. Would you consider sharing a part of the techniques used in you project?
Message me to further talk about this opportunity.
Thank you.
Sure I can share some techniques. Let’s do it here so that everybody can benefits. Do you have particular requests ?
Hi,
That’s great. I would like to use something similar to your micro blogging which is really neat and efficient. I would probably use JSON at the backend for the data so that it is convenient to share with other frontend apps.
Have a great day.
Indeed, the Hype webapp use JSON data provided by an API. Then if you know a bit of javascript (with the help of jquery it could be easier) you can write fonctions in hype that manipulate the data and generate the required HTML code that you then just have to send to the proper hype container with hypeDocument.getElementById(‘containerID’).innerHTML= … . And thanks to Hype JS API you can even include in the sent code calls to other hype functions.
Hi all,
I’m trying to achieve a similar design, having a large map which can be dragged around in any direction. All the interactive maps I have previously seen are on a timeline but as I don’t want to pre decide the direction in which a user will go I have no idea if I can achieve this result.
@sa1 Is the map in your design achieved within hype? or is this just added with the APIs etc
Any help will be really appreciated.
Cheers
Hi Simon.
The map is generated with mapbox service API. They have a very well documented API with tons of examples and integrate it in hype is pretty straightforward
HI @sa1
As a visual artist I love The Mannekin Trip Map of Arnaud le Canadien!
I’ve managed to install and played with the mapbox a little bit. I run into a strange automatically rendered text ‘Missing Mapbox GL JS CSS’ above the mapbox - look at my screenshot - did you experience the same thing? any thoughts how to get rid of this?
And a general question: From your own experience, what are the benefits of using mapbox in comparison to GoogleMaps for Hype-based projects?
The author describes here
how-to make the switch but doesn’t tell the reason why to move away from using GoogleMaps?
Thank you @MaxZieb
for pointing out to the leaflet topic on this forum, it’s great to read about other users implementation experience of this js lib within Hype – and not just to admire the published html output – extremely useful for learning purposes is to study tweaked js snippets inside hype docs provided by savvy js users .
Hab’ Dank
Probably haven't linked to specific CSS file that is probably needed for the plugin.
It may be that Mapbox has an easier learning curve? Just one thing to note. If you're using it in a paid for service or app then you have to shell out $499 monthly plus the usual PAYG service but it does have a 50,000 call limit as opposed to GM's 2,500. I would probably look into Leaflet as Max has said but it's up to you.
HI @DBear
I linked the Mapbox CSS file, tried to tweak the div style
.mapboxgl-missing-css
in the CSS they provided, to make that automatically generated text invisible -
display: none; color: white on white bgrnd …
but this ‘Missing Mapbox GL JS CSS’ is still sitting there.
PS.: 50K hits limit is more than enough for my use.
just to clarify: leaflet does not offer maptiles itsself.
Hi @Ed_Sager. Sorry for the late …was very busy those days.
You have to include in your page header a call to the mapbox CSS. Something like :
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' /> (may vary according the version of mapbox gl js you use).
About the reason why I choose mapbox :
The cost : using google map in a business context is way more expensive. Until now google allow small developments to use it’s API even without a registered API key. Though those days are over and starting from june it won’t be possible anymore and in the meantime google map pricing is increasing. (read http://geoawesomeness.com/developers-up-in-arms-over-google-maps-api-insane-price-hike/)
tools : Mapbox provides you with a really user friendly and powerful web app called Mapbox studio to craft the visual aspect of your map and also manage you own custom geo data sources.
vector : mapbox gl js use vector map tiles. Rendering while zooming and moving the map is faster and visually more appealing.
HELLO THERE @sa1
thank you for defining your reasons for choosing mapbox.
Including a call to the mapbox CSS into the Head HTML didn’t yield any results when trying to get rid of the 'Missing Mapbox GL JS CSS’-message.
In browser Inspector I see that the mapbox js is generating a div class=“mapboxgl-missing-css” with an automatic HTML text inside saying ‘Missing Mapbox GL JS CSS’, and I don’t know how I can get rid of it .
<style>
.HYPE_scene div .mapboxgl-missing-css {
display: none;
}
</style>
Hype’s own CSS is interfering with the mapbox css. The above code in the Head should get rid of that “missing …” line.
HI @DBear, thank you for your help.
You solved my problem with just two lines of code. That’s great, I would never guess that I have to write the class selector name this way.
reading @DBear comment on his solution reminds me that you have to uncheck the “protect from external styles” in hype document inspector. If you haven’t done so this is probably the cause of your issue (and may be of other ones you have not detected yet). Doing so you won’t have to add those lines of code I guess
True yes, you can select (uncheck) the “protect from external styles” option (as sa1) has mentioned, in the “Document” inspector and this will also remedy the situation. Only this will leave the Hype doc unprotected from external styles messing with the internals but I can’t see that as being a problem in this case. So, if you don’t want to code then this option is available. At least there are now 2 options 