Interactive responsive City/Map

1

Hello all,
i’m new to Hype Pro and this forum here. I come from the area 3D-Animation / Motion Design.
I have a new client-project and want to use Hype for it but i’m not sure if it`s the right tool for it?
I want to create an interactive City / Map. In this city are driving cars and flying planes arround. About 15 bulidings in this city are interactive. When the user is clicking on a building, an animation starts and a textbox appears.
My first steps are seen on following link:
https://rob-webdev.webflow.io

My main problem is, that the webdesigner must integrate this in a website and the interactivity should work on every smartphone and tablet.
Is it possible to create something like Google Maps, inside of hype, where you can zoom in and out and drag the city arround. In addition there should be clickable buttons on the website which make the map jump to a specific point.

My english is not the best, i hope you`re understanding my questions.

All the best
Robert

2

I'll simply list what I think is possible (easily using native Hype tools), what might need some JavaScript programming, and what is impossible to achieve (again, it's just from my experice in Hype):

Easily possible. The map on link you sent is fairly easy. It can basically be achieved using, some still images (the background, non-interactive) and some other images (like those of vehicles) which are animated (within Hype). Then, you'd need the images of buildings seperately, so you can animate that in Hype as well. I'd recommed to use SVGs in most cases so you can easily (using JavaScript) change their colours.

Hype is fairly simple to integrate in any website, I guess.

Now, this is a tough part. While the animation that you make, would work directly on all smartphones and tablets, you might have to create proper responsive layouts (layouts to fit devices of various sizes). Now, the main problem with that is scaling the content to fit. If you're completely new to web development, it might take a little time for you to be able to understand how it works. While the concept is fairly simple, implementing it isn't always that easy. The difficulty level varies from project to project.

I doubt if that's possible. It's surely not possible natively within Hype, but, even by using JavaScript, I don't think you can zoom into Hype's canvas (at least I don't know a way to do so).

Now, this also might need some JavaScript if you want it to work exactly like Google Maps. There's an inbuilt drag feature in Hype, but, I don't really see how we can use it to move a map.

This is possible quite easily.

Overall, I'd say, this project has some bit of complexity. But, there are many amazing people on this community to help you when you're stuck.

2 Likes
3

Hi, thanks for your answer. After experimenting the whole weekend with Hype, i agree with you, that the responsivness and the ability to zoom in or out is the most difficult problem.
But overall i think it`s possible to offer this kind of interactive map to my client :wink:

Maybe it`s possible to integrate an external script (in the forum are some threads with leaflet…) to add a google-maps-like navigation?
My coding-skills are very limited so maybe i can try such things later :slight_smile:

4

Leaflet is free to use but requires a map to control.
Although some use of the third party maps controlled by leaflet are free just be aware there could be charges depending on usages on the client site from said maps ( not leaflet ). I.e the number of requests.
That is not to say that the thresholds are not high for when and if that starts.
So if you are going to look at using a map controlled by leaflet then make sure you are full aware of the terms and what kind of usage the maps will see from the client site.

I currently have internal/map app that uses mapbox . There are only about 20-30 people who use it on and of daily. They will never hit the daily threshold that is in the thousands if I remember correctly.

You can also use leaflet for you own map image/s although I have fully investigated that.

5

Check also this example from @h_classen with a Leaflet map: Leaflet, geojson & hype

1 Like
6

Hello all,
do you think its possible to use a Hype-Animation instead of an external image as background-layer.
I made this example (https://leafletjs.com/examples/crs-simple/crs-simple.html) work a little in my Hype-file.
So the idea is, to replace the Imagefile(“hyperaster.svg”) with the Hype-Animation (“symbol-mapcontainer”) which is lying below the “hyperaster.svg”.
And if it`s possible, how can i achieve this?
Here is the hype-file to understand better what i want.
leaflet-test-V1.zip (137.0 KB)

Sorry for those question i`m an beginner when it comes to javascript and hype and webdevelopment.

7

leaflet-test-V1.hype.zip (95.2 KB)

above example is just a playground … seems to work … i’d say leaflet does not out of the box support html-elements as image-layer …

1 Like
8

another, easier approach may be using panZoom-js-library
panZoom.hype.zip (92.2 KB)

it’s highly configurable. to mention: as its intention is to take control on position and scale of elements it may conflict with Hypes runtime who’s trying to control those … so it may need careful setup and testing

1 Like
9

You are my hero, many thanks :smiley:
Its exactly what im searching for.
I played arround a little on your file.

I tried to implement Zoom-In, Zoom-Out and Reset buttons, but i can`t get it to work.

The ohter buttons are used to jump to a specific position on the map. That works.

Would be nice if the move to position is smooth, also the zoom-reset.

Do you think that is possible?

Her is my playground :wink:
panzoom-buttons.zip (119.9 KB)

1 Like
10

the API does not seem provide this smooth effect. you may contact the author for a request?

1 Like