Navigate Around a Map

1

Hi!
I want to create a map of constellations that functions almost like dragging and exploring around the area in Google Maps. It would start zoomed in on a couple constellations with instructions to drag to explore more. Is there a way to let the user navigate around an oversized element freely?

2

I would use a pre-built javascript library for this. To handle zooming, dragging, and map-like features, take a look at something like:

https://leafletjs.com/examples/crs-simple/crs-simple.html

There’s some threads with examples here: Search results for 'leaflet' - Tumult Forums

3

What @Daniel has suggested is probably a good bet but it depends on exactly what you need as it might be a little overkill.

With Hype you can drag elements "freely" and specifically in your case you can have a large image, perhaps, of the entire group of "constellations" which can be zoomed in and out at will and also draggable. I would go as far to say that it could even be elements within hype wrapped in a group that could be zoomed and dragged. It all depends on exact needs I guess.

Maybe if you have something started then we can point you in the right direction.

4

Thanks so much for your reply! I’ll get something started, but the scope of what I want is definitely closer to a large image that can be dragged with clickable areas.

5

Here is a thread regarding a draggable map:

The key item is @MarkHunte's Hype doc: map.hype.zip (496.1 KB)

I've created another map ("map_JHSv1.hype.zip") based on Mark's example that has a clickable rectangle that moves in accordance with the map being dragged. This rectangle element triggers a simple one line JavaScript "alert()".

map_JHSv1.hype.zip (450.8 KB)

Please note there is no zooming in this Hype demo.

2 Likes