pan and zoom images for jQuery Mobile

Question

I would appreciate any help concerning pan and zoom for a jquery mobile web app. I have an image of a building floorplan with an image map on top that I would like the user to be able to view from his mobile phone, zoom in and out and pan the area of interest into view.

Answer 1

I have been working on the same problem where an office's floor map of desks should be shown in different colors based on desk's status (Empty, Allocated, Hot seated and etc).

Adding to to this if user clicks on desk, the details of allocated associates/employees should be shown.

The above requirements had been implemented using image mapster jquery plug-in.

And also zooming and panning should be provided.For zooming and panning I have found gzoom plug-in which best suits my requirement. But it is not working as expected when used with image mapster plug-in.

I appreciate your help regarding this.

Answer 2

I figured it out, got everything I needed from the OpenLayers examples

<script type="text/javascript">
        var map;

        function init(){
            map = new OpenLayers.Map('map');
            var options = {numZoomLevels: 3}
            var floorplan = new OpenLayers.Layer.Image(
            'Floorplan Map',
            '../../temp_photos/sample-floor-plan.jpg',
            new OpenLayers.Bounds(-180, -90, 180, 90),
        new OpenLayers.Size(275, 190),
            options
        );
            map.addLayer(floorplan);
            //Create a Format object
            var vector_format = new OpenLayers.Format.GeoJSON({}); 

            //Create a Protocol object using the format object just created
            var vector_protocol = new OpenLayers.Protocol.HTTP({
                url: '../../controller?action=GET_FLOOR_FEATURES',               
                format: vector_format
            });

            //Create an array of strategy objects
            var vector_strategies = [new OpenLayers.Strategy.Fixed()];

            //Create a vector layer that contains a Format, Protocol, and Strategy class
            var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
                protocol: vector_protocol,
                strategies: vector_strategies 
            });

            map.addLayer(vector_layer);
               //Create and add selectFeature control
            var select_feature_control = new OpenLayers.Control.SelectFeature(
            vector_layer, 
            {
                multiple: false,
                toggle: true,
                toggleKey: 'ctrlKey',
                multipleKey: 'shiftKey' 
            }
        );
            map.addControl(select_feature_control); 

            //Activate the control
            select_feature_control.activate();

            //Finally, let's add some events so we can do stuff when the user 
            //  interacts with the features
            function selected_feature(event){
                //clear out the log's contents
                document.getElementById('map_feature_log').innerHTML = '';

                //Show the current selected feature (passed in from the event object)
                var display_text = 'Clicked on: ' 
                    + '<strong>' + event.feature.attributes.location + '</strong>'
                    + ': ' + event.feature.attributes.description + '<hr />';
                document.getElementById('map_feature_log').innerHTML = display_text;

                //Show all the selected features
                document.getElementById('map_feature_log').innerHTML += 'All selected features: ';

                //Now, loop through the selected feature array 
                for(var i=0; i<vector_layer.selectedFeatures.length; i++){
                    document.getElementById('map_feature_log').innerHTML += 
                        vector_layer.selectedFeatures[i].attributes.location + ' | ';
                }
            }
            function unselected_feature(event){
                var display_text = event.feature.attributes.location + ' unselected!' + '<hr />';
                document.getElementById('map_feature_log').innerHTML = display_text;

                //Show all the selected features
                document.getElementById('map_feature_log').innerHTML += 'All selected features: ';

                //Now, loop through the selected feature array 
                for(var i=0; i<vector_layer.selectedFeatures.length; i++){
                    document.getElementById('map_feature_log').innerHTML += 
                        vector_layer.selectedFeatures[i].attributes.location + ' | ';
                }
            }

            //Register the event
            vector_layer.events.register('featureselected', this, selected_feature);
            vector_layer.events.register('featureunselected', this, unselected_feature);

           if(!map.getCenter()){
                 map.setCenter(new OpenLayers.LonLat(0, 0),1);
            }
        }
    </script>

Markup: Image Layer Example

    <p id="shortdesc">
        This is a floor plan for the first floor of the Science Building
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs"><div id='map_feature_log'></div>
        <p class="caption">
            This test shows how to display an image of a floorplan as a 
            base layer and then draw vectors on top of that, on a new layerage
        </p>
        <p>
            When vector is added popup appears with that vector's information
        </p>
    </div>
</body>

I get my features from the server:

package actions;

import control_layer.Action;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/** * * @author christina */ public class GetFloorFeatures implements Action {

private static final int MAX_INACTIVE_INTERVAL = 900; // 15 minutes
private String view;

@Override
public boolean execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
    HttpSession session = req.getSession(true);
    System.out.println("------------ In GetFloorFeatures");
    session.setMaxInactiveInterval(MAX_INACTIVE_INTERVAL);

    view = "pages/maps/displayFloorFeatures.jsp";
    return true;
}

@Override
public String getView() {
    return view;
}

@Override
public Object getModel() {
    return null;
}

}

The data is hardcoded in the jsp file but it will eventually be generated by a database query:

<%@page contentType="application/json" pageEncoding="UTF-8"%>
<% response.setContentType("application/json");
//harcoded now, later will call database query to retrieve features for this floor
String floorFeatureVectors = "{\"type\": \"FeatureCollection\",\"features\":     [{\"type\":\"Feature\", \"id\":\"OpenLayers.Feature.Vector_84\",        \"properties\":{\"location\": \"Telecom Lab\",\"description\": \"Stand back, I'm going to try science!\"}, \"geometry\":{\"type\":\"Polygon\", \"coordinates\":[[[9, -52.342105263158], [9.4736842105263, -79.815789473684], [40.263157894737, -78.868421052632], [43.105263157895, -78.394736842105], [44.526315789474, -51.394736842105], [9, -52.342105263158]]]}, \"crs\":{\"type\":\"OGC\", \"properties\":{\"urn\":\"urn:ogc:def:crs:OGC:1.3:CRS84\"}}},"
    +   "{\"type\":\"Feature\", \"id\":\"OpenLayers.Feature.Vector_85\", \"properties\":{\"location\": \"MUSIC lab\",\"description\": \"Laboratory of Distributed Multimedia Information Systems and Applications \"}, \"geometry\":{\"type\":\"Polygon\", \"coordinates\":[[[-113.21052631579, 4.9736842105263], [-113.68421052632, -11.605263157895], [-76.263157894737, -13.026315789474], [-76.263157894737, -1.1842105263158], [-93.315789473684, -0.71052631578947], [-93.789473684211, 4.0263157894737], [-113.21052631579, 4.9736842105263]]]}, \"crs\":{\"type\":\"OGC\", \"properties\":{\"urn\":\"urn:ogc:def:crs:OGC:1.3:CRS84\"}}},"
    +   "{\"type\":\"Feature\", \"id\":\"OpenLayers.Feature.Vector_86\", \"properties\":{\"location\": \"Main Entrance Science Building\",\"description\": \"Caffeteria \"}, \"geometry\":{\"type\":\"Point\", \"coordinates\":[-8.0526315789474, 36.710526315789]}, \"crs\":{\"type\":\"OGC\", \"properties\":{\"urn\":\"urn:ogc:def:crs:OGC:1.3:CRS84\"}}}"

    + "]}";%><%=floorFeatureVectors%>

Answer 3

I solved my problem with OpenLayers, image now pans and zooms http://dev.openlayers.org/releases/OpenLayers-2.11/examples/image-layer.html

have to figure out how to combine it with imagemapster now.. (http://www.outsharked.com/imagemapster/)

Answer 4

This should do the trick. http://www.photoswipe.com/