How do I add an overlay image to a SIMILE Exhibit map view?

StackOverflow https://stackoverflow.com/questions/20435547

  •  30-08-2022
  •  | 
  •  

Question

Task I'm using Google Maps in SIMILE Exhibit and want to add an image overlay to its map view. For example, superimpose an image of a historical map over an area on the map.

What I've done I have tried understanding and editing the 'map-view.js' file in the Exhibit library. Then I tried to manually edit the library file according to these instructions for adding an overlay to an independent map but with no success. I have also searched for similar questions on Stackoverflow and using internet search engines, but the results I get are all pertaining to SIMILE Widgets or the timeline view of SIMILE Exhibit, not the map view.

Other Info My task is specific to the map view, and I'm using Exhibit v2.3.0, with Google Maps v3. Presently, I am able to add polygons and polylines as overlays to the map successfully.

Was it helpful?

Solution

Answering my own question, but this took a lot of effort and research to get an answer. Hopefully this helps someone else coming across this question. So the solution lies in JavaScript.

Sources: I came across a discussion on Google Groups from 2009 that proposed the core of my solution. This solution needed to be heavily modified for my case because I am using Google Maps v3, while the code was for v2. After figuring out the version conflict, I translated the solution to the API v3 syntax using the Google Developers site. The specific overlay I needed is called Ground Overlay in the documentation.

Solution: Here's the final solution that works for Exhibit v2.3.0 and Google Maps v3. This code snippet needs to be added to the <head> section. 

<script type="text/javascript">
    var map;
    var oldMapViewReconstruct = Exhibit.MapView.prototype._reconstruct;
    Exhibit.MapView.prototype._reconstruct = function() {
        oldMapViewReconstruct.call(this);
        map = this._map;
        var imageBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(40.712216, -74.22655),
            new google.maps.LatLng(40.773941, -74.12544));

        historicalOverlay = new google.maps.GroundOverlay(
            'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
            imageBounds);
        historicalOverlay.setMap(map);
    }
</script>

Notes: Of course, for illustrative purposes, I'm only giving a specific example of a historical map being overlayed, but this can be changed to suit similar purposes. The image to be overlayed is of Newark, New Jersey, and its coordinates are manually set (taken from the documentation example on ground overlays). Please note that if you implement this, you may have to manually zoom to nearby New York to see the solution working and an overlay showing, since I haven't added code for auto-centering or auto-zooming. Another note is that I'm using a MapView container with Exhibit to contain my map, e.g. <div ex:role="view" id="map1" ex:viewClass="MapView" ...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top