sis-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Ross Laidlaw (Updated) (JIRA)" <>
Subject [jira] [Updated] (SIS-44) Update the 'demo.jsp' file in the SIS webapp to use an open source maps API
Date Mon, 09 Apr 2012 13:53:17 GMT


Ross Laidlaw updated SIS-44:

    Attachment: SIS-44.rlaidlaw.2012-04-09.patch

The attached images and patch show a basic solution that uses the Leaflet Maps API.

So far, I simply replaced the calls to the Google Maps API with what I judged to be equivalent
calls to the Leaflet Maps API.  I have tried to leave all other code intact and untouched.

The map tiles are working and the markers are all being assigned the correct data from the
RSS feed as content in popups.

At the moment, however, my solution is not ideal as I'm getting a few inconsistencies with
the way the popups are displayed and behave in different browsers.  So I think a bit more
work needs to be done to get the popups similar in each browser.

It would be great to have uniformly sized popups with scroll bars appearing when the content
overflows the popup.  But somehow I'm missing the magic CSS settings or Leaflet properties
to achieve this.  I've set the 'maxWidth' property of the popup upon binding it to the marker.
 I've also tried the following CSS settings, which certainly had some effect, particularly
when using Firefox:


But unfortunately no scroll bars appeared in either Chrome or Safari!  Furthermore, I haven't
yet tested on Internet Explorer...
> Update the 'demo.jsp' file in the SIS webapp to use an open source maps API
> ---------------------------------------------------------------------------
>                 Key: SIS-44
>                 URL:
>             Project: Spatial Information Systems
>          Issue Type: Improvement
>          Components: web services layer, website
>            Reporter: Ross Laidlaw
>            Priority: Minor
>              Labels: javascript
>         Attachments: SIS-44.rlaidlaw.2012-04-09.patch, screenshot_with_leaflet_bbox.png,
> A suggestion was made on one of the SIS wiki pages to update the 'demo.jsp' file in the
SIS webapp to use an open source maps API, such as Leaflet (,
rather than Google maps.
> For reference, below is a copy of the comment from Paul Ramirez, see
for details:
> Instead of using Google Maps you may want to use Leaflet (
or OpenLayers ( due to required API key for the map. This might matter
if you are going to host this example on the SIS Wiki or OODT Wiki as the required API would
be attached to you.
> Here's how a snippet of Leaflet code to setup the map:
> {code}
> var map = new L.Map('map');
> // Setup the basemap      
> var osm = new L.TileLayer('http://otile{s}{z}/{x}/{y}.png',
>     minZoom: 1,
>     attribution: 'Basemap <a href=""
target="_blank">CC-BY-SA</a> by &copy; <a href=""
target="_blank">OpenStreetMap</a>, Tiles Courtesy of &copy; <a href=""
>     subdomains: ['1','2','3','4']
> });
> // Add the basemap to the map
> map.addLayer(osm);
> // Create a marked for the map and add it
> var marker = new L.Marker(new L.LatLng(10.0, 30.0));
> map.addLayer(marker);
> // Attach a given HTML content to the marker. For brevity I truncated the content
> marker.bindPopup("Title: geodata.txt<br/>Link:<a href='http://localhost:8080...'>...</a>");
> {code}
> Unlike the GoogleMap API this does not require a key and is an open source product as
is the basemap (e.g. Open Street Map served by Mapquest).  Then this would be a complete open
source solution from top to bottom. If you have any questions feel free to hit me up on the
SIS or OODT lists.

This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators:!default.jspa
For more information on JIRA, see:


View raw message