I have created a google map using google map javascript API V3
. I am drawing number of zipcode polygons. The polygons are of different colors depending upon some condition. Now I want to draw straight lines/ hash marks inside some of the polygons depending upon certain criteria. How can we do it. Below is the code which I have written for drawing the polygons.
{% if zip.zip_info.zip_polygon %}
var path = [
{% for polycoord in zip.zip_info.zip_polygon %}
new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
{% endfor %}
];
var polygon_{{ forloop.counter }} = new google.maps.Polygon(
{
path:path,
clickable:true,
strokeColor: '#000000',
strokeOpacity: 0.15,
strokeWeight: 2,
fillColor: fillColor,
fillOpacity: 1,
zipcode: '{{zip.zip_info.zipcode}}'
});
polygon_{{ forloop.counter }}.setMap(map);
{% endif %}
I am also givinging the image link of my requirement.
You can see in the image some of the polygons are shaded with straight lines, and some are shaded with only colors.
To make a path or polygon into a 3D object, click Altitude. A "New Path" or "New Polygon" dialog will pop up. You may need to move it out of the way before moving on to the next step. To draw the line or shape you want, click a start point on the map and drag.
Editing a polygon Once you have created your polygon it will appear in the 'Temporary Places' area in the Places panel. You can edit the polygon. 8. Right click on the polygon name in the Places panel.
Select Add Marker and place the marker at the starting point of your route. In the Point One box, enter a name for your starting point and select Save. Select the Draw a Line tool.
I have been working on the same issue. This is what I have so far: jsFiddle of Example
The BW.PolyLineFill
function creates a Custom Overlay. It takes 4 parameters with the last two being optional.
1. path: an array of Google LatLng objects
2. map: the map to attach theoverlay to
3. fillColor: (optional) the color of the fill, default is red.
4. strokeColor: (optional) the stroke color, default is black
I haven't tested the performance and it probably still needs more tweaking, but it should get you started.
Relevant code:
PolyLineFill.prototype = new google.maps.OverlayView();
function PolyLineFill(poly, map, fill, stroke) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < poly.length; i++) {
bounds.extend(poly[i]);
}
//initialize all properties.
this.bounds_ = bounds;
this.map_ = map;
this.div_ = null;
this.poly_ = poly;
this.polysvg_ = null;
this.fill_ = fill;
this.stroke_ = stroke;
// Explicitly call setMap on this overlay
this.setMap(map);
}
PolyLineFill.prototype.onAdd = function () {
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
//createthe svg element
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttributeNS(null, "preserveAspectRatio", "xMidYMid meet");
var def = document.createElementNS(svgns, "defs");
//create the pattern fill
var pattern = document.createElementNS(svgns, "pattern");
pattern.setAttributeNS(null, "id", "lineFill");
pattern.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
pattern.setAttributeNS(null, "patternTransform", "rotate(-45)");
pattern.setAttributeNS(null, "height", "7");
pattern.setAttributeNS(null, "width", "7");
def.appendChild(pattern);
var rect = document.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "id", "rectFill");
rect.setAttributeNS(null, "fill", this.fill_ || "red");
rect.setAttributeNS(null, "fill-opacity", "0.3");
rect.setAttributeNS(null, "stroke", this.stroke_ || "#000");
rect.setAttributeNS(null, "stroke-dasharray", "7,7");
rect.setAttributeNS(null, "height", "7");
rect.setAttributeNS(null, "width", "7");
pattern.appendChild(rect);
svg.appendChild(def);
//add polygon to the div
var p = document.createElementNS(svgns, "polygon");
p.setAttributeNS(null, "fill", "url(#lineFill)");
p.setAttributeNS(null, "stroke", "#000");
p.setAttributeNS(null, "stroke-width", "1");
//set a reference to this element;
this.polysvg_ = p;
svg.appendChild(p);
div.appendChild(svg);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
PolyLineFill.prototype.AdjustPoints = function () {
//adjust the polygon points based on the projection.
var proj = this.getProjection();
var sw = proj.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = proj.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var points = "";
for (var i = 0; i < this.poly_.length; i++) {
var point = proj.fromLatLngToDivPixel(this.poly_[i]);
if (i == 0) {
points += (point.x - sw.x) + ", " + (point.y - ne.y);
} else {
points += " " + (point.x - sw.x) + ", " + (point.y - ne.y);
}
}
return points;
}
PolyLineFill.prototype.draw = function () {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection
.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection
.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
this.polysvg_.setAttributeNS(null, "points", this.AdjustPoints());
}
PolyLineFill.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
window.BW = {};
window.BW.PolyLineFill = PolyLineFill;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With