wow thats cool, I want to make mobile app with same hype …this is awesome
HI ARNAUD @sa1
As a graphic designer I can say that your Manneken Trip -project is visually very appealing.
I'm now looking at your project + mapbox studio, with the goal to find some techniques for adding visually interesting interactivity in Hype projects, even with some very basic skills in web dev and JS.
Would be great if you can share some techniques, for example:
- How-to animate map zooming. Let's say we want the map to start zooming in / shifting center position with onclick action.
Mapbox provided us with the function, it works well within Hype:
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/...', // stylesheet location
center: [10.748,59.782], // starting position [lng, lat]
zoom: 5.1 // starting zoom
}); Are zoom / center attributes of var map animatable within Hype?
- Clickable photoicons along your route: I suppose these are made in the mapbox studio.
Is it possible to make them trigger Hype elements? (in your case they are those microblog entries with pics and infotext that slide in by clicking on a photo icon, div id ="drawer" class="HYPE_element" and div class="post_detail_container" in terms of browser inspector)
Hi
-
Mapbox API provide you with all the necessary with “panTo”, “zoomTo”, “jumpTo” or “flyTo” to manage different kinds of transition effects (fully documented on mapbox website). Of course you can get those actions triggered by Hype using the proper code in a Hype function.
-
As the path and icons on the map are generated dynamically they are not managed in mapbox studio but dynamically added to the map using a geojson source and the “addSource” and “addlayer” functions of mapbox API (check out at https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/).
Then you’re right guessing they can trigger Hype elements (via Hype functions).
Hype API provide you with the “hypeDocument.function()” that you can use with a parameter and mapbox event listener to trigger a hype function.
let say that you have points of interest from a geojson source (with an id for each point in your source) displayed on your map and you want to trigger a Hype function based on an the id of the clicked point.
Basically here’s the how to :
• create your hype function to be triggered. you will use the “element” from myFunction(hypeDocument,element, event) to pass the id parameter in your function
• on creating your map, add a Mapbox event listener for example : map.on(‘click’, function (e) {actions to be done here}
• In this listener, use Mapbox queryRenderFeatures to know if you click a point and retrieve this point parameters (see exemple here : https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/) then assign the id parameter to a variable ( e.g. myParameter)
• in the listener, call your Hype function passing the variable in which you assigned the id : hypeDocument.functions().myFunction(hypeDocument, myParameter, event)
If you are new to javascript it could sound a bit complicated but it’s worth the pain trying to understand this mechanism as it opens you a “great power” 
1 Like
HI @sa1
Thank you so much for taking your time for writing this explainer for a user of Hype with non-developer background !
I am sure even more users will benefit of this.
As I’ve noticed from the source code,
the whole site
seems to be built using Hype,
not only The Manneken Trip -part, is that right?
And thank you for encouraging me to dive deeper into JS / API - I’m convinced that kind of knowledge gives more power for visual impact and interaction in Hype projects!
Thanks sa1 its awesome. I would like to learn how you did it with Map thing and microblogging and integrating one signal. does microblogging cost which you have integrated.
Actually only the header part of the home page is done with Hype
The microblogging module is a custom one with all the JS code written in Hype functions for display and UI interactions. Of courses there’s an API called in Hype functions to retrieve the data from the database.
1 Like
Ok JS code means javascript codes you custom made which can blend with Hype Java script codes.Ok I liked your site i want to make similar thing but i just know basic html and i made mobile app using hype3 +cordova using cocoon.io , can you guide me with few links from which i can start learning as i want to make custom map app with blog. If i can only do Map with image and it is hyperlink outside then also it will be cool. Like travel app but with map …my end product will be mobile app using cordova
i am not a coder just newbie.
Thanks for guidance … awesome web app.
https://play.google.com/store/apps/details?id=com.hotelsorts.atlanta
this one i made in hype, now i want to make for DC but love to have a map within it and microblogging . kindly guide me on few steps how i can start with it. like Mapbox and the this ui thing.
thanks
Mapbox website is full of well documented examples with the basic html and javascript. You should play around with them to become familiar with : https://www.mapbox.com/mapbox-gl-js/example/simple-map/
of course if you’re totally new to javascript I encourage you to start learning the basics ( try https://www.w3schools.com/js/default.asp)
then basically to display a map in Hype you 'll have to :
- put in the header of your hype document the links to mapbox API and CSS (document/edit HTML head)
- put a rectangle in your Hype scene to be used as a container for your map
- give it an id that will be use in you javascript code
- put the basic javascript that generate your map in a Hype function (with the proper id for the map container)
- launch this script on scene load
if it works you’re set to experiment further
thanks for valuable guidance, i will do so with map box and i will also work with leaflet and umap. thanks but what you said i will play with it. thanks
Can you please explain the meaning of that maybe with a short example? Would be interesting to know what that means in practical terms. Thanks!
when you use Hype to render dynamic content by generating the code dynamically you may want to include in the generated code links, buttons or other interactions which trigger another Hype function. You can do so by putting in your generated code the proper Hype API method.
Let say you want to dynamically populate a div with a button that trigger another Hype function
Then the Hype function which generate the code will contain :
hypeDocument.getElementById(myDivID).innerHTML='<button onclick="HYPE.documents[\'index\'].functions().anotherHypeFunction(HYPE.documents[\'index\'],'+ myParameter + ',event)">this button trigger a Hype function</button>'
1 Like
Hi @marketmojos
I read your thread with interest.
Do you have any tutorial about how to make an app from Hype to Android/Ios ?