I’m using a plugin for Google Maps Geometry called GeoPortal to work our measurements on the roof of buildings.
I’ve got the plugin working fine into my application, it picks up on the Longitude and Latitude of a previous page where they are dynamically created from an entered address.
The issue I am having is that people need to be able to navigate backwards and forwards through the application, meaning that the area plot needs to be remembered, so when they navigate back to that page they will not have to redraw the area every time.
In example I need to remember this plot layout for when the person navigates back to the page:
My code is as follows:
jQuery
var map;
var measure = {
mvcLine: new google.maps.MVCArray(),
mvcPolygon: new google.maps.MVCArray(),
mvcMarkers: new google.maps.MVCArray(),
line: null,
polygon: null
};
jQuery(document).ready(function() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 21,
center: new google.maps.LatLng(51.502378,-0.114348),
mapTypeId: google.maps.MapTypeId.HYBRID,
draggableCursor: "crosshair"
});
google.maps.event.addListener(map, "click", function(evt) {
measureAdd(evt.latLng);
});
});
function measureAdd(latLng) {
var marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true,
raiseOnDrag: false,
title: "Drag me to change shape",
icon: new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5))
});
measure.mvcLine.push(latLng);
measure.mvcPolygon.push(latLng);
measure.mvcMarkers.push(marker);
var latLngIndex = measure.mvcLine.getLength() - 1;
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex-hover.png", new google.maps.Size(15, 15), new google.maps.Point(0, 0), new google.maps.Point(8, 8)));
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5)));
});
google.maps.event.addListener(marker, "drag", function(evt) {
measure.mvcLine.setAt(latLngIndex, evt.latLng);
measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
});
google.maps.event.addListener(marker, "dragend", function() {
if (measure.mvcLine.getLength() > 1) {
measureCalc();
}
});
if (measure.mvcLine.getLength() > 1) {
if (!measure.line) {
measure.line = new google.maps.Polyline({
map: map,
clickable: false,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3,
path:measure. mvcLine
});
}
if (measure.mvcPolygon.getLength() > 2) {
if (!measure.polygon) {
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.25,
strokeOpacity: 0,
paths: measure.mvcPolygon
});
}
}
}
if (measure.mvcLine.getLength() > 1) {
measureCalc();
}
}
function measureCalc() {
var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());
jQuery("#span-length").text(length.toFixed(1))
if (measure.mvcPolygon.getLength() > 2) {
var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
jQuery("#span-area").text(area.toFixed(1));
document.getElementById('RoofArea').value = area.toFixed(1);
document.getElementById('submit').disabled = false;
}
}
function measureReset() {
if (measure.polygon) {
measure.polygon.setMap(null);
measure.polygon = null;
}
if (measure.line) {
measure.line.setMap(null);
measure.line = null
}
measure.mvcLine.clear();
measure.mvcPolygon.clear();
measure.mvcMarkers.forEach(function(elem, index) {
elem.setMap(null);
});
measure.mvcMarkers.clear();
jQuery("#span-length,#span-area").text(0);
document.getElementById('submit').disabled = true;
}
HTML/CSS
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto;
border: 5px solid #2F4B9E;
}
</style>
<div>
<div id="map"></div>
<p>Length (red line): <span id="span-length">0</span> mt<br />
Area (grey area): <span id="span-area">0</span> mt²<br />
<a href="javascript:measureReset();">Reset Measure</a></p>
</div>
I actually answered my own question, so for the sake of closing this question, I’ll post my solution here. I’ve used ColdFusion too.
In the
measureAdd()function, I added this block of code belowmeasure.mvcMarkers.push(marker);which posted to this .cfc I created
Then, right at the top under the first declaration of
map, I added thiscfloopWhich sorted my problem out just fine.