HTML/Javascript option for viewing huge images (maps), with overlays - javascript

Can anyone suggest a good javascript library for displaying and navigating huge images in HTML?
I need a way for my users to navigate some custom maps[1], with zooming and dragging similar to Google Maps. I need the solution that works offline as I'm embedding it in an iPad html (phonegap) application[2].
I actually already have this working (mostly) with PanoJS. But it lacks a way to float widgets above items in the map, e.g. Float a button over an area of the map that can be clicked to navigate to somewhere else.
I am able to split up my large images into tiles. I'm just looking for a slightly more advanced viewer than PanoJS, without having to build it myself :)
Anyone got any ideas? Some have suggested OpenLayers. War stories?
Thankyou,
dan
[1] The maps are stylized and don't map to real world coordinates.
[2] All the images and tiles are supplied with the application and are loaded locally.

In the end I went with leaflet.js. This was able to give me the map, layers, markers and the other bits and pieces I needed. (http://leaflet.cloudmade.com/)
I spent quite a bit of time with ModestMaps.js along the way. That's a great library, but quite low level. Leaflet ended up being the best mix.
Thanks everyone for their help.

Related

How can I display OSM maps in Flutter 'Web'?

I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.
First we'll have a interface that display statistics for our entire planet:
https://google.com/covid19-map/?hl=en (Just like htisw)
Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.
Is it possible in Flutter Web?
I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)
https://pub.dev/packages/flutter_map
but it doesn't explicitly say that it supports Flutter Web.
I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider
But it didn't really display anything, maybe because a certain widget or function didn't work as expected.
According to your experience, which is the best way to achieve what I am looking for?
If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.
Flutter_map doesn’t support flutter web.
You may check out the below Flutter Maps widget which has support for all the platforms including web.
https://pub.dev/packages/syncfusion_flutter_maps
Regarding the requirements you have mentioned, you can try the below things.
By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.
https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically
With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.
https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer
https://help.syncfusion.com/flutter/maps/shape#range-color-mapping

Creating an interactive map in a web page

I would like to create an interactive map on my website where you can hover over a location and it will animate showing some links that are clickable and will take the client to another page displaying graphs about that location. What should I learn in order to achieve this? Thanks
I'm assuming you don't know much about web development yet, so start with some HTML tutorials (such as this, or this, or this) and Javascript tutorials (such as this, or this, or this). There's a number of ways of creating graphics on web pages (Chart.js is a great library that takes all the hard work out of it).
Then you might want to look into learning how the Google Maps API works. It's a pretty dang flexible API.

Create a map of images and click markers like Google maps

I would like to create a map with my own images of an area
that will work like the Google maps. I would also like it to
have click-able markers and the ability to zoom (best if the
zoom refers to additional images).
I have been searching around the net and I found examples such as
OpenLayers, MapTile, OverScroll and SpryMap but nothing seems to
be able to do what I want.
Do you think that it is possible??
Thank you very much
Ion
This page seems to do what you want:
http://www.tamrielma.ps/skyrim/
It is a link from https://sites.google.com/site/fusiontablestalks/stories
I just don't have much of a clue how to reproduce the Skyrim page :(
An expert with the GoogleMaps API could make this for you, but I was able to find a service that works as an intermediary. I believe you can try it for free by uploading your images to that service, or you can pay a license fee to host everything on your own server.
http://www.maplib.net/
An example of a custom map which I believe does everything you are talking about: http://www.maplib.net/map.php?id=13985

how to load a huge image on the style of google maps?

i would load a huge image in my web page (8Mpx x 5Mpx). I thought of creating a simple mechanism on the style of google maps..
But, honestly, I do not have very clear ideas on how to implement it.. any advice on how to structure it?
in particular, I have many doubts about how to handle the drag with the asynchronous loading of the image to vary the portion of the images displayed
Thank you in advance for your help : )
An easy answer would to be use Google Maps.
It's a rather advanced topic, but it shouldn't be any harder than doing it by hand.
Here is more information
I've used Zoomify's products in the past to accomplish this. I work on a team that manages a few datacenters, so we have some gigantic floor maps (drawn up in CAD, exported as a huge image). I take those maps and convert them to what I consider a "Google style map" using Zoomify Express (free).
More info here: http://www.zoomify.com/express.htm
I realize this is an old question, but I'd like to suggest http://leafletjs.com/.
I can only think of some sort of tiles. You break down the image in several parts ( tiles ). Then you only draw the one that are in your viewport.

Google maps loading images like

I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax

Categories