Skip to content

Instantly share code, notes, and snippets.

@topriddy

topriddy/MapPanel.html

Created May 11, 2012 13:07
Show Gist options
  • Save topriddy/2659491 to your computer and use it in GitHub Desktop.
Save topriddy/2659491 to your computer and use it in GitHub Desktop.
Download ZIP
Fairly Reusable GoogleMap Wicket Component
Raw
MapPanel.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:wicket>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TrackListMapPanel</title>
<wicket:head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
#map_canvas{
margin: 0;
padding:0;
height: 400px;
}
</style>
<script type="text/javascript">
$(function(){
initialize();
});
var map;
var markersArray = [];
var flightPlanCoordinates = [];
var flightPath;
function initialize(){
var myLatlng;
if (points.length > 0){
myLatlng = new google.maps.LatLng(points[0][0], points[0][1]);
}else{
}
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: points[0][2],
icon: baseUrl + '/images/map/map-dot-1.png'
});
marker.setMap(map);
drawMap();
}
function updateMap(){
clearMap();
drawMap();
}
function drawMap(){
var myLatlng = new google.maps.LatLng(points[0][0], points[0][1]);
map.setCenter(myLatlng);
for(var i = 0; i < points.length; i++){
var point = points[i];
var latlng = new google.maps.LatLng(point[0], point[1]);
var marker = new google.maps.Marker({
position: latlng,
title: points[0][2],
icon: baseUrl + '/images/map/map-dot-' + (i+1) + '.png'
});
flightPlanCoordinates.push(latlng);
markersArray.push(marker);
}
for(var i = 0; i < markersArray.length; i++){
var marker = markersArray[i];
marker.setMap(map);
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
function clearMap(){
for(var i = 0; i < markersArray.length; i++){
var marker = markersArray[i];
marker.setMap(null);
}
flightPath.setMap(null);
flightPlanCoordinates = [];
markersArray = [];
// flightPlanCoordinates.length = 0;
// markersArray.length = 0;
}
</script>
</wicket:head>
</head>
<body>
<wicket:panel>
<div id="map_canvas">
</div>
</wicket:panel>
</body>
</html>
Raw
MapPanel.java
package topriddy; //package name stripped.
import java.util.List;
import java.util.Map;
import org.apache.log4j.Logger;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.util.ListModel;
import org.apache.wicket.request.Url;
import org.apache.wicket.request.cycle.RequestCycle;
import org.apache.wicket.util.string.AppendingStringBuffer;
/**
*
* @author topriddy
*/
public final class MapPanel extends Panel {
private static Logger logger = Logger.getLogger(MapPanel.class);
ListModel<Map<String, String>> pointsModel;
public MapPanel(String id, List<Map<String, String>> points) {
super(id);
pointsModel = new ListModel(points);
}
@Override
public void renderHead(IHeaderResponse response) {
response.renderJavaScriptReference("http://maps.googleapis.com/maps/api/js?sensor=false");
AppendingStringBuffer buffer = new AppendingStringBuffer();
if (!pointsModel.getObject().isEmpty()) {
buffer.append("var points = ").append(getPointDataAsStringArray()).append(";");
} else {
buffer.append("var points = [[0,0,'N/A']];");
}
buffer.append("var baseUrl = '" + getBaseUrl() + "';");
response.renderJavaScript(buffer.toString(), null);
}
public void updateMap(List<Map<String, String>> points) {
this.pointsModel.setObject(points);
AppendingStringBuffer buffer = new AppendingStringBuffer();
if (points == null || points.isEmpty()) {
buffer.append("points = [[0,0,'N/A']];");
} else {
buffer.append("points = ").append(getPointDataAsStringArray()).append(";");
}
buffer.append("updateMap();");
AjaxRequestTarget target = AjaxRequestTarget.get();
if (target != null) {
target.appendJavaScript(buffer.toString());
}
}
private String getPointDataAsStringArray() {
List<Map<String, String>> list = pointsModel.getObject();
StringBuilder builder = new StringBuilder();
builder.append("[");
for (int i = 0; i < list.size(); i++) {
Map<String, String> map = list.get(i);
String latitude = map.get("latitude");
String longitude = map.get("longitude");
String title = map.get("address");
builder.append("[").append(latitude).append(",").append(longitude).append(",'").append(title).append("']");
if (i != (list.size() - 1)) {
builder.append(", ");
}
}
builder.append("]");
logger.debug(builder.toString());
return builder.toString();
}
private String getBaseUrl() {
String baseUrl = "";
Url url = RequestCycle.get().getRequest().getClientUrl();
baseUrl += "http://" + url.getHost() + ":" + url.getPort();
return baseUrl;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment